How to format localized dates in JavaScript

A timestamp can represent one instant while readers expect different date order, names, and clock conventions. JavaScript can produce those regional forms without maintaining hand-built month names or punctuation rules.

The Intl.DateTimeFormat object applies locale data to a Date value. Supplying an explicit timeZone also prevents the host computer's default zone from shifting the displayed day or hour.

The dateStyle and timeStyle presets cover common interface labels while keeping the formatter reusable. A small formatting function can therefore accept each display target and return text for the same source instant.

1. Create /localized-date.js containing the source instant plus regional settings.

   localized-date.js

   const eventDate = new Date("2026-06-28T09:30:00Z");
    
   const displayTargets = [
     { locale: "en-US", timeZone: "America/New_York" },
     { locale: "en-GB", timeZone: "Europe/London" },
     { locale: "de-DE", timeZone: "Europe/Berlin" },
   ];

   The trailing Z identifies the source instant as UTC, while each IANA time zone controls where that instant appears on the local clock.
   Tool: Epoch Time Converter

2. Add the formatting function after the displayTargets array.

   function formatEventDate(date, { locale, timeZone }) {
     const formatter = new Intl.DateTimeFormat(locale, {
       dateStyle: "full",
       timeStyle: "short",
       timeZone,
     });
    
     return `${locale} (${timeZone}): ${formatter.format(date)}`;
   }

3. Append the rendering loop after the formatEventDate() function.

   for (const target of displayTargets) {
     console.log(formatEventDate(eventDate, target));
   }

4. Compare /localized-date.js with the completed program.

   localized-date.js

   const eventDate = new Date("2026-06-28T09:30:00Z");
    
   const displayTargets = [
     { locale: "en-US", timeZone: "America/New_York" },
     { locale: "en-GB", timeZone: "Europe/London" },
     { locale: "de-DE", timeZone: "Europe/Berlin" },
   ];
    
   function formatEventDate(date, { locale, timeZone }) {
     const formatter = new Intl.DateTimeFormat(locale, {
       dateStyle: "full",
       timeStyle: "short",
       timeZone,
     });
    
     return `${locale} (${timeZone}): ${formatter.format(date)}`;
   }
    
   for (const target of displayTargets) {
     console.log(formatEventDate(eventDate, target));
   }

5. Run /localized-date.js with Node.js to confirm the locale and time-zone changes.

   $ node localized-date.js
   en-US (America/New_York): Sunday, June 28, 2026 at 5:30 AM
   en-GB (Europe/London): Sunday, 28 June 2026 at 10:30
   de-DE (Europe/Berlin): Sonntag, 28. Juni 2026 um 11:30