patternjavascriptTip
Intl.DateTimeFormat for locale-aware date formatting without libraries
Viewed 0 times
dateStyle/timeStyle: ES2020; core: ES2015
Intl.DateTimeFormatlocale datedate formattingCLDRdateStyle
browsernode
Problem
Formatting dates for different locales requires either a third-party library or manual string concatenation that breaks for non-US formats.
Solution
Intl.DateTimeFormat is built in and handles locale-specific ordering, month names, calendar systems, and numbering systems.
new Intl.DateTimeFormat('en-US').format(d); // '3/15/2024'
new Intl.DateTimeFormat('de-DE').format(d); // '15.3.2024'
new Intl.DateTimeFormat('ja-JP').format(d); // '2024/3/15'
new Intl.DateTimeFormat('en-US').format(d); // '3/15/2024'
new Intl.DateTimeFormat('de-DE').format(d); // '15.3.2024'
new Intl.DateTimeFormat('ja-JP').format(d); // '2024/3/15'
Why
Intl.DateTimeFormat is part of the ECMAScript Internationalisation API, maintained by the CLDR project, and handles hundreds of locale-specific rules that are impractical to replicate manually.
Gotchas
- Cache the formatter object when formatting many dates — construction is more expensive than format()
- dateStyle and timeStyle (ES2020) are more concise than specifying individual fields
- The 'hour12' option defaults differ per locale — be explicit when consistency matters
- formatToParts() returns an array of labelled parts for custom assembly
Code Snippets
Cached Intl.DateTimeFormat usage
// Cache for performance
const fmt = new Intl.DateTimeFormat('fr-FR', {
dateStyle: 'full',
timeZone: 'Europe/Paris',
});
dates.map(d => fmt.format(d));
// Extract labelled parts
const parts = fmt.formatToParts(new Date());
// [{ type: 'weekday', value: 'vendredi' }, ...]Revisions (0)
No revisions yet.