Convert a String to a Date object in TypeScript

Convert a String to a Date object in TypeScript #

Use the Date() constructor to convert a string to a Date object in TypeScript, e.g. const date = new Date('2024-07-21'). The Date() constructor takes a valid date string as a parameter and returns a Date object.

Copied!
const str = '2024-07-21';

const date = new Date(str);

console.log(date); // 👉️ Sun Jul 21 2024

We used the Date() constructor to convert a string to a Date object.

Copied!
const str = '07_21_2024';

const date = new Date(str);

console.log(date); // 👉️ Invalid Date

If you have difficulties creating a valid Date object, you can pass 2 types of parameters to the Date() constructor:

1. a valid ISO 8601 string, formatted as YYYY-MM-DDTHH:mm:ss.sssZ, or just YYYY-MM-DD, if you only have a date without time.
2. multiple, comma-separated parameters that represent the year, month (0 = January to 11 = December), day of the month, hours, minutes and seconds.

Here is an example that splits a string formatted as MM/DD/YYYY (could be any other format) and passes the values as parameters to the Date() constructor to create a Date object.

Copied!
const str = '07/21/2024';

const [month, day, year] = str.split('/');

console.log(month); // 👉️ "07"
console.log(day); // 👉️ "21"
console.log(year); // 👉️ "2024"

const date = new Date(+year, +month - 1, +day);

console.log(date); // 👉️ Sun Jul 21 2024

We split the date on each forward slash to get the values for the month, day and year.

We used the unary plus (+) operator to convert the values to numbers.

Notice that we subtracted 1 from the month when passing it to the Date() constructor.

Here is another example, which creates a Date that also contains the hours, minutes and seconds.

Copied!
const str = '07/21/2024 04:24:37';

const [dateComponents, timeComponents] = str.split(' ');

console.log(dateComponents); // 👉️ "07/21/2024"
console.log(timeComponents); // 👉️ "04:24:37"

const [month, day, year] = dateComponents.split('/');
const [hours, minutes, seconds] = timeComponents.split(':');

const date = new Date(+year, +month - 1, +day, +hours, +minutes, +seconds);

// 👇️ Sun Jul 21 2024 04:24:37
console.log(date);

The first thing we did was split the date and time string on the space, so we can get the date and time components as separate strings.

We also split the time string on each colon : and assigned the hours, minutes and seconds to variables.

We passed all of the parameters to the Date() constructor to create a Date object.

If you need to store a date string in your database, it's best to store the ISO 8601 representation of the date.

You can get the ISO formatted date by calling the toISOString() method.

Copied!
const str = '07/21/2024 04:24:37';

const [dateComponents, timeComponents] = str.split(' ');

console.log(dateComponents); // 👉️ "07/21/2024"
console.log(timeComponents); // 👉️ "04:24:37"

const [month, day, year] = dateComponents.split('/');
const [hours, minutes, seconds] = timeComponents.split(':');

const date = new Date(+year, +month - 1, +day, +hours, +minutes, +seconds);

// 👇️ Sun Jul 21 2024 04:24:37
console.log(date);

// 👇️ "2024-07-21T01:24:37.000Z"
console.log(date.toISOString());

The toISOString method returns a string of the date in the ISO 8601 format according to universal time.

The ISO string can easily be passed to the Date() constructor to create a new Date object.