JavaScript Date toLocaleTimeString() Method

What You’ll Learn

toLocaleTimeString() formats only the clock time of a Date for human readers using locale rules. Use it in chat timestamps, countdown labels, and schedules when the date is already shown elsewhere.

Introduction

Apps often show the calendar date in one place and the clock time in another—a message list might read “Mar 15” with “2:30 PM” beside it. toLocaleTimeString() handles that second part with locale-aware formatting through the Intl engine.

For date and time together, use toLocaleString(). For date only, use toLocaleDateString(). For a quick fixed-pattern local time string, compare with toTimeString() (covered when you reach toString() family formatters).

Understanding the toLocaleTimeString() Method

Date.prototype.toLocaleTimeString([locales[, options]]) returns a localized string containing only the time portion of a Date instant:

• Default — date.toLocaleTimeString() uses the runtime locale and a short time style.
• Locales — BCP 47 tags like 'en-US' or 'en-GB'.
• timeStyle — presets 'full', 'long', 'medium', 'short'.
• Granular fields — hour, minute, second, plus hour12.
• timeZone — display the instant as clock time in a specific IANA zone.

📝 Syntax

dateObj.toLocaleTimeString([locales[, options]])

Parameters

• locales (optional) — string or array of BCP 47 locale tags.
• options (optional) — Intl time fields, timeStyle, or timeZone.

Return value

• A localized time string (no date component).
• "Invalid Date" if the Date is invalid.

Examples Gallery

Open DevTools Console (F12) or use Try-it links. Fixed UTC instants keep output predictable across examples.

const date = new Date(2026, 2, 15, 14, 30, 45);
const timeLabel = date.toLocaleTimeString();

console.log(timeLabel); // e.g. "2:30:45 PM" in en-US

2:30:45 PM  (en-US example)

const instant = new Date(Date.UTC(2026, 2, 15, 14, 30, 0));

console.log(instant.toLocaleTimeString('en-US', { timeZone: 'UTC' }));
// "2:30:00 PM"

console.log(instant.toLocaleTimeString('de-DE', { timeZone: 'UTC' }));
// "14:30:00"

2:30:00 PM
14:30:00

const alarm = new Date(Date.UTC(2026, 2, 15, 7, 5, 30));

console.log(alarm.toLocaleTimeString('en-US', {
  timeStyle: 'short',
  timeZone: 'UTC'
}));
// "7:05 AM"

console.log(alarm.toLocaleTimeString('en-US', {
  timeStyle: 'medium',
  timeZone: 'UTC'
}));
// "7:05:30 AM"

7:05 AM
7:05:30 AM

const date = new Date(Date.UTC(2026, 2, 15, 14, 30, 0));

const twelve = date.toLocaleTimeString('en-US', {
  timeZone: 'UTC',
  hour: 'numeric',
  minute: '2-digit',
  hour12: true
});

const twentyFour = date.toLocaleTimeString('en-US', {
  timeZone: 'UTC',
  hour: '2-digit',
  minute: '2-digit',
  hour12: false
});

console.log(twelve);      // "2:30 PM"
console.log(twentyFour);  // "14:30"

2:30 PM
14:30

const now = new Date(Date.UTC(2026, 5, 20, 15, 0, 0));

const utcTime = now.toLocaleTimeString('en-GB', {
  timeZone: 'UTC',
  hour12: false
});

const londonTime = now.toLocaleTimeString('en-GB', {
  timeZone: 'Europe/London',
  hour12: false
});

console.log('UTC:', utcTime);       // "15:00:00"
console.log('London:', londonTime); // "16:00:00" (BST in June)

UTC: 15:00:00
London: 16:00:00

🚀 Common Use Cases

• Chat timestamps — compact timeStyle: 'short' beside each message.
• Office hours — show support desk times in the user’s timeZone.
• Media players — current playback position as locale time labels.
• Calendar grids — time column when the date header is separate.
• Countdown follow-ups — “Reminder at 3:00 PM” in the visitor’s locale.
• Flight dashboards — departure clock in origin airport zone.

📝 Notes

• Time only—no calendar date in the output.
• Read-only: does not mutate the Date.
• Output varies by locale, options, and time zone—do not parse it back to dates in production.
• Store ISO or epoch; format with toLocaleTimeString() at display time.
• Invalid dates return "Invalid Date".
• Avoid mixing timeStyle with conflicting granular field options in one call.

💡 Best Practices