JavaScript: Datum und Uhrzeit
Datum und Uhrzeit in JavaScript verstehen und verwenden: Date-Objekt, Methoden, Zeitzonenverwaltung und Datumsarithmetik für Webanwendungen erklärt.
Einführung in das JavaScript Date-Objekt
Das Verstehen und Manipulieren von Datum und Uhrzeit ist entscheidend für die Erstellung dynamischer Webanwendungen. JavaScript bietet ein eingebautes Date-Objekt für diese Aufgaben. Dieser Leitfaden erläutert, wie Datumsangaben erstellt, ihre Bestandteile gelesen und geändert, formatiert und Datumsarithmetik durchgeführt wird — mit ausführbaren Beispielen.
Intern ist ein Date nur eine einzige Zahl: die Anzahl der Millisekunden seit der Unix-Epoche (00:00:00 UTC am 1. Januar 1970). Alle weiteren Funktionen bauen auf dieser einen Zahl auf, sodass viele Datumsberechnungen auf gewöhnliche Zahlen-Mathematik hinauslaufen.
Date-Objekte erstellen
Es gibt vier gebräuchliche Möglichkeiten, ein Date zu instanziieren, jeweils für unterschiedliche Eingaben.
// 1. Current date and time (no arguments)
const now = new Date();
// 2. From a millisecond timestamp (epoch = 0)
const epoch = new Date(0); // 1970-01-01T00:00:00.000Z
// 3. From a date string (ISO 8601 is the only reliably portable format)
const parsed = new Date("2024-01-01T00:00:00");
// 4. From individual components: year, monthIndex, day, hours, minutes, seconds
const detailed = new Date(2024, 0, 1, 15, 30, 0); // Jan 1, 2024, 15:30:00Der Monat ist 0-basiert. In der Komponentenform ist Januar 0, Februar 1, … Dezember 11. Der Tag im Monat hingegen ist 1-basiert. Dieser Versatz um eins ist der häufigste Date-Fehler. Die gleiche 0-Indexierung gilt für getMonth() und setMonth().
ISO-Strings parsen vs. andere Formate
Nur das ISO 8601-Format (YYYY-MM-DDTHH:mm:ss.sssZ) wird in jeder JavaScript-Umgebung garantiert gleich geparst. Ein reiner Datumsstring wie "2024-01-01" wird als UTC-Mitternacht behandelt, während "2024-01-01T00:00:00" (ohne Z) als lokale Zeit gilt. Andere Formate (z. B. "01/02/2024") sind implementierungsabhängig — diese sollten vermieden werden.
Datums- und Uhrzeitkomponenten abrufen
Sobald Sie ein Date-Objekt haben, können Sie jeden Teil mit einer get*-Methode lesen. Diese geben lokale Zeit-Werte zurück (siehe Mit Zeitzonen arbeiten für die UTC-Varianten).
Datums- und Uhrzeitkomponenten setzen
Jede get*-Methode hat eine entsprechende set*-Methode, die das Datum direkt verändert. Date-Objekte sind veränderlich — set* ändert das Original, anstatt ein neues Datum zurückzugeben.
Autokorrektur (Überlauf wird weitergegeben)
Wenn Sie einen Wert außerhalb des gültigen Bereichs setzen, normalisiert Date diesen stillschweigend — es gibt keinen Fehler. Wenn Sie Tag 32 im Januar setzen, springt das Datum in den Februar. Das ist nützlich für Berechnungen: Um 5 Tage zu addieren, addieren Sie einfach 5 zu getDate() und lassen das Datum überlaufen.
Zeitstempel: getTime und Date.now
getTime() gibt das Datum als Millisekunden-Zeitstempel zurück, und die statische Methode Date.now() liefert den aktuellen Zeitstempel, ohne ein Objekt zu erstellen. Zeitstempel sind der einfachste Weg, Datumsangaben zu vergleichen oder verstrichene Zeit zu messen.
Mit Zeitzonen arbeiten
Ein Date speichert einen einzigen UTC-Zeitpunkt; die get*-Methoden lesen ihn in der lokalen Zeitzone des Systems. Verwenden Sie die getUTC*-Varianten, um den UTC-Wert zu lesen, und die Intl API (über toLocaleString), um eine beliebige andere Zeitzone darzustellen.
Datum und Uhrzeit formatieren
Für einen maschinenlesbaren string verwenden Sie toISOString(); für menschenlesbare Ausgaben respektieren toLocaleDateString() / toLocaleTimeString() das Gebietsschema des Nutzers. Für ein vollständig eigenes Layout fügen Sie die Teile manuell zusammen (dabei getMonth() + 1 nicht vergessen).
toISOString() wird von JSON.stringify für Datumsangaben verwendet, sodass ein Date einen Hin- und Rückweg als Text übersteht. Siehe Mit JSON arbeiten, um zu erfahren, wie ISO-Strings wieder in Date-Objekte umgewandelt werden.
Moderne Datumsbibliotheken erkunden: Während das native Date-Objekt von JavaScript grundlegende Datumsverwaltung bietet, bieten Bibliotheken wie date-fns und Luxon robuste Hilfsmittel für komplexe Berechnungen, Internationalisierung und Zeitzonenverwaltung. Moment.js ist offiziell veraltet; für neue Projekte sollten diese modernen Alternativen in Betracht gezogen werden.
Datumsarithmetik und Differenzen
Da ein Date intern eine Zahl ist, ergibt das Subtrahieren zweier Datumsangaben die Differenz in Millisekunden. Der Subtraktions-Operator wandelt jedes Datum über getTime() um, sodass endDate - startDate direkt funktioniert. Durch Division durch die Millisekunden eines Tages erhält man die Anzahl der Tage.
Zum Addieren von Zeit ist die Mutation mit set* (die Monats-/Jahresüberlauf korrekt behandelt) dem Addieren von rohen Millisekunden vorzuziehen, da Letzteres Sommerzeitverschiebungen ignoriert.
Bibliotheken für erweiterte Manipulationen nutzen
Für komplexere Datumsmanipulationen und Formatierungen können mehrere Bibliotheken diese Aufgaben vereinfachen. Bibliotheken wie date-fns und Luxon bieten erweiterte Funktionalitäten über das native Date-Objekt hinaus und erleichtern Aufgaben wie Parsing, Internationalisierung und komplexe Zeitzonenverwaltung. Darüber hinaus befindet sich die Temporal API derzeit in der Entwicklung und soll das native Date-Objekt künftig durch eine robustere, unveränderliche und zeitzonenbewusste Lösung ersetzen.
Fazit
Die Beherrschung des Date-Objekts in JavaScript ist unerlässlich für die Entwicklung dynamischer Webanwendungen, die effektiv mit Datum und Uhrzeit interagieren. Durch das Erstellen, Abrufen, Setzen und Formatieren von Datumsangaben können Entwickler anspruchsvolle Funktionen erstellen, die auf die reale Zeit reagieren. Ob Ereignisse planen, Dauern berechnen oder Zeitleisten anzeigen — die Möglichkeiten, die das Date-Objekt von JavaScript und verschiedene Drittanbieterbibliotheken bieten, machen die Datums- und Uhrzeitmanipulation zu einem leistungsstarken Werkzeug in Ihrem Werkzeugkasten der Webentwicklung.