Borislav Hadzhiev
Thu Jan 27 2022·2 min read
Photo by Meiying Ng
Use the toLocaleString()
method to change time formatting to 24 hours, e.g.
date.toLocaleString('en-US', {hour12: false})
. The toLocaleString
method
returns a string that represents the date and time according to the provided
locale
and options
parameters.
const date = new Date(); // 👇️ 1/27/2022, 13:18:22 console.log( date.toLocaleString('en-US', { hour12: false, }), );
The toLocaleString method returns a locale-specific string, formatted according to the provided parameters.
The two parameters we passed to the toLocaleString
method are:
locales
- a string with a BCP 47 language tag or an array of such strings.
You can use any of the available locales, e.g. es-MX
for Mexico or en-CA
for Canada. If you need more information about this parameter, check out the
MDN docs.options
- an object where we set the hour12
property. Read more about the
options
object in the
MDN docs.hour12
property specifies whether to use 12-hour time (as opposed to 24-hour time).We set the value for the property to false
, to use 24-hour time format.
en-US
which will format the date and time according to the US locale.If you need to format the date and time according to the visitor's default
locale, pass an empty array for the locale
parameter.
const date = new Date(); // 👇️ 1/27/2022, 13:18:22 console.log( date.toLocaleString([], { hour12: false, }), );
You can use the different properties on the options
object of the
toLocaleString
method to change the formatting of the date and time.
const date = new Date(); // 👇️ Thursday, January 27, 2022, 13:28:40 console.log( date.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'full', hour12: false, }), );
We set the dateStyle
and timeStyle
properties in the options
object to
full
to get a more verbose representation of the date and time.
Other possible values for the two properties are: long
, medium
and short
.
const date = new Date(); // 👇️ Jan 27, 2022, 13:30:38 console.log( date.toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'medium', hour12: false, }), );
You can view all of the properties and values the options
object implements by
visiting the
MDN docs.
Here is an example that shows the month, day, hours, minutes and seconds as
2-digits, even if their values are less than 10
.
const date = new Date(); // 👇️ 01/27/2022, 13:31:26 console.log( date.toLocaleString('en-US', { hour12: false, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', }), );
2
digits, we format them consistently, even if they have a value of less than 10
.If that's the case, the values get padded with a leading zero.
You can view all the other properties the options
object supports by visiting
the
MDN docs.