A part of my daily tasks at work its to handle dates and how to format them to show them to the user. Long story short, I was never told there were libraries in the project to handle the dates (Moment.js for example) but it was for the better, because I learned how to manipulate the dates with js built in functions and will show them in this article.
The toLocaleString() function
toLocaleString() is a Date function included in ecma-402, which returns the date as a string firmatted in a specified language. It receives two parameter locales and options to allow the application to specify the language and the conventions needed to format the date. If no parameter are passed, the function will return it will return a formatted day based on the current location.
Lets see how it works:
let date = new Date()
console.log(date) /*2021-07-19T17:40:29.442Z*/
console.log(date.toLocaleString()) /*7/19/2021, 5:39:59 PM*/
Using the function we received a string with the default format, but in a more human readable manner.
Now lets see how we can give a more easy to read format:
let date = new Date()
console.log(date.toLocaleString("en-US",{
day: 'numeric',
month: 'numeric',
year:'numeric'
})) /*7/19/202*/
Now we used the function by passing the locale argument with en-US and the the options argument setting how the date should be formatted. The locale argument is used to set the localized format for the date, in the example we passed 'en-US' to specify we want the date localized to American English.
With the options arguments we can do some more tweaking to format the date. In the previous example we defined the day,month and year properties to be numeric, we can specify them with other values:
let date = new Date()
console.log(date.toLocaleString("en-US",{
day: 'numeric',
month: 'long',
year:'2-digit'
})) /*July 19, 21*/
We specified the month with 'long' value to get its full name and year with '2-digit' value to obtain the last two digits of the year. But this options are not the only ones we can configure, there are more examples to showcase them:
let date = new Date()
/*to format in Mexican Spanish*/
console.log(date.toLocaleString("es-MX",{
day: 'numeric',
month: 'long',
year:'2-digit'
})) /*19 de julio de 21*
/* to display the hour*/
console.log(date.toLocaleString("us-EN",{
day: 'numeric',
month: 'long',
year:'numeric',
hour: 'numeric',
hour12: true, /*if false hour is display on 24-hour format 7pm = 19 hrs*/
})) /*July 19, 2021, 7 PM*/
/*to display the weekday*/
console.log(date.toLocaleString("us-EN",{
day: 'numeric',
month: 'long',
year:'numeric',
weekday: 'long'
})) /*Monday, July 19, 2021*/
/*short format*/
console.log(date.toLocaleString("us-EN",{
day: 'numeric',
month: 'short',
year:'2-digit',
weekday: 'short'
})) /*Mon, Jul 19, 21*/
/*just the current day*/
console.log(date.toLocaleString("us-EN",{
weekday: 'long'
})) /*Monday*/
/*you can also show the current era*/
console.log(date.toLocaleString("us-EN",{
era: 'long'
})) /*Anno Domini*/
If you a are receiving the wrong date,most commonly a day ahead of the current date, it's possible that the instance where your application is running (mostly common with cloud severs) have a different timezone configuration. To solve this problem you can specify your timezone when you are formatting the date.
let date = new Date().toLocaleString("en-US", {timeZone: "America/New_York"})
console.log(date) /*7/20/2021, 10:41:43 AM*/
Or we can build it:
const createDate=(hours,minutes,seconds,date=new Date())=>
new Date(Date.UTC(date.getFullYear(),date.getMonth(),date.getDate(),hours,minutes,seconds))
You can also have a quick format using toISOString() function:
let date = new Date().toISOString()
console.log(date)/*2021-07-20T14:51:26.055Z*/
toLocaleString() on Node
Depending of the Node version you are using, toLocaleString() could not work as expected. For versions below 13.0.0 toLocaleString() will only work for the 'en-Us' locale or the locale your node instance was built on. But from the 13.0.0 and above versions, Node now includes the ICU support by default.
Links: