Platform under construction

Dates, Time & Intl

Intermediate

Time Zones

Time zones decide how an instant is shown on a clock. Date stores the instant; formatting chooses the zone.

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

new Intl.DateTimeFormat("en-GB", {
  timeZone: "Europe/Amsterdam",
  timeStyle: "short"
}).format(instant);

Dates, Time & Intl

A time without time-zone context is often incomplete.

A Date object stores one instant. It does not store a named time zone such as Europe/Amsterdam or America/New_York.

When you call local Date methods, JavaScript uses the device local time zone. When you call UTC methods, JavaScript uses UTC. For named zones, use Intl.DateTimeFormat with the timeZone option.

Time-zone bugs often happen when code stores a local wall-clock time as if it were a universal instant, or when display code forgets to specify the intended zone.

Instant

One exact moment in history.

UTC

A stable reference time zone often used for storage.

Local time

The device or environment time zone.

IANA zone

Named zone such as Europe/Amsterdam used by Intl formatting.

Examples

Make the date-time concept visible in the code.

Specify the display time zone

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

const visible = new Intl.DateTimeFormat("en-GB", {
  dateStyle: "medium",
  timeStyle: "short",
  timeZone: "Europe/Amsterdam"
}).format(date);

Relying on whatever the device uses

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

console.log(date.toLocaleString());

// Output changes by device settings.

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 in UTC

Useful for logs and stable technical output.

const date = new Date("2026-01-01T09:30:00Z");
const formatter = new Intl.DateTimeFormat("en-GB", {
  dateStyle: "medium",
  timeStyle: "short",
  timeZone: "UTC"
});

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

Format in a named zone

Use an IANA time zone for intended display.

const date = new Date("2026-01-01T09:30:00Z");
const formatter = new Intl.DateTimeFormat("en-GB", {
  timeStyle: "short",
  timeZone: "Europe/Amsterdam"
});

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

Compare same instant in two zones

The instant stays the same while the clock text changes.

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

for (const timeZone of ["UTC", "Europe/Amsterdam"]) {
  const text = new Intl.DateTimeFormat("en-GB", { timeZone, timeStyle: "short" }).format(date);
  console.log(`${timeZone}: ${text}`);
}

Store one stable value

Store the instant, then format for the target zone.

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

console.log(instant.toISOString());

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.

Store instants clearly

Use ISO UTC strings or timestamps when representing one exact moment.

Format with an explicit zone

Use Intl timeZone when the display zone matters.

Do not parse display text

Localized time-zone output is for users, not storage.

Remember Date has no named zone

A Date object does not remember Europe/Amsterdam.

Watch daylight saving time

Calendar-day logic can shift around DST transitions.

Separate wall-clock time from instant time

A calendar appointment and an exact instant are not the same concept.

Production thinking

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

Why does this matter?

A time-zone bug can show the correct instant at the wrong local time, which is still wrong for the user.

Accessibility

When time zones matter, visible text should include enough context so users know which clock is being used.

Production note

Production systems should define whether a value is an instant, a local date, a wall-clock time or a zoned date-time.

SEO note

Event times should include machine-readable time-zone context where appropriate.

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.

Add Asia/Tokyo to the zones array.
Remove the timeZone option and compare the output.
Change the date to a summer month and compare offsets.

Practice assignment

Do this before moving to the next topic.

Format a Date in UTC.
Format the same Date in Europe/Amsterdam.
Explain the difference between an instant and a displayed clock time.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Time Zones.