Intl.DateTimeFormat in JavaScript: Locale-Aware Dates

Intl.DateTimeFormat is the built-in tool for formatting dates in a way that suits the reader’s language and region. You create a formatter once and call format().

script.js

const date = new Date("2026-03-15T10:30:00Z");

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full",
  timeStyle: "short",
  timeZone: "UTC"
});

console.log(formatter.format(date)); // → Sunday, March 15, 2026 at 10:30 AM

dateStyle and timeStyle

Four ready-made sizes: full, long, medium and short.

script.js

const date = new Date("2026-03-15T10:30:00Z");

for (const style of ["full", "long", "medium", "short"]) {
  const f = new Intl.DateTimeFormat("en-GB", { dateStyle: style, timeZone: "UTC" });
  console.log(style, "→", f.format(date));
}

Choosing parts yourself

script.js

const date = new Date("2026-03-15T10:30:00Z");

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
console.log(f.format(date)); // → Mar 15

Different languages

script.js

const date = new Date("2026-03-15T10:30:00Z");

for (const locale of ["en-US", "fr-FR", "ja-JP", "hi-IN"]) {
  console.log(locale, new Intl.DateTimeFormat(locale, { dateStyle: "long", timeZone: "UTC" }).format(date));
}

The browser provides the names of months and the right order for each language, so you do not translate anything yourself.

Time zones

Pass timeZone to show the same moment in another place.

script.js

const meeting = new Date("2026-03-15T15:00:00Z");

const inLondon = new Intl.DateTimeFormat("en-GB", { timeStyle: "short", timeZone: "Europe/London" });
const inTokyo = new Intl.DateTimeFormat("en-GB", { timeStyle: "short", timeZone: "Asia/Tokyo" });

console.log(inLondon.format(meeting)); // → 15:00
console.log(inTokyo.format(meeting));  // → 00:00

Time zones use IANA names such as "America/New_York". Leave timeZone out to use the visitor’s own.

Reuse formatters

Creating a formatter is more costly than calling format(). If you format many dates, create one formatter and reuse it.

The visitor’s own settings

script.js

1
2

const resolved = new Intl.DateTimeFormat().resolvedOptions();
console.log(typeof resolved.timeZone); // → string

Intl also formats numbers (NumberFormat), lists (ListFormat), plurals (PluralRules) and relative times, all with the same locale idea.