Wie du eine Weltuhr oder einen Zeitzonenkonverter baust

Eine Weltuhr zeigt die aktuelle Uhrzeit in mehreren Städten gleichzeitig. Ein Zeitzonenkonverter nimmt ein bestimmtes Datum/Uhrzeit und zeigt, was es in anderen Zonen ist. Beides basiert auf demselben Fundament: einem UTC-Timestamp und der Intl.DateTimeFormat-API.

Der Kern: ein Moment, viele Darstellungen

const now = new Date(); // UTC-Instant

const cities = [
  { name: "New York", zone: "America/New_York" },
  { name: "London", zone: "Europe/London" },
  { name: "Singapur", zone: "Asia/Singapore" },
  { name: "Tokio", zone: "Asia/Tokyo" },
];

cities.forEach(({ name, zone }) => {
  const time = new Intl.DateTimeFormat("en-US", {
    timeZone: zone,
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  }).format(now);
  console.log(`${name}: ${time}`);
});

// New York:  15:00
// London:    20:00
// Singapur: 03:00  (nächster Tag)
// Tokio:     04:00  (nächster Tag)

Die Sommerzeit wird automatisch berücksichtigt – Intl.DateTimeFormat wendet die IANA-Zonenregeln für jedes Datum an.

Eine Live-Uhr hinzufügen

Aktualisiere jede Sekunde mit setInterval. Aktualisiere immer von new Date() aus, anstatt einen gespeicherten Wert zu inkrementieren – das verhindert Drift und bleibt über DST-Übergänge hinweg korrekt.

function updateClocks() {
  const now = new Date();
  cities.forEach(({ name, zone, elementId }) => {
    document.getElementById(elementId).textContent = new Intl.DateTimeFormat(
      "en-US",
      {
        timeZone: zone,
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
      },
    ).format(now);
  });
}

setInterval(updateClocks, 1000);
updateClocks(); // sofort beim Laden ausführen

Einen Zeitzonenkonverter bauen

Ein Konverter nimmt eine vom Benutzer angegebene Uhrzeit und eine Quellzone, konvertiert zu UTC und zeigt das Ergebnis in Zielzonen an.

import { fromZonedTime, toZonedTime, format } from "date-fns-tz";

function convert(localDateTimeString, sourceZone, targetZones) {
  // 1. Lokalzeit in Quellzone → UTC parsen
  const utcDate = fromZonedTime(localDateTimeString, sourceZone);

  // 2. UTC in jeder Zielzone anzeigen
  return targetZones.map((zone) => ({
    zone,
    display: format(toZonedTime(utcDate, zone), "yyyy-MM-dd HH:mm zzz", {
      timeZone: zone,
    }),
  }));
}

convert("2026-06-20 15:00", "America/New_York", [
  "Europe/London",
  "Asia/Tokyo",
  "Australia/Sydney",
]);
// [
//   { zone: 'Europe/London',    display: '2026-06-20 20:00 BST'  },
//   { zone: 'Asia/Tokyo',       display: '2026-06-21 04:00 JST'  },
//   { zone: 'Australia/Sydney', display: '2026-06-21 05:00 AEST' },
// ]

Die Liste der IANA-Zonen beziehen

Die vollständige IANA-Zonenliste ist über Intl.supportedValuesOf('timeZone') in modernen Browsern und Node verfügbar:

const allZones = Intl.supportedValuesOf("timeZone");
// → ['Africa/Abidjan', 'Africa/Accra', ... 'Pacific/Wake']

Für eine Weltuhr-UI willst du keine 600 Zonen in einem Dropdown. Verwende eine kuratierte Liste der wichtigsten Städte oder gruppiere nach Region und zeige eine repräsentative Zone pro Region.

”Nächster Tag”-Anzeige behandeln

Wenn ein UTC-Timestamp dem 20. Juni entspricht, aber in Tokio als 21. Juni angezeigt wird, muss deine UI das sichtbar machen. Zeige das Datum neben der Uhrzeit für jede Zone, die Mitternacht überschreitet:

new Intl.DateTimeFormat("en-US", {
  timeZone: "Asia/Tokyo",
  weekday: "short",
  month: "short",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  hour12: false,
}).format(now);
// → "Sun, Jun 21, 04:00"

Testen

Die Fälle, die am ehesten Bugs aufdecken:

• Ein Zeitpunkt während der DST-Umstellungsstunde (1–2 Uhr am Umstellungstag in der Zielzone)
• Ein Zeitpunkt, der in verschiedenen Zonen auf unterschiedliche Kalenderdaten fällt (z. B. 23 Uhr UTC am 31. Dezember)
• Zonen mit halb- oder viertelstündigen Offsets: Asia/Kolkata (UTC+5:30), Asia/Kathmandu (UTC+5:45)
• Zonen ohne DST: Asia/Tokyo, Asia/Singapore – prüfen, ob diese stabil bleiben, wenn andere Zonen umstellen