Change Time format to 24 Hours in JavaScript

# Table of Contents

1. Change Time format to 24 Hours in JavaScript
2. Change getHours() to 12 Hour Format

Note: If you need to change the getHours() method to 12-hour format, click on the second subheading.

# Change Time format to 24 Hours in JavaScript

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.

Copied!
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:

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.

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.

Copied!
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.

Copied!
const date = new Date();

// 👇️ 7/25/2023, 16:32:17
console.log(
  date.toLocaleString([], {
    hour12: false,
  }),
);

# Setting different properties and values on the options object

You can use the different properties on the options object of the toLocaleString method to change the formatting of the date and time.

Copied!
const date = new Date();

// 👇️ Tuesday, July 25, 2023 at 16:32:39
console.log(
  date.toLocaleString('en-US', {
    dateStyle: 'full',
    timeStyle: 'full',
    hour12: false,
  }),
);

Other possible values for the two properties are: long, medium and short.

Copied!
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.

Copied!
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',
  }),
);

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.

# Change getHours() to 12 Hour Format

To change the getHours() method to a 12 hour format:

1. Use the modulo % operator to get the remainder of dividing a call to the getHours() method by 12.
2. If the remainder is greater than zero, return the remainder.
3. If the remainder is equal to zero, 12 should be returned.

Copied!
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.

Copied!
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.

Copied!
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.

Copied!
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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Change getMinutes, getHours & getSeconds to 2-digit format
• Get Month and Date in 2 Digit Format in JavaScript