Date and Time Formatting by Locale with Intl.DateTimeFormat

Intl.DateTimeFormat: Locale-Aware Dates and Times

Date formatting is one of the areas with the most variation across locales. Month/day order, separator characters, calendar systems, and time conventions all differ.

Date Order Varies Dramatically

const date = new Date('2025-03-15T14:30:00');

new Intl.DateTimeFormat('en-US').format(date);  // "3/15/2025"
new Intl.DateTimeFormat('en-GB').format(date);  // "15/03/2025"
new Intl.DateTimeFormat('ja-JP').format(date);  // "2025/3/15"
new Intl.DateTimeFormat('de-DE').format(date);  // "15.3.2025"
new Intl.DateTimeFormat('ko-KR').format(date);  // "2025. 3. 15."

Using dateStyle and timeStyle

const opts = { dateStyle: 'full', timeStyle: 'long' };

new Intl.DateTimeFormat('en-US', opts).format(date);
// "Saturday, March 15, 2025 at 2:30:00 PM GMT+9"

new Intl.DateTimeFormat('ja-JP', opts).format(date);
// "2025年3月15日土曜日 14:30:00 JST"

new Intl.DateTimeFormat('ar-SA', opts).format(date);
// Arabic text with Hijri calendar date

Available styles: full, long, medium, short.

Component-Level Control

new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
}).format(date);
// "Saturday, March 15, 2025 at 02:30 PM EST"

12-Hour vs 24-Hour Time

new Intl.DateTimeFormat('en-US', {
  hour: 'numeric', minute: 'numeric', hour12: true,
}).format(date);  // "2:30 PM"

new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric', minute: 'numeric', hour12: false,
}).format(date);  // "14:30"

Calendar Systems

Some locales use non-Gregorian calendars by default:

// Japanese Imperial era
new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  dateStyle: 'full',
}).format(date);  // "令和7年3月15日土曜日"

// Islamic (Hijri) calendar
new Intl.DateTimeFormat('ar-SA-u-ca-islamic', {
  dateStyle: 'full',
}).format(date);