No Login Data Private Local Save

Date/Time Format Sandbox - Online Intl.DateTimeFormat Tester

19
0
0
0
Date & Time Input
Locale
en-US en-GB de-DE fr-FR es-ES ja-JP zh-CN ko-KR ar-SA pt-BR ru-RU it-IT
Time Zone
Quick Style Presets

Date Components (overridden by dateStyle)
Time Components (overridden by timeStyle)
Display Options
Formatted Output
1/15/24
JavaScript Code
Resolved Options (via resolvedOptions())
Loading...
Format Parts Breakdown (formatToParts)

Frequently Asked Questions

Intl.DateTimeFormat is a built-in JavaScript API that formats dates and times according to locale-specific conventions. It's part of the ECMAScript Internationalization API (Intl) and is supported in all modern browsers. It handles locale-aware formatting like month names, weekday names, 12/24-hour time, calendar systems, and numbering systems automatically—no external libraries needed.

dateStyle and timeStyle are high-level presets introduced in ES2020. They let you specify a pre-defined length ("full", "long", "medium", "short") and the browser picks the appropriate combination of components per locale. When you use dateStyle, individual options like weekday, year, month, day are ignored. Similarly, timeStyle overrides hour, minute, second. For full control over every field, leave both dateStyle and timeStyle unset and configure each component individually.

Intl.DateTimeFormat is supported in all major browsers: Chrome 24+, Firefox 29+, Safari 10+, Edge 12+, and Opera 15+. The dateStyle/timeStyle options require Chrome 76+, Firefox 79+, Safari 14+, or Edge 79+. The formatToParts() method is available in Chrome 57+, Firefox 51+, Safari 11+, and Edge 18+. For legacy browsers, consider using a polyfill like @formatjs/intl-datetimeformat.

Pass the timeZone option with an IANA timezone string (e.g., 'America/New_York', 'Asia/Tokyo', 'Europe/London'). Use Intl.supportedValuesOf('timeZone') (Chrome 99+, Firefox 119+) to get a list of supported timezones. For older browsers, you can use a library like luxon or date-fns-tz. The timezone conversion happens automatically—the input Date object remains in UTC milliseconds.

The hour12 option controls whether the time is displayed in 12-hour format (with AM/PM) or 24-hour format. Set it to true for 12-hour time, false for 24-hour. When omitted (or undefined), the locale's default convention is used—e.g., en-US defaults to 12-hour, while de-DE defaults to 24-hour. Note that hour12: false with en-US locale will display time like "14:30" instead of "2:30 PM".

formatToParts() returns an array of objects, each with a type and value. Types include: weekday, era, year, month, day, dayPeriod, hour, minute, second, fractionalSecond, timeZoneName, and literal (for separators like "/", "-", spaces). This is incredibly useful for custom rendering—e.g., you can style each part differently in a UI or extract specific components programmatically.

Yes! Use the calendar option to specify calendars like 'buddhist', 'chinese', 'hebrew', 'islamic', 'japanese', 'persian', etc. Combine with an appropriate locale for best results—e.g., new Intl.DateTimeFormat('th-TH-u-ca-buddhist', { calendar: 'buddhist' }). The -u-ca- extension in the locale tag can also specify the calendar. Support varies by browser and locale combination.

toLocaleDateString() is a convenience method on Date objects that internally uses Intl.DateTimeFormat. However, Intl.DateTimeFormat offers more control: you can create a reusable formatter instance, access resolvedOptions() to inspect what the browser resolved, use formatToParts() for granular access, and pass the full range of options. For one-off formatting, toLocaleDateString() is fine; for production applications with repeated formatting, Intl.DateTimeFormat instances are more performant and flexible.

Each browser implements Intl.DateTimeFormat using its own ICU (International Components for Unicode) data. While the ECMAScript specification defines the API, minor differences can occur in locale data versions, especially for less common locales or calendar systems. For mission-critical consistency across all browsers, consider using a library like @formatjs/intl-datetimeformat which provides a consistent polyfill with the latest CLDR data, or use server-side formatting.

BCP 47 tags include language subtags (ISO 639), script subtags (ISO 15924), and region subtags (ISO 3166). Examples: en-US (English, United States), zh-Hant-TW (Chinese, Traditional script, Taiwan), pt-BR (Portuguese, Brazil), ar-EG (Arabic, Egypt). You can also include Unicode extensions like -u-ca-buddhist for calendar or -u-nu-arab for numbering system. Use Intl.supportedValuesOf('locale') in modern browsers to get available locales, or check Intl.DateTimeFormat.supportedLocalesOf(['your-tag']) to test if a specific locale is supported.
Copied!
🔧 Related Tools