intermediate
Date/time formatting
Format dates, times, time zones, calendars, and relative time with locale-aware APIs instead of hand-built string templates.
Locale-aware date/time formatting respects calendar, order, separators, 12/24-hour clocks, and time zones. Use `Intl.DateTimeFormat` or battle-tested libraries—not hand-built `DD/MM/YYYY` templates that break outside one locale.
const formatter = new Intl.DateTimeFormat('ru-RU', {
dateStyle: 'medium',
timeStyle: 'short',
timeZone: 'Europe/Moscow',
});
formatter.format(new Date('2026-06-15T14:30:00Z'));
| Pitfall | Safer approach | |---------|----------------| | Storing display strings | Store UTC instant; format at UI edge | | Relative time drift | Update "5 min ago" on interval or use library | | DST edges | Always carry IANA time zone id | | Server vs user TZ | Label whose zone you show |
Relative times ("yesterday", "in 2 hours") need locale bundles and refresh rules—do not concatenate English fragments.
On interviews: UTC storage vs local display; formatting in SSR for SEO pages; `Temporal` vs `Date`; meeting scheduler across zones.
Common pitfalls: `toLocaleString` without explicit locale; mixing US format in EU UI; forgetting time zone on event emails; parsing locale strings with `new Date(string)`.
The trade-off is bundle size of locale data versus correct global UX.
Checklist:
- Persist instants in UTC with zone metadata when needed.
- Pass explicit locale to formatters.
- Test DST transition dates.
- Clarify time zone in user-facing labels.