📅 Date Locale Previewer

Intl.DateTimeFormat is a built-in JavaScript API that provides language-sensitive date and time formatting. It's part of the ECMAScript Internationalization API (ECMA-402) and is supported in all modern browsers and Node.js. It allows developers to format dates according to different locales without external libraries.

dateStyle / timeStyle are preset shortcuts introduced in ECMA-402 2019. They let you request "full", "long", "medium", or "short" formats without specifying individual components. Custom options (weekday, year, month, day, hour, minute, second, etc.) give you granular control over each part of the output. Note: you cannot mix dateStyle/timeStyle with individual component options — it's one or the other.

The timeZone option specifies which IANA time zone to use for formatting. The same UTC timestamp will display differently depending on the time zone. For example, 2024-01-15T20:00:00Z shows as "3:00 PM" in America/New_York but "5:00 AM" in Asia/Tokyo (next day). If no time zone is specified, the browser's local time zone is used.

formatToParts() returns an array of objects representing each part of the formatted string. Each object has a type (like "weekday", "month", "day", "year", "literal", etc.) and a value. This is extremely useful for custom rendering, such as colorizing specific parts, extracting components, or building custom date picker displays.

Modern browsers support hundreds of locales. Common ones include en-US (American English), en-GB (British English), zh-CN (Simplified Chinese), ja-JP (Japanese), de-DE (German), fr-FR (French), es-ES (Spanish), pt-BR (Brazilian Portuguese), ko-KR (Korean), and ar-SA (Arabic). Use Intl.DateTimeFormat.supportedLocalesOf() to check if a specific locale is available.

The calendar option supports various calendar systems: gregory (Gregorian, the default), chinese (Chinese lunar calendar), islamic (Islamic/Hijri), japanese (Japanese imperial), persian (Persian/Solar Hijri), buddhist (Buddhist), hebrew (Hebrew), and indian (Indian national). Note that not all calendars are supported for every locale.

For many use cases, yes. Intl.DateTimeFormat is native (no extra bundle size), fast, and supports a wide range of locales. Libraries like Moment.js or Luxon offer additional features like date manipulation, relative time, and time zone conversion. For pure formatting, Intl.DateTimeFormat is often the best choice. Combined with Intl.RelativeTimeFormat and Intl.NumberFormat, you can cover most i18n needs natively.

Use Intl.DateTimeFormat.supportedLocalesOf([locale]) to check if a locale is supported before using it. If the returned array is empty, fall back to a default locale (like en-US). Intl.DateTimeFormat itself will also automatically fall back to a similar supported locale if the requested one isn't available, but explicitly checking gives you more control.