Reza Lavarian
Convert a dd/mm/yyyy string to a Date object in JavaScript

Convert a dd/mm/yyyy string to a Date object in JavaScript

Reza Lavarian's photo
Reza Lavarian
·

4 min read

If you need a cross-browser approach to convert a dd/mm/yyyy string to a Date object in JavaScript, here’s what you need to do:

  1. Split the date/time components into separate values (year, month, day, hour, minutes, etc.)

  2. Create a Date object with these arguments (details below).

✋ Update: This post was originally published on my blog decodingweb.dev, where you can read the latest version for a 💯 user experience. ~reza

A date string in dd/mm/yyyy format is considered a non-standard date format in JavaScript. That said, it isn’t a good idea to pass it directly to the Date() constructor.

So what’s a standard date format? You may ask.

JavaScript explicitly supports date strings in ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ). For instance, 2022-12-08, 2022-12-08T09:35:00, etc.

However, the behavior of the Date methods with non-standard date formats are implementation-specific and might work differently from browser to browser.

That said, if your date string is ISO-8601-compliant, you can safely pass it to the Date() constructor:

const dateObj = new Date('2022-12-08')

console.log(dateObj)
// output: Thu Dec 08 2022 00:00:00 GMT+0000 (Western European Standard Time)

But if you have a non-standard date format (like 15/12/2022), a consistent approach is:

  1. Split the individual date/time components (year, month, day, hour, minute, second, milliseconds, and time zone) and assign them to distinct variables as integer values.

  2. Call the Date() constructor with these arguments.

✋ Please note: The month value is zero-based in JavaScript, meaning 0 is January, 1 is February, and so forth. So you'll need to decrement the month by 1.

Since the Date() constructor expects integer values, we can use the Unary plus operator to convert each element into an integer value.

Let's see an example:

let dateString = '15/12/2022'
let [day, month, year] = dateString.split('/')
const dateObj = new Date(+year, +month - 1, +day)

console.log(dateObj)
// output: Thu Dec 15 2022 00:00:00 GMT+0000 (Western European Standard Time)

In the above code we split the date components into an array. Then, we used the destructuring assignment to assign each element to a distinct variable.

We also converted each element into an integer by the Unary plus (+) operator when passing them to the Date() constructor.

If the time is specified, we'll have to split the time portion as well (depending on the delimiter):

let dateTimeString = '15/12/2022 15:30:00'

const [dateString, timeString] = dateTimeString.split(' ')
const [day, month, year] = dateString.split('/')
const [hour, minute, second] = timeString.split(':')

const dateObj = new Date(+year, +month - 1, +day, +hour, +minute, +second)

console.log(dateObj)
// output: Thu Dec 15 2022 15:30:00 GMT+0000 (Western European Standard Time)

In the above code, since the date and time are separated by a space, we split each portion into dateString and timeString variables respectively (by the destructuring assignment syntax)

Then, we pass the integer form of each element to the Date() constructor.

Convert a dd/mm/yyyy string to ISO date format If you need to convert a dd/mm/yyyy string to an ISO date format, you can do it in two steps:

  1. Convert the date string into a JavaScript Date object (like the above examples)

  2. Call Date.prototype.toISOString() on your Date instance.

Here's an example:

let dateTimeString = '15/12/2022 15:30:00'

const [dateString, timeString] = dateTimeString.split(' ')
const [day, month, year] = dateString.split('/')
const [hour, minute, second] = timeString.split(':')

const dateObj = new Date(+year, +month - 1, +day, +hour, +minute, +second)

console.log(dateObj.toISOString())
// output: 2022-12-15T15:30:00.000Z

Convert a dd/mm/yyyy string to a local date format

Converting a dd/mm/yyyy string to any local date format is straightforward once you convert it into a Date object:

  1. Convert the date string into a JavaScript Date object

  2. Call Date.prototype.toLocalDateString() on your Date instance.

For instance, to convert the date string to a German date format:

let dateTimeString = '15/12/2022 15:30:00'

const [dateString, timeString] = dateTimeString.split(' ')
const [day, month, year] = dateString.split('/')
const [hour, minute, second] = timeString.split(':')

const dateObj = new Date(+year, +month - 1, +day, +hour, +minute, +second)

console.log(dateObj.toLocalDateString('de-DE'))
// output: 15.12.2022

Using Moment js to convert a dd/mm/yyyy string to a Date object

If you need a cross-browser yet quick method of converting dd/mm/yyyy to a Date object, use a JavaScript date processing library.

Moment.js is one of the most popular JavaScript data-processing libraries. You can install it by npm or yarn real quick. And the usage is quite simple:

let dateString: '08/12/2022'

const dateObj = moment(dateString, 'dd/mm/yyyy').toDate()
console.log(dateObj)
// output: Thu Dec 15 2022 15:30:00 GMT+0000 (Western European Standard Time)

And that's how you would convert a non-standard date string like dd/mm/yyyy to a JavaScript Date object and then into any date format you wish.

Alright, I think that does it. I hope you found this guide helpful!

Thanks for reading.

❤️ You might like:

Programming TipsJavaScriptwebdev