Javascript parse string to date with format

Javascript parse string to date with format

Last updated: Jan 13, 2023
Reading time · 4 min

# Convert a String to a Date object in JavaScript

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

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

Copied! 
const str = '2022-09-24'; const date = new Date(str); console.log(date); // 👉️ 2022-09-24T00:00:00.000Z console.log(date.toDateString()); // 👉️ Sat Sep 24 2022 

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

# Dealing with Invalid Dates

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

Copied! 
const date1 = new Date('abc'); console.log(date1); // 👉️ Invalid Date const date2 = new Date('2023-12-45'); console.log(date2); // 👉️ Invalid Date 

If you have difficulties creating a valid Date object, you can pass 2 types of arguments 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 arguments that represent the year , month (0 = January to 11 = December), day of the month , hours , minutes and seconds .

# Splitting a Date string to create a valid Date

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

Copied! 
// 👇️ (MM/DD/YYYY) const str = '09/24/2022'; const [month, day, year] = str.split('/'); console.log(month); // 👉️ 09 console.log(day); // 👉️ 24 console.log(year); // 👉️ 2022 const date = new Date(+year, +month - 1, +day); console.log(date); // 👉️ Sat Sep 24 2022 

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

Copied! 
const str = '09/24/2022'; // 👇️ [ '09', '24', '2022' ] console.log(str.split('/')); 

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

This is necessary because the Date constructor expects a zero-based value for the month, where January = 0, February = 1, March = 2, etc.

# Splitting a Date and Time string to create a valid Date

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

Copied! 
const str = '09/24/2022 07:30:14'; const [dateValues, timeValues] = str.split(' '); console.log(dateValues); // 👉️ "09/24/2022" console.log(timeValues); // 👉️ "07:30:14" const [month, day, year] = dateValues.split('/'); const [hours, minutes, seconds] = timeValues.split(':'); const date = new Date(+year, +month - 1, +day, +hours, +minutes, +seconds); // 👇️️ Sat Sep 24 2022 07:30:14 console.log(date); 

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

Copied! 
const str = '09/24/2022 07:30:14'; const [dateValues, timeValues] = str.split(' '); console.log(dateValues); // 👉️ "09/24/2022" console.log(timeValues); // 👉️ "07:30:14" 

We then had to split the date string on each forward slash to get the value for the month, day and year.

Copied! 
const dateValues = '09/24/2022'; console.log(dateValues.split('/')); // 👉️ [ '09', '24', '2022' ] 

Note that your separator might be different, e.g. a hyphen, but the approach is the same.

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

Copied! 
const timeValues = '07:30:14'; console.log(timeValues.split(':')); // 👉️ [ '07', '30', '14' ] 

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

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

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

# Getting an ISO-formatted date

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

Copied! 
const str = '09/24/2022 07:30:14'; const [dateValues, timeValues] = str.split(' '); console.log(dateValues); // 👉️ "09/24/2022" console.log(timeValues); // 👉️ "07:30:14" const [month, day, year] = dateValues.split('/'); const [hours, minutes, seconds] = timeValues.split(':'); const date = new Date(+year, month - 1, +day, +hours, +minutes, +seconds); // 👇️️ Sat Sep 24 2022 07:30:14 console.log(date); // 👇️ "2022-09-24T04:30:14.000Z" (ISO 8601) 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.

# Convert a String to a Date using date-fns

You can also use the date-fns module to convert a string to a Date.

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

Copied! 
# 👇️ with NPM npm install date-fns # 👇️ with YARN yarn 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 = '12/21/2024 06:34:59'; const date = parse(str, 'MM/dd/yyyy hh:mm:ss', new Date()); console.log(date); // 👉️ 2024-12-21T06:34:59.000Z 

The code sample assumes that you have a Date string formatted as MM/DD/yyyy hh:mm:ss .

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

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

# Additional Resources

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

JavaScript String to Date – Date Parsing in JS

Eamonn Cottrell

Dates are a pretty fundamental concept. We use them all the time. And computers use them all the time. But parsing dates using JavaScript can be a little. well, interesting.

1. Discuss date formatting
2. Turn a wee ol’ string into a proper date object using JavaScript.
3. Parse a date object into a number
4. Show an alternative way to use arguments instead of strings to create a date object.

Dates are tricky, but they’re also incredibly helpful to use. And once you spend a little time going over the basics, your confidence will grow.

What is the Date Format in JavaScript?

ISO 8601, of course! This is the name of the international standard for communicating date and time data. We need to be using this format when dealing with dates in JavaScript

Here’s what this format looks like. You’re familiar with it already – it just combines a date and time into one big piece of info that JavaScript can get cozy with.

// YYYY-MM-DDTHH:mm:ss.sssZ // A date string in ISO 8601 Date Format

How to Use the new Date() Constructor in JavaScript

new Date() is the constructor to create a new date in JavaScript. Shocker! 😂

If you don’t pass anything into the new date constructor, it will give you a date object of whatever the current date and time is.

So, when passing a string into new Date() , use a full date with hours:minutes.milliseconds.

A capital T separates the day component from the time component as shown below:

You’ve got the basics now, though. Go put it into practice. You now know how to create a date object in JavaScript with new Date() . You can grab the current date and time by not passing anything into the constructor, or you can pass in a string, a number or arguments.

Thanks for Reading

Thanks for reading! I write about design and development here: https://blog.eamonncottrell.com/

And you can find me on Twitter and LinkedIn.

Источник