Zeiten in der Zeitzone des Benutzers anzeigen

Dein Server speichert Zeiten in UTC. Deine Benutzer sind überall. Die Aufgabe deines Frontends ist, UTC in die Ortszeit jedes Benutzers zu konvertieren und sie lesbar zu formatieren. Das ist unkomplizierter als früher – aber es gibt ein paar Wege, es falsch zu machen.

Schritt 1: Die Zeitzone des Benutzers ermitteln

const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
// → "America/New_York" oder "Europe/London" etc.

Das gibt einen IANA-Zonennamen aus den Locale-Einstellungen des Browsers zurück. Auf modernen Browsern zuverlässig. Speichere ihn im Benutzerprofil, damit auch serverseitig gerenderte Seiten ihn verwenden können – verlasse dich für nichts Indexiertes oder Gecachtes ausschließlich auf clientseitige Konvertierung.

Lass Benutzer es überschreiben. Manche reisen; manche Systeme melden die falsche Zone.

Schritt 2: Im Browser konvertieren und formatieren

Die Intl.DateTimeFormat-API ist das richtige Werkzeug dafür. Sie behandelt DST automatisch und berücksichtigt Locale-Formatierungskonventionen (12h vs. 24h, Datumsreihenfolge usw.):

const utcTimestamp = "2026-06-20T19:00:00Z"; // aus deiner API
const date = new Date(utcTimestamp);

const formatter = new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  dateStyle: "full",
  timeStyle: "short",
});

formatter.format(date);
// → "Saturday, June 20, 2026 at 3:00 PM"

Für einen Benutzer in Tokio:

new Intl.DateTimeFormat("ja-JP", {
  timeZone: "Asia/Tokyo",
  dateStyle: "full",
  timeStyle: "short",
}).format(date);
// → "2026年6月21日日曜日 4:00"  (nächster Tag in Tokio)

Schritt 3: Den Zeitzonennamen in der Anzeige einschließen

„15:00 Uhr” ohne Zonenangabe zu zeigen lässt Benutzer unsicher sein, ob die Konvertierung stattgefunden hat. Füge die Zonenabkürzung oder Stadt hinzu:

new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  timeStyle: "long", // enthält Zeitzonenabkürzung
}).format(date);
// → "3:00:00 PM EDT"

Für Scheduling-Tools solltest du sowohl die Ortszeit des Benutzers als auch UTC zeigen:

15:00 Uhr EDT (19:00 UTC)

So können Benutzer die Konvertierung überprüfen, wenn sie unsicher sind.

Typische Fallstricke

Stunden manuell subtrahieren:

// Schlecht: hardcodet UTC-4, bricht bei DST-Wechsel
const localTime = new Date(utcTimestamp.getTime() - 4 * 60 * 60 * 1000);

Tu das nicht. Verwende Intl.DateTimeFormat mit einem IANA-Zonennamen – er wendet automatisch den korrekten Offset für jedes spezifische Datum an.

toLocaleString() ohne timeZone-Option:

// Unzuverlässig: verwendet System-Locale, das je nach Server/Browser variiert
date.toLocaleString();

Übergebe timeZone immer explizit.

„Heute” und „Morgen” basierend auf UTC-Datum:

2026-06-20T23:00:00Z ist der 20. Juni in New York und der 21. Juni in Tokio. Wenn du Events als „heute” oder „morgen” auf Basis des UTC-Datums beschriftest, sehen Benutzer in manchen Zonen die falsche Bezeichnung.

function isToday(utcTimestamp, userTimeZone) {
  const now = new Date();
  const formatter = new Intl.DateTimeFormat("en-CA", {
    // en-CA gibt YYYY-MM-DD
    timeZone: userTimeZone,
    dateStyle: "short",
  });
  return formatter.format(new Date(utcTimestamp)) === formatter.format(now);
}

Nach Anzeigezeit sortieren: Sortiere Events immer nach ihrem UTC-Timestamp. Das Sortieren nach lokalen Zeitstrings bricht bei DST-Übergängen und zonenübergreifenden Vergleichen.

Serverseitiges Rendering

Wenn du Zeiten auf dem Server renderst, brauchst du die IANA-Zone des Benutzers zum Render-Zeitpunkt. Speichere sie in der Session oder im Benutzerprofil:

// Node.js — Intl ist in modernen Node-Versionen verfügbar
new Intl.DateTimeFormat("en-US", {
  timeZone: user.timezone, // 'America/New_York' aus dem Profil
  dateStyle: "full",
  timeStyle: "short",
}).format(new Date(utcTimestamp));

Achte auf Hydration-Mismatches: Wenn der Server eine Zeit in UTC rendert und der Client sie in Ortszeit neu rendert, bekommst du einen kurzen Flicker mit falschem Inhalt. Rendere Zeiten entweder nur clientseitig oder stelle sicher, dass der Server die korrekte Zone zum Render-Zeitpunkt hat.