JavaScript: Display a Date object in 12-hour format (am/pm)

This article shows you a couple of different ways to display a date object in 12-hour format, with AM and PM, in JavaScript.

Note: AM stands for “ante meridiem” which means “before noon” in Latin, and PM stands for “post meridiem” which means “after noon” in Latin. These terms are used to distinguish between the first 12 hours of the day (from midnight to noon) and the second 12 hours of the day (from noon to midnight) in the 12-hour time format.

Using the toLocaleTimeString() method

The best way to display a date object in 12-hour format with am and pm is using the toLocaleTimeString() method. The syntax is concise and intuitive.

Example:

var date = new Date();

// display the current time in 12-hour format
var time = date.toLocaleTimeString('en-US', { hour12: true });
console.log(time);

Output:

1:05:19 AM

Note that the toLocaleTimeString() method only returns the time portion of the date object, not the date itself. If you need to display both the date and time, you can use the toLocaleString() method instead, as shown in the example below:

//create a new date object
const date = new Date();

//get the date and time string in local format
const dateTimeString = date.toLocaleString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: true,
});

//display the date and time string
console.log(dateTimeString);

Output:

March 8, 2023 at 1:07:31 AM

Defining a custom format function

In the vast majority of cases, creating a format function from scratch for this task is unnecessary. However, you can customize it to your liking for rare special cases. Besides, if you are new to JavaScript, it will help you gain a deeper understanding of the language.

Example:

// Define a custom format function
const customFormat = (date) => {
  //get hours, minutes, and seconds
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  // convert hours to 12-hour format
  hours = hours % 12;
  hours = hours ? hours : 12;

  // add leading zeros to minutes and seconds
  minutes = minutes < 10 ? '0' + minutes : minutes;
  seconds = seconds < 10 ? '0' + seconds : seconds;

  // add am/pm suffix
  const amPm = hours >= 12 ? 'PM' : 'AM';

  // combine all parts into a time string
  const timeString = hours + ':' + minutes + ':' + seconds + ' ' + amPm;

  return timeString;
};

// create a new date object
const date = new Date();

console.log(customFormat(date));

Output:

1:09:40 AM

Real-World Use Cases

You’ve learned 2 different ways to display time in the 12-hour format. There are many real-world use cases to apply this knowledge, such as:

• Scheduling: When scheduling events, it’s common to use the 12-hour time format to make it easier for people to understand when an event is taking place. For example, “The meeting is at 3:00 PM.”
• Public transportation: Train and bus schedules often use the 12-hour time format to indicate departure and arrival times. For example, “The next train departs at 9:45 AM.”
• Clocks: Many clocks, both analog and digital, display time in the 12-hour format with am/pm. This is often more intuitive for people who are not used to the 24-hour format.
• Personal preferences: Some people simply prefer the 12-hour format over the 24-hour format because it is more familiar and easier to read.

Happy coding & have a nice day!