References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript Intl.DateTimeFormat object

Object JavaScript All modern browsers Updated
Quick answer

The Intl.DateTimeFormat object formats dates and times for a locale. new Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(date) gives "June 23, 2026". It's the engine behind toLocaleDateString(), and creating a reusable formatter is more efficient when formatting many dates.

Overview

Intl.DateTimeFormat formats dates and times the way people in a given locale expect — the right order of day, month and year, localized month and weekday names, and 12- or 24-hour clocks. You create a formatter with a locale and options, then call .format(date) on it. It's part of the built-in Intl internationalization API, alongside Intl.NumberFormat.

Options control the output. The quick way is a style: { dateStyle: "long" } gives "June 23, 2026", { timeStyle: "short" } adds a time, and you can combine both. For fine control, request individual parts: { year: "numeric", month: "short", day: "numeric", weekday: "long" }. Change the locale and it adapts — "en-GB", "de-DE", "ja-JP" each format their own way.

This is the same engine that date.toLocaleDateString() uses internally. So why use Intl.DateTimeFormat directly? Performance: building a formatter has a real cost, so when you format many dates (a table, a list), create one formatter and reuse it, rather than calling toLocaleDateString() per row. For a single date, the toLocale* shortcut is fine. Never use locale formatting for storage — use toISOString() for that.

Syntax

const fmt = new Intl.DateTimeFormat("en-US", { dateStyle: "long" });
fmt.format(new Date());   // "June 23, 2026"

new Intl.DateTimeFormat("en-GB", {
  weekday: "long", year: "numeric", month: "long", day: "numeric"
}).format(date);          // "Tuesday, 23 June 2026"

Example

Live example 
<pre id="out" style="font:14px ui-monospace,monospace"></pre>
<script>
  const d = new Date(2026, 5, 23, 14, 30);

  const us = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' });
  const gb = new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'short' });

  document.getElementById('out').textContent =
    'US: ' + us.format(d) + '\n' +
    'GB: ' + gb.format(d);
</script>

Best practices

  • Create one formatter and reuse it when formatting many dates — construction is costly.
  • Use dateStyle/timeStyle for quick formatting, or individual parts for fine control.
  • For a single date, toLocaleDateString() is a convenient shortcut to the same engine.
  • Never use locale formatting to store dates — use toISOString().

Frequently asked questions

How do I format a date for a locale in JavaScript?
Use new Intl.DateTimeFormat(locale, options).format(date), e.g. with { dateStyle: "long" }.
What is the difference between Intl.DateTimeFormat and toLocaleDateString()?
They use the same engine. toLocaleDateString() is a per-call shortcut; a reusable Intl.DateTimeFormat is faster when formatting many dates.
How do I show the weekday and month name?
Use part options: { weekday: "long", month: "long", day: "numeric", year: "numeric" }.
How do I format a time too?
Add timeStyle (e.g. { dateStyle: "medium", timeStyle: "short" }) or time parts like hour and minute.
IntersectionObserver Intl.NumberFormat