✋ Update: This post was originally published on my blog decodingweb.dev, where you can read the latest version for a 💯 user experience. ~reza
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:
- Split the date/time components into separate values (year, month, day, hour, minutes, etc.)
- Create a
Date
object with these arguments (details below).
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:
- 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.
- 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:
- Convert the date string into a JavaScript Date object (like the above examples)
- 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:
- Convert the date string into a JavaScript
Date
object - Call
Date.prototype.toLocalDateString()
on yourDate
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:
Top comments (0)