JS Date & Timezone Guide

Display 12-Hour and 24-Hour Time in JavaScript

To force a clock style, pass hour12: true|false (or the finer hourCycle) to Intl.DateTimeFormat rather than relying on the locale default. Part of Mastering Intl.DateTimeFormat Options.

Why this scenario is tricky

Whether a locale shows 12- or 24-hour time by default varies, so hard-coding an assumption breaks for someone. The subtlety is midnight: hourCycle distinguishes h11/h12 (12-hour, midnight as 0 or 12) and h23/h24 (24-hour, midnight as 0 or 24), and picking the wrong one prints '24:00' or '0 AM'.

Clock style is an explicit choiceLocale defaults differ; midnight is the trapClock style is an explicit choicerely on locale defaultsome users get the otherhour12 / hourCycle setpredictablehourCycle controls whether midnight prints as 0, 12, or 24.

Minimal working solution

const t = new Date('2024-03-15T00:30:00Z');
new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit', hour12: false, timeZone: 'UTC' }).format(t); // '00:30'
new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit', hour12: true, timeZone: 'UTC' }).format(t);  // '12:30 AM'

Pick the clockhour12 flips 12/24-hour outputPick the clockinstanthour12true/false'12:30 AM'or '00:30'

Full production version

// hourCycle is finer than hour12: choose the midnight convention.
new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone: 'UTC' });
// 'h23' → 00:00; 'h24' → 24:00; 'h11'/'h12' are 12-hour variants

hourCycle detailh11/h12/h23/h24 set the midnight rulehourCycle detailoptionshourCycleh23/h24/h11/h12midnight rule

Verification snippet

12h vs 24h Time assertionsKey cases assert correctlyAssertions that prove the edge casehour12 false'00:30'hour12 true'12:30 AM'h24 midnight'24:00'h11 midnight'0:30 AM'

Common pitfalls

12h vs 24h Time pitfallsCommon mistakes and their fixesWrongRighthard-code AM/PM stringsnot localizedhour12 / hourCycleexplicit clockassume 24h everywhereUS users confusedlet Intl format AM/PMlocalized

Frequently Asked Questions

How do I force 24-hour time in JavaScript?

Pass hour12: false to Intl.DateTimeFormat, or use hourCycle: 'h23' for the finer control where midnight is 00:00. For 12-hour output use hour12: true or hourCycle: 'h12'.

What is the difference between hour12 and hourCycle?

hour12 is a simple boolean for 12- vs 24-hour. hourCycle is more precise: h11 and h12 are 12-hour variants (midnight as 0 or 12) and h23 and h24 are 24-hour variants (midnight as 0 or 24), which matters for how midnight and noon are printed.