JS Date & Timezone Guide

Format Time Only Without the Date in JavaScript

To show only the time, give Intl.DateTimeFormat just the time fields (hour, minute) plus an explicit timeZone, or use timeStyle with no dateStyle. Part of Mastering Intl.DateTimeFormat Options.

Why this scenario is tricky

Slicing a time out of a formatted date string is fragile across locales. The right approach is to request only the fields you want; if you pass hour and minute and omit the date fields, the output is time-only, correctly localized and zoned.

Request fields, don't slice stringsString slicing breaks per localeRequest fields, don't slice stringsformatDate().split(',')[1]fragile, locale-specific{ hour, minute, timeZone }time-only, robustAsk Intl for exactly the fields you want to display.

Minimal working solution

const fmt = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit', timeZone: 'Europe/Paris' });
fmt.format(new Date('2024-03-15T13:30:00Z')); // '2:30 PM'

Time-only fieldshour+minute, no date fieldsTime-only fieldsinstanthour, minutetimeZone'2:30 PM'

Full production version

// timeStyle is the shorthand; still pass a timeZone.
const fmt = new Intl.DateTimeFormat('ja-JP', { timeStyle: 'short', timeZone: 'Asia/Tokyo' });
fmt.format(new Date('2024-03-15T13:30:00Z')); // '22:30'

timeStyle shorthandtimeStyle without dateStyle = time onlytimeStyle shorthandinstanttimeStyleshorttimeZonelocalized time

Verification snippet

Time Only assertionsKey cases assert correctlyAssertions that prove the edge casehour+minute'2:30 PM'timeStyle shortlocale timeexplicit zonecorrect wall timeno date leakedtime only

Common pitfalls

Time Only pitfallsCommon mistakes and their fixesWrongRightslice a full date stringbreaks per localerequest hour/minute onlytime-only outputomit timeZonehost-zone timealways pass timeZonedeterministic

Frequently Asked Questions

How do I display only the time from a Date?

Create an Intl.DateTimeFormat with only time fields, such as { hour: 'numeric', minute: '2-digit', timeZone }, or use { timeStyle: 'short', timeZone }. Because you never request the date fields, the output is time-only and correctly localized.

Do I still need timeZone when formatting only the time?

Yes. Without an explicit timeZone the formatter uses the host zone, so a server prints a different time than the user's browser. Always pass the intended IANA zone even for time-only output.