How to format localized dates in JavaScript

Localized date output helps a JavaScript interface show the same timestamp in the order, words, and clock style a reader expects. Intl.DateTimeFormat uses the runtime's internationalization data, so application code can request a locale and formatting options instead of assembling date strings by hand.

A Date value represents one point in time, while the formatter decides how that point is displayed. Passing an explicit timeZone keeps the output deterministic and prevents the host machine's default time zone from changing the displayed day or hour.

One formatter per locale and option set keeps display logic reusable, and the UI can call format() wherever it needs text. dateStyle and timeStyle cover common layouts; use individual date-time component options only when the shortcut styles cannot describe the target output.

1. Create a JavaScript file for the formatter sample.

   localized-date.js

   const eventDate = new Date("2026-06-28T09:30:00Z");
    
   const formats = [
     ["en-US", "UTC"],
     ["en-GB", "UTC"],
     ["de-DE", "UTC"],
   ];
    
   for (const [locale, timeZone] of formats) {
     const formatter = new Intl.DateTimeFormat(locale, {
       dateStyle: "full",
       timeStyle: "short",
       timeZone,
     });
    
     console.log(`${locale} (${timeZone}): ${formatter.format(eventDate)}`);
   }

2. Set the source timestamp from an ISO string.

   const eventDate = new Date("2026-06-28T09:30:00Z");

   The trailing Z marks the value as UTC. Parse and validate user-entered date strings before formatting them for display.

3. Choose the locale and time zone combinations to render.

   const formats = [
     ["en-US", "UTC"],
     ["en-GB", "UTC"],
     ["de-DE", "UTC"],
   ];

   Use application locale tags such as en-US, en-GB, or de-DE. Use an IANA time zone such as Europe/Berlin when the date must be shown for a specific region instead of UTC.

4. Build the formatter with the selected locale and options.

   const formatter = new Intl.DateTimeFormat(locale, {
     dateStyle: "full",
     timeStyle: "short",
     timeZone,
   });

   dateStyle and timeStyle can be used together, but they cannot be mixed with individual component options such as weekday, month, hour, or timeZoneName in the same options object.

5. Format the date with format().

   console.log(`${locale} (${timeZone}): ${formatter.format(eventDate)}`);

6. Run the file with Node.js to verify the localized output.

   $ node localized-date.js
   en-US (UTC): Sunday, June 28, 2026 at 9:30 AM
   en-GB (UTC): Sunday, 28 June 2026 at 09:30
   de-DE (UTC): Sonntag, 28. Juni 2026 um 09:30

7. Remove the temporary sample file when finished.

   $ rm localized-date.js