This content originally appeared on DEV Community 👩💻👨💻 and was authored by Reza Lavarian
✋ 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
Dateobject 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
Dateobject - Call
Date.prototype.toLocalDateString()on yourDateinstance.
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:
- Get the day of the week in JavaScript without a library
- Subtract days from a date in JavaScript without a library
- How to add days to a date in JavaScript (without a library)
- How to get yesterday's date in JavaScript without a library
- Add commas to numbers in JavaScript (Explained with examples)
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Reza Lavarian
Reza Lavarian | Sciencx (2023-02-04T17:05:14+00:00) Convert a dd/mm/yyyy string to a Date object in JavaScript. Retrieved from https://www.scien.cx/2023/02/04/convert-a-dd-mm-yyyy-string-to-a-date-object-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.