Skip to main content

How to Change Time Format to 12-Hour or 24-Hour in JavaScript

Formatting time is a common requirement in web applications. Whether you need to display time in a standard 24-hour format (14:30) or a more user-friendly 12-hour AM/PM format (2:30 PM), JavaScript's built-in Date object provides powerful and flexible tools for the job.

This guide will teach you the two primary methods for time formatting. You will learn the modern, recommended approach for formatting a full time string using toLocaleString(), and the manual, mathematical approach for converting a 24-hour value from getHours() into a 12-hour format.

The Date.prototype.toLocaleString() method is the best and most flexible tool for formatting dates and times. It can format a date into a locale-sensitive string and provides a rich set of options to control the output, including the hour format.

Syntax​

date.toLocaleString('en-US', options)

where:

  • 'en-US': A locale string (e.g., 'en-GB' for British English, 'de-DE' for German) that specifies the formatting conventions.
  • options: An object where you define how you want the time to be formatted. The key for our purpose is hour12.

Solution 1: Formatting to a 24-Hour Clock (HH:MM:SS)​

To get a 24-hour format (e.g., 16:05:02), you set the hour12 option to false.

const date = new Date();

const options = {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false, // This is the key
};

const timeString24hr = date.toLocaleString('en-US', options);

console.log(timeString24hr);  // Output: 16:05:02
note

By setting hour: '2-digit', you also ensure that single-digit hours are padded with a leading zero (e.g., 08:05:02).

Solution 2: Formatting to a 12-Hour Clock (AM/PM)​

To get a 12-hour format with AM/PM (e.g., 4:05:02 PM), you set the hour12 option to true.

const date = new Date();

const options = {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
  hour12: true, // This is the key
};

const timeString12hr = date.toLocaleString('en-US', options);

console.log(timeString12hr);  // Output: 4:05:02 PM

Manual Method: Converting getHours() from 24 to 12-Hour Format​

Sometimes you don't need a full time string; you just need to convert the number from getHours() (which returns 0-23) into a 12-hour number (1-12). This can be done with a simple mathematical formula using the modulo (%) operator.

The logic:

  1. Get the hour from the Date object (0-23).
  2. Use the modulo operator (% 12) to get the remainder when divided by 12. This handles hours 13-23 correctly (e.g., 14 % 12 is 2).
  3. This leaves an edge case: 0 (midnight) and 12 (noon) both result in 0. We can fix this with a logical OR (|| 12), which will convert any 0 result to 12.
function formatTo12Hour(date) {
  const hours24 = date.getHours();
  
  // The modulo operator gets the remainder, and the `|| 12` handles the 0/12/24 edge cases.
  const hours12 = hours24 % 12 || 12;

  return hours12;
}

const date1 = new Date('2025-10-27T15:30:00');  // 3:30 PM
console.log(formatTo12Hour(date1));             // Output: 3

const date2 = new Date('2025-10-27T00:15:00');  // 12:15 AM
console.log(formatTo12Hour(date2));             // Output: 12

To get the AM/PM part, you can simply check if the original 24-hour value was less than 12.

const ampm = date.getHours() < 12 ? 'AM' : 'PM';

Conclusion​

JavaScript provides powerful, built-in tools for formatting time, suitable for any requirement.

The key takeaways are:

  1. For creating formatted time strings, the toLocaleString() method is the recommended best practice. It is powerful, flexible, and locale-aware.
    • Use the hour12: false option for 24-hour time.
    • Use the hour12: true option for 12-hour time with AM/PM.
  2. For manually converting a number from 24-hour to 12-hour format, use the modulo trick: const hours12 = hours24 % 12 || 12;.

Table of Contents