How to Get Time in 12 Hour Format in Javascript

by

To get time in 12-hour format in Javascript, use the toLocaleString() method. The toLocaleString() is a built-in JavaScript method that returns a string with a language-sensitive representation of a date.

Syntax

toLocaleString(locales,options);

Parameters

It takes two parameters: locales and options. But these are also optional.

Locales –  We can specify that en-us, etc.

Options –  We specify format etc.

Example

const d = new Date();
const result = d.toLocaleString("en-US", {
 hour: "numeric",
 minute: "numeric",
 hour12: true,
});
console.log("Result : ", result);

Output

Result : 11:20 AM

The above example displayed the current time in a 12-hour format using the toLocaleString() method. In this method, we specify options to our needs.

Get 12-hour format using toLocaleTimeString() in JavaScript

The toLocaleTimeString() is a built-in JavaScript method that returns a string with a language-sensitive representation of the time portion of the date. It is precisely like the toLocaleString() function but with few differences.

Syntax

toLocaleTimeString(locales,options);

Parameters

It also has the same parameters as toLocaleString() labels and options. Both parameters are optional.

Locales –  We can specify that en-us, etc

Options –  We can specify a format.

Example

const d = new Date();
const result = d.toLocaleTimeString("en-US", {
 hour: "numeric",
 minute: "numeric",
 hour12: true,
});
console.log("Result : ", result);

Output

Result : 11:52 AM

In the above example, we display a 12-hour time format using the toLocaleTimeString() function. Then, we pass our options and, based on that, will give a time representation string.

Get time 12-hour format using a custom function.

We can format our time in 12 hours using our custom function logic.

const timeFormat12Hour = (date) => {
   let h = date.getHours();
   let m = date.getMinutes();
   let ampm = h >= 12 ? "pm" : "am";

   h = h % 12; //reminder
   h = h ? h : 12;

   m = m.toString().padStart(2, "0");
  const formatedTimeString = h + ":" + m + " " + ampm;
  return formatedTimeString;
};
console.log("Result : ", timeFormat12Hour(new Date()));

Output

Result : 11:57 am

In the above example, we build our custom function to get and print the 12-hour time format. We can change our logic based on our requirements in this custom function.

Using moment.js library

Using the moment library to get the 12-hour format, use the moment().format() function in JavaScript. The Moment.js format and manipulate time/date in different formats. It is a modern time/date Javascript library.

Syntax

moment().format();

Example

To work with the moment module in JavaScript, install it using the node package manager.

npm install moment

To use it in a JavaScript file, import the moment module using the import statement.

import moment from "moment"

const time = moment(new Date()).format("hh:mm a");
console.log("Result : ", time);

Output

Result : 12:03 pm

In the above example, we use the moment.js library to display the 12-hour format if we work on a big project where we need to manipulate or format date or time, so moment js is the best library for that.

Final words

There are various ways to get and print the 12-hour format in JavaScript. However, if you deal with date and time frequently, then use the moment library because it has many functions to format date and time based on your requirements.

If your use case is just for a single webpage then you can use the toLocaleString() or toLocaleTimeString() function.

That’s it for this tutorial.

Related posts

How to Convert Timestamp to Date in JavaScript

How to Convert Date to Timestamp in JavaScript

How to Convert String to Date in Javascript

How to Generate Dates Between Two Dates in JavaScript

Javascript Date Object

Leave a Comment