intl
Intl.DateTimeFormat
The modern locale-aware date/time formatter, preferred over toLocaleString for repeated formatting because you can construct the formatter once and reuse it. Also offers formatToParts, formatRange, and formatRangeToParts for finer control and internationalized date ranges.
new Intl.DateTimeFormat(locales, options).format(date) Parameters
| Parameter | Purpose |
|---|---|
| locales | BCP 47 tag(s), e.g. 'en-US', ['fr','en'] |
| dateStyle / timeStyle | 'full' | 'long' | 'medium' | 'short' |
| timeZone | IANA zone; pass 'UTC' for reproducible output |
| .formatToParts(d) | array of {type,value} for custom assembly |
| .formatRange(a,b) | localized 'Jul 19 - 21, 2026' style ranges |
| .resolvedOptions() | inspect what the runtime actually picked |
Examples
const f = new Intl.DateTimeFormat('en-US', {dateStyle:'medium', timeZone:'UTC'});
console.log(f.format(new Date('2026-07-19'))); // 'Jul 19, 2026' reusable formatter
const f = new Intl.DateTimeFormat('en-GB', {year:'numeric', month:'long', day:'2-digit', timeZone:'UTC'});
console.log(f.format(new Date('2026-07-19'))); // '19 July 2026' custom fields
const f = new Intl.DateTimeFormat('en', {dateStyle:'medium'});
console.log(f.formatRange(new Date('2026-07-19'), new Date('2026-07-21'))); // 'Jul 19 - 21, 2026' range formatting
const parts = new Intl.DateTimeFormat('en-US', {year:'numeric', month:'2-digit', day:'2-digit', timeZone:'UTC'}).formatToParts(new Date('2026-07-19'));
console.log(parts.map(p=>p.value).join('')); // '07/19/2026' assemble from parts
Gotcha
Constructing a formatter is expensive - cache it at module scope, do not create one per row inside a loop. Always pass `timeZone` if you need output that is stable across machines.
Related
Date.prototype.toLocaleString
Returns date and time together formatted for a given locale. Accepts the union of date and time options from Intl.DateTimeFormat.
Date.prototype.toLocaleDateString
Returns the date portion formatted for a given locale and options, without the time. For repeated formatting, cache an Intl.DateTimeFormat instead - it is significantly faster.
Intl.RelativeTimeFormat
Formats relative times such as '3 days ago' or 'in 2 hours' in a locale-aware way, replacing hand-rolled 'time ago' helpers. Combine it with a small diff-and-pick-unit function to render human-friendly relative timestamps.