How to Display JavaScript datetime in 12 hour AM/PM Format?

Here are different ways to display the datetime in 12 hour format in JavaScript.

1. Using toLocaleString() Method

In this approach, we will utilize an inbuilt method toLocaleString() to change the format of the given date into AM-PM format. toLocaleString() Method returns a string representation of the date Object. The 2 arguments Locale and options allow for customization of the behaviour of the method. 

let date = new Date();

let n = date.toLocaleString([], {
  	hour: "2-digit",
  	minute: "2-digit",
});

console.log(n);

07:42 AM

2. Using the Native Approach

In this approach, we will change the DateTime format by only using native methods. Simply put, we will apply the modulo "%" operator to find the hour in 12-hour format and use the conditional "?:" operator to apply "AM" or "PM". 

let date = new Date();

let hours = date.getHours();
let minutes = date.getMinutes();

// Check whether AM or PM
let newformat = hours >= 12 ? "PM" : "AM";

// Find current hour in AM-PM Format
hours = hours % 12;

// To display "0" as "12"
hours = hours ? hours : 12;
minutes = minutes < 10 ? "0" + minutes : minutes;

console.log(hours + ":" + minutes + " " + newformat);

3:15 AM

3. Using Intl DateTimeFormat() Constructor

The Intl.DateTimeFormat object enables language-sensitive date and time formatting. By specifying the appropriate options, we can easily convert the time to a 12-hour format with AM/PM notation.

let date = new Date();

let formatter = new Intl.DateTimeFormat("en-US", {
  	hour: "2-digit",
  	minute: "2-digit",
  	hour12: true,
});

let formattedTime = formatter.format(date);

console.log(formattedTime);

07:42 AM