How do you display JavaScript datetime in the 12 hour AM/PM format?

javascript

date-formatting

locale

timezone

byAnton Shumikhin·Nov 18, 2024

To quickly display the current time in 12-hour AM/PM format with JavaScript's Date object, use the following code:

let date = new Date();
let hours = date.getHours() % 12 || 12; // Magician's trick: Convert 24h to 12h
let minutes = ('0' + date.getMinutes()).slice(-2); // No room for slip-up: Guarantee two digits
let ampm = date.getHours() >= 12 ? 'PM' : 'AM';
console.log(`${hours}:${minutes} ${ampm}`); // Ta-da! Magic done.

This snippet transforms 24-hour time to 12-hour format with % 12 and || 12, ensures two-digit minutes display using '0' + and .slice(-2), and appends 'AM' or 'PM' based on the hour.

Localize with native JavaScript methods

For a snazzier localization experience, adapt to your user's locale and timezone preferences with Date.prototype.toLocaleString():

let date = new Date();
let options = { 
  hour: 'numeric', 
  minute: 'numeric', 
  hour12: true 
};
console.log(date.toLocaleString('en-US', options)); // Well, Hello, "2:34 PM"!

This method keeps local customs in mind, providing the time in a familiar way for users.

Choosing the right library for heavy lifting

When native JavaScript starts to crack under pressure, it's time for moment.js to strut its stuff and shine on date and time formatting:

// Roll out the spotlights for Moment.js
let now = moment();
console.log(now.format('h:mm A')); // Strike a Pose, "3:45 PM"

If you prefer date-fns or Luxon, hands-on libraries focused on functional programming and immutable operations, they're ready and waiting backstage to make their entrance when needed.

Addressing potential pitfalls

On the stage of time formatting, you may face pitfalls:

Midnight and Noon: Tick tock, midnight or noon? Display '12' instead '0'.
Regional Variations: Brace yourself, toLocaleTimeString() varies across locales.
Nailing Leading Zeroes: No room for bluffing, display minutes with leading zeroes.
Regex and Parsing: Lights, Camera, Regex! Extract and manipulate specific components from date strings.

Minute details, major impact

Invest in rehearsals and pay consideration to granular details. Be ready to answer the big questions when formatting time:

Encore in Different Time Zones: How does your code cater to different time zones or daylight saving changes?
Language for Different Audiences: Does your time format speak to every user, regardless of their language?
System Preferences Influence: Does changing system's settings affect your code?

Remember, a polished performance involves clean, precise code. Endeavor concise and maintainable solutions that'll earn a standing ovation from future developers.

explain-codes / Javascript / How do you display JavaScript datetime in the 12 hour AM/PM format?

Linked

How do I change the language of moment.js?



How to convert a Date to UTC?



Javascript seconds to time string with format hh:mm:ss



Convert UTC date time to local date time



Javascript add leading zeroes to date

