Platform under construction

Dates, Time & Intl

Intermediate

Intl

Intl provides locale-aware formatting and comparison. For dates and numbers, it is the professional display layer.

const date = new Date("2026-01-01T09:30:00Z");

new Intl.DateTimeFormat("nl-NL", {
  dateStyle: "long"
}).format(date);

Dates, Time & Intl

Intl turns raw values into user-facing language.

Intl is a namespace for internationalization APIs. It includes DateTimeFormat, NumberFormat, RelativeTimeFormat, Collator, ListFormat and more.

For date lessons, Intl.DateTimeFormat is the key tool. It formats dates and times using locale, calendar, time zone and style options.

Intl helps avoid manual formatting rules. Instead of hard-coding punctuation, order and month names, you describe the display goal and let the platform format it.

DateTimeFormat

Formats dates and times for a locale.

NumberFormat

Formats numbers, percentages, units and currency-like output.

RelativeTimeFormat

Formats relative text such as in 3 days.

Collator

Compares and sorts strings in locale-aware ways.

Examples

Make the date-time concept visible in the code.

Use Intl instead of manual month names

const formatter = new Intl.DateTimeFormat("en-GB", {
  weekday: "long",
  day: "numeric",
  month: "long",
  year: "numeric"
});

console.log(formatter.format(new Date("2026-01-01T09:30:00Z")));

Manual formatting that ignores locale

const visible = `${day}/${month}/${year}`;

// This assumes one display order and one separator.

Code patterns

Reusable examples for quick reference.

Dates and time zones become much easier when every example names the concept it represents: instant, local display, UTC output, calendar date, formatted text or zoned time.

Format a long date

Use dateStyle for readable date output.

const date = new Date("2026-01-01T09:30:00Z");
const formatter = new Intl.DateTimeFormat("nl-NL", {
  dateStyle: "long"
});

console.log(formatter.format(date));

Format date and time

Use both dateStyle and timeStyle.

const formatter = new Intl.DateTimeFormat("en-GB", {
  dateStyle: "medium",
  timeStyle: "short",
  timeZone: "UTC"
});

console.log(formatter.format(new Date("2026-01-01T09:30:00Z")));

Format relative time

Use RelativeTimeFormat for readable relative labels.

const formatter = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

console.log(formatter.format(-1, "day"));
console.log(formatter.format(3, "day"));

Sort text by locale

Collator handles language-aware comparisons.

const collator = new Intl.Collator("en", { sensitivity: "base" });
const items = ["zebra", "Apple", "áudio"];

console.log(items.sort(collator.compare));

Rules that matter

Separate storage, logic and display.

Date-time bugs usually start when storage format, calculation logic and user-facing display are treated as the same thing. Keep those responsibilities separate and the code becomes much easier to trust.

Use Intl for display

Manual formatting is rarely better than platform formatting.

Choose a locale deliberately

Use a user locale or an explicit product locale.

Specify timeZone when needed

DateTimeFormat can display a Date in named zones.

Reuse formatters

Create a formatter once when formatting many values.

Use RelativeTimeFormat for relative labels

Do not hand-build grammar for every language.

Use Collator for sorting text

Locale-aware sorting is different from basic string comparison.

Production thinking

Time is a data-modeling problem before it is a formatting problem.

Why does this matter?

Users do not all read dates, numbers and words in the same format. Intl lets the interface speak their formatting language.

Accessibility

Locale-aware, complete text is easier to understand and less ambiguous for assistive technology users.

Production note

Production apps should centralize formatters and avoid hand-written formatting scattered through templates.

SEO note

Visible dates should be understandable, while machine-readable dates should stay stable in metadata.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change nl-NL to en-GB.
Add weekday: "short" instead of dateStyle.
Use Intl.NumberFormat to format 0.75 as a percentage.

Practice assignment

Do this before moving to the next topic.

Create one Intl.DateTimeFormat formatter.
Create one Intl.RelativeTimeFormat formatter.
Sort strings with Intl.Collator.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Intl.