Last updated: Mar 6, 2024
Reading timeยท4 min
Note: If you need to change the
getHours()
method to 12-hour format, click on the second subheading.
Use the toLocaleString()
method to change time formatting to 24 hours.
The toLocaleString
method returns a string that represents the date and time
according to the provided locale
and options
parameters.
const date = new Date(); // ๐๏ธ 7/25/2023, 16:30:52 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:
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 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.
const date = new Date(); // ๐๏ธ 7/25/2023, 16:32:04 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.
const date = new Date(); // ๐๏ธ 7/25/2023, 16:32:17 console.log( date.toLocaleString([], { hour12: false, }), );
options
objectYou 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(); // ๐๏ธ Tuesday, July 25, 2023 at 16:32:39 console.log( date.toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'full', hour12: false, }), );
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(); // ๐๏ธ Jul 25, 2023, 16:34:06 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(); // ๐๏ธ 07/25/2023, 16:34:20 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.
To change the getHours()
method to a 12 hour format:
%
operator to get the remainder of dividing a call to the
getHours()
method by 12
.12
should be returned.function formatHoursTo12(date) { return date.getHours() % 12 || 12; } const date1 = new Date('September 24, 2025 15:24:00'); console.log(formatHoursTo12(date1)); // ๐๏ธ 3 const date2 = new Date('September 24, 2025 23:05:00'); console.log(formatHoursTo12(date2)); // ๐๏ธ 11 const date3 = new Date('September 24, 2025 12:13:00'); console.log(formatHoursTo12(date3)); // ๐๏ธ 12
We used the
modulo (%)
operator to get the remainder of dividing the hours by 12
.
If the hours are fewer than 12
, the number of hours is returned.
console.log(3 % 12); // ๐๏ธ 3 console.log(11 % 12); // ๐๏ธ 11
On the other hand, if the hours are more than 12
, we return the remainder to
get a 12
hour format.
console.log(13 % 12); // ๐๏ธ 1 console.log(16 % 12); // ๐๏ธ 4 console.log(22 % 12); // ๐๏ธ 10
The last step is to handle the edge case where the hours are 12
or 24
,
because there would be no remainder if we divide either number by 12
.
console.log(12 % 12); // ๐๏ธ 0 console.log(24 % 12); // ๐๏ธ 0
We used the logical OR (||) operator, which returns the value to the left if it's truthy, otherwise, it returns the value to the right.
Truthy are all values that are not falsy.
The falsy values in JavaScript are: false
, null
, undefined
, 0
, ""
(empty string), NaN
(not a number).
0
is a falsy, value, so if the remainder of the division is 0
, we return the
value to the right of the logical OR (||) operator, which is 12
.
You can learn more about the related topics by checking out the following tutorials: