JavaScript Date toLocaleString() Method

What You’ll Learn

toLocaleString() formats both the date and time of a Date for human readers using locale rules. Pass a language tag and options for presets, 12/24-hour clocks, and IANA time zones—ideal for activity feeds, order history, and multilingual apps.

Introduction

When users see “last updated” timestamps or meeting times, they expect familiar date-and-time text—not raw ISO strings. toLocaleString() uses the Intl engine to produce readable labels that respect language and regional conventions.

For date-only labels, use toLocaleDateString(). For storage and APIs, keep using toISOString() or toJSON(), then format with toLocaleString() at display time.

Understanding the toLocaleString() Method

Date.prototype.toLocaleString([locales[, options]]) returns a localized string containing both calendar date and clock time:

• Default — date.toLocaleString() uses the runtime locale and short date/time styles.
• Locales — BCP 47 tags like 'en-US' or 'de-DE', or an array of fallbacks.
• Presets — dateStyle and timeStyle ('full', 'long', 'medium', 'short').
• Granular fields — weekday, month, day, hour, minute, second, plus hour12.
• timeZone — format the instant as it appears in a specific IANA zone.

📝 Syntax

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

Parameters

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

Return value

• A localized date-and-time string.
• "Invalid Date" if the Date is invalid.

Examples Gallery

Open DevTools Console (F12) or use Try-it links. Examples use fixed instants so you can compare output reliably.

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

console.log(label); // e.g. "3/15/2026, 2:30:00 PM" in en-US

3/15/2026, 2:30:00 PM  (en-US example)

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

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

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

3/15/2026, 2:30:00 PM
15.3.2026, 14:30:00

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

const label = meeting.toLocaleString('en-US', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'UTC'
});

console.log(label);
// "Saturday, June 20, 2026 at 3:00 PM"

Saturday, June 20, 2026 at 3:00 PM

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

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

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

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

2:30 PM
14:30

const webinar = new Date(Date.UTC(2026, 2, 15, 18, 0, 0));

const zones = ['UTC', 'America/New_York', 'Asia/Tokyo'];

for (const zone of zones) {
  console.log(
    zone + ':',
    webinar.toLocaleString('en-US', {
      dateStyle: 'medium',
      timeStyle: 'short',
      timeZone: zone
    })
  );
}

UTC: Mar 15, 2026, 6:00 PM
America/New_York: Mar 15, 2026, 2:00 PM
Asia/Tokyo: Mar 16, 2026, 3:00 AM

🚀 Common Use Cases

• Activity feeds — “Posted Mar 15, 2026, 2:30 PM” in the user’s locale.
• Order history — purchase timestamps with dateStyle: 'medium'.
• Meeting invites — show start time in each attendee’s timeZone.
• Admin dashboards — switch locale when staff change language preference.
• Chat messages — compact timeStyle: 'short' beside full date on hover.
• Audit logs (UI) — human-readable view while JSON logs keep ISO underneath.

📝 Notes

• Includes both date and time—unlike toLocaleDateString().
• 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 toLocaleString() at display time.
• Invalid dates return "Invalid Date".
• Avoid mixing dateStyle/timeStyle with conflicting granular field options in one call.

💡 Best Practices