How to convert a String to a Date object in TypeScript | bobbyhadz (2024)

# Table of Contents

1. Convert a String to a Date object in TypeScript
2. Make sure your Date string is valid
3. Getting date components from a date string
4. Getting date and time components from a date-time string
5. Getting an ISO-formatted date
6. Convert a String to a Date in TypeScript using date-fns
7. Convert a String to a Date in TypeScript using moment.js

# Convert a String to a Date object in TypeScript

Use the Date() constructor to convert a string to a Date object inTypeScript.

The Date() constructor takes a valid date string as a parameter and returnsa Date object.

Copied!
const str = '2024-07-21';const date = new Date(str);console.log(date); // 👉️ 2024-07-21T00:00:00.000Zconsole.log(date.toDateString()); // 👉️ Sun Jul 21 2024

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

# Make sure your Date string is valid

If you get an invalid Date when creating the Date object, you need toformat the string correctly before passing it tothe Date() constructor.

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 typesof arguments to the Date() constructor:

1. a valid ISO 8601 string, formatted as YYYY-MM-DDTHH:mm:ss.sssZ, or justYYYY-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 andseconds.

# Getting date components from a date string

Here is an example that splits a string formatted as MM/DD/YYYY (could be anyother format) and passes the values as parameters to the Date() constructor tocreate 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); // 👉️ 2024-07-20T21:00:00.000Z

We split the string on each forward slash to get the values for the month, dayand year.

Copied!
const str = '07/21/2024';// 👇️ [ '07', '21', '2024' ]console.log(str.split('/'));

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

Copied!
console.log(+'21'); // 👉️ 21console.log(typeof +'21'); // 👉️ number

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

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

# Getting date and time components from a date-time string

Here is another example that 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:37console.log(date);

We first split the date and time string on the space, so we can get the date andtime components as separate strings.

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

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

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

# Getting an ISO-formatted 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:37console.log(date);// 👇️ "2024-07-21T01:24:37.000Z"console.log(date.toISOString());

ThetoISOStringmethod returns a string of the date in the ISO 8601 format according touniversal time.

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

# Convert a String to a Date in TypeScript using date-fns

You can also use the date-fns moduleto convert a string to a Date in TypeScript.

First, make sure you have the module installed by running the following commandfrom the root directory of your project.

Copied!
# 👇️ with NPMnpm install date-fns# 👇️ with YARNyarn add date-fns

Now you can import and use the parse() function from the date-fns module.

Copied!
import { parse } from 'date-fns';const str = '09-24-2024 09:44:21';const date = parse(str, 'MM-dd-yyyy hh:mm:ss', new Date());console.log(date); // 👉️ 2024-09-24T06:44:21.000Z

The code sample assumes that you have a Date string formatted asMM-DD-YYYY hh:mm:ss.

The parse function takes a date or date and time string and converts thestring to a Date object.

You can view the accepted format string patterns inthis table in the docs.

# Convert a String to a Date in TypeScript using moment.js

You can also use the moment package toconvert a string to a date in TypeScript.

First, make sure you have the module installed by running the following commandfrom the root directory of your project.

Copied!
# 👇️ with NPMnpm install moment# 👇️ with YARNyarn add moment

Now you can import and use the moment module to convert a string to a dateobject.

Copied!
import moment from 'moment';const str = '09-24-2024 09:44:21';const date = moment(str, 'MM-DD-YYYY hh:mm:ss').toDate();console.log(date); // 👉️ 2024-09-24T06:44:21.000Z

Notice that I used the toDate() method to convert the moment object to aJavaScript date.

You can remove the call if you'd rather keep it as a moment object.

Note that the moment module should generally only be used when your projectalready relies on it.

In general, it's better to use the more modern date-fns package because it ismuch faster.

# Additional Resources

You can learn more about the related topics by checking out the followingtutorials:

• How to format Date/Time in TypeScript
• How to type a Date object in TypeScript
• Calculate the time between 2 Dates in TypeScript
• How to compare Dates in JavaScript and TypeScript
• How to get the current Date and Time in TypeScript