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

Niva Shah is a Software Engineer with over eight years of experience. She has developed a strong foundation in computer science principles and a passion for problem-solving.