Zeitzonen in JavaScript: Wie man nicht den Verstand verliert

Einleitung: Warum Zeit eine Qual ist

Jeder, der jemals Code in JavaScript geschrieben hat, kennt diesen Schmerz. Sie zeigen dem Benutzer die Uhrzeit 12:00 an, und er schreibt: "Bei mir ist es 14:00, alles ist kaputt." Oder Sie speichern ein Datum in der Datenbank, und beim Laden verschiebt es sich um eine Stunde zurück. Kommt Ihnen das bekannt vor?

Die Arbeit mit Zeitzonen in JavaScript ist ein Thema, das viele Entwickler auf "später" verschieben. Zu Unrecht. Denn wenn man sich nicht sofort damit auseinandersetzt, muss man später die Hälfte der Anwendung umschreiben.

In diesem Artikel erkläre ich, wie man richtig mit Zeitzonen in JS arbeitet, zeige echte Codebeispiele und gebe ein paar Tricks, die Ihnen Stunden des Debuggens ersparen. Los geht's!

Warum arbeitet JavaScript so seltsam mit Datumsangaben?

Beginnen wir mit dem Wichtigsten: Das Date-Objekt in JavaScript ist, gelinde gesagt, kein Geschenk. Es speichert die Zeit in Millisekunden seit dem 1. Januar 1970 UTC. Und das wäre ja noch in Ordnung, aber:

\n
• getMonth() gibt Monate von 0 bis 11 zurück (Januar ist 0, Dezember ist 11)
\n
• Die Methoden getHours(), getMinutes() geben die Zeit in der lokalen Zeitzone des Benutzers zurück
\n
• Und die Methoden getUTCHours(), getUTCMinutes() geben die Zeit in UTC zurück
\n

Und hier beginnt die Verwirrung. Angenommen, Sie schreiben:

const now = new Date();\nconsole.log(now.getHours());      // 14 – wenn Sie MSK haben\nconsole.log(now.getUTCHours());   // 11 – UTC

Wenn Sie now in der Datenbank speichern und dann auf einem Server in einer anderen Zeitzone abrufen, erhalten Sie ein Durcheinander. Daher die erste Regel für die Arbeit mit Datumsangaben und Zeitzonen in JavaScript: Speichern Sie die Zeit immer in UTC und konvertieren Sie sie auf dem Client.

Intl.DateTimeFormat: Der eingebaute Retter

Viele wissen es nicht, aber modernes JavaScript hat eine leistungsstarke eingebaute API für die Arbeit mit Datumsformatierung unter Berücksichtigung der Zeitzone. Es ist Intl.DateTimeFormat. Es unterstützt alle gängigen Zeitzonen und kann Datumsangaben schön formatieren.

Basisbeispiel

const date = new Date('2025-03-15T12:00:00Z');\n\nconst formatter = new Intl.DateTimeFormat('de-DE', {\n    timeZone: 'America/New_York',\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit'\n});\n\nconsole.log(formatter.format(date)); \n// "15. März 2025, 08:00" – Zeit in New York

Beachten Sie: Wir übergeben das Datum in UTC (Buchstabe Z am Ende), und Intl.DateTimeFormat konvertiert es selbstständig in die gewünschte Zeitzone. Das ist ideal für die Anzeige der Zeit für Benutzer aus verschiedenen Regionen.

Liste aller Zeitzonen

Wenn Sie nicht wissen, welche Zeitzone Sie angeben sollen, können Sie die vollständige Liste abrufen:

console.log(Intl.supportedValuesOf('timeZone'));\n// ["Africa/Abidjan", "Africa/Accra", ..., "Pacific/Wallis"]

Diese Liste umfasst über 500 Zeitzonen. Verwenden Sie sie, um sicherzustellen, dass Ihre Zeitzone unterstützt wird.

Moment.js: Klassiker, aber mit Einschränkungen

Lange Zeit war moment.js der Standard für die Arbeit mit Datumsangaben in JavaScript. Es kann Datumsangaben parsen, formatieren, manipulieren und natürlich mit Zeitzonen arbeiten – über das Plugin moment-timezone.

Installation

npm install moment moment-timezone

Beispiel mit Zeitzonen

const moment = require('moment-timezone');\n\nconst now = moment();\nconsole.log(now.tz('Europe/Berlin').format('YYYY-MM-DD HH:mm'));\n// 2025-03-15 14:00 – Berliner Zeit\n\nconst nyTime = moment.tz('2025-03-15 12:00', 'America/New_York');\nconsole.log(nyTime.clone().tz('Europe/Berlin').format('YYYY-MM-DD HH:mm'));\n// 2025-03-15 17:00 – Differenz 5 Stunden

Wichtig: moment.js ist eine Legacy-Bibliothek. Die Autoren empfehlen selbst den Umstieg