Change Time format to 24 Hours in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Change Time format to 24 Hours in JavaScript #

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.

index.js
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 arguments we passed to the toLocaleString method are:

  1. 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.
  2. options - an object where we set the hour12 property. Read more about the options object in the MDN docs.
The 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 the 24-hour time format.

We set the locale to en-US in the example. This formats the date and time according to the US locale.
index.js
const date = new Date(); // 👇️ 1/27/2022, 13:18:22 console.log( date.toLocaleString('en-US', { hour12: false, }), );

If you need to format the date and time according to the visitor's default locale, pass an empty array for the locale parameter.

index.js
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.

index.js
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.

index.js
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.

index.js
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', }), );
By setting the values of the date and time components to 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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.