Datum und Uhrzeit in JavaScript: Formatierung, Validierung und Zeitzonen

Die Arbeit mit Datum und Uhrzeit gehört zu den alltäglichen, aber oft fehleranfälligen Aufgaben in der Softwareentwicklung. JavaScript bietet mit dem eingebauten Date-Objekt eine Reihe von Werkzeugen zur Manipulation, Formatierung und Validierung von Zeitwerten.

Dieser Leitfaden zeigt, wie Sie diese Funktionen nutzen, um robuste und internationale Anwendungen zu erstellen, ohne auf schwere externe Bibliotheken angewiesen zu sein.

1. Instanziierung: new Date() vs. Date.now()

Es gibt zwei primäre Wege, um die aktuelle Zeit in JavaScript abzufragen. Sie unterscheiden sich grundlegend im Rückgabetyp und in der Performance.

// new Date() erstellt eine neue Instanz des Date-Objekts
const dateObject = new Date();
console.log(typeof dateObject); // "object"

// Date.now() gibt den rohen Unix-Timestamp (Millisekunden seit dem 01.01.1970) zurück
const timestamp = Date.now();
console.log(typeof timestamp); // "number"

Performance-Tipp

Date.now() ist in der Ausführung erheblich schneller als new Date(), da der Browser kein neues Objekt im Speicher instanziieren muss. Verwenden Sie Date.now(), wenn Sie lediglich einen Zeitstempel benötigen (z.B. für Performance-Messungen).

Wichtig: Da Date.now() eine Zahl zurückgibt, können darauf keine Date-Methoden angewendet werden.

new Date().toLocaleDateString(); // "01.01.2025" (Funktioniert)
Date.now().toLocaleDateString(); // Uncaught TypeError: Date.now(...).toLocaleDateString is not a function

2. Robuste Validierung von Datumswerten

Die Validierung von Datumswerten in reinem JavaScript (Vanilla JS) ist aufgrund der verschiedenen Formate (Unix-Timestamps, ISO 8601, lokale Strings) anspruchsvoll.

Datums-Strings validieren

Mit Date.parse() können Sie prüfen, ob ein String ein gültiges Datum darstellt. Die Methode gibt den Unix-Timestamp zurück, wenn der String gültig ist, und NaN (Not a Number), wenn der String ungültig ist oder illegale Werte enthält (z.B. der "31. Februar").

function isDateString(value) {
  // isNaN() prüft, ob das Ergebnis der Konvertierung ungültig ist
  return !isNaN(Date.parse(value));
}

console.log(isDateString("2016-11-04T17:39:59.910Z")); // true
console.log(isDateString("Ungültiger String")); // false

Unix-Timestamps validieren

Da Date.parse() für rohe Zahlen nicht geeignet ist, müssen wir eine eigene Logik für Unix-Timestamps (in Sekunden) implementieren. Wir konvertieren den Wert in Millisekunden und versuchen, ein Date-Objekt zu instanziieren.

function isUnixTimestamp(value) {
  // Prüft, ob es sich um eine Zahl handelt
  if (typeof value !== 'number') return false;
  
  // Konvertiert Sekunden in Millisekunden und erstellt ein Date-Objekt
  const time = new Date(value * 1000);
  return !isNaN(time.getTime());
}

Kombinierte Validierungsfunktion

function isValidDate(value) {
  return isDateString(value) || isUnixTimestamp(value);
}

3. Internationale Formatierung mit toLocaleString()

Die modernste Methode zur Formatierung von Datumswerten ist toLocaleString() (sowie toLocaleDateString() und toLocaleTimeString()). Sie nutzt die Internationalisierungs-API des Browsers, um die Ausgabe an die regionalen Gepflogenheiten (Locales) des Benutzers anzupassen.

Standard-Ausgaben nach Region

const date = new Date("2017-01-10T15:29:15Z");

console.log(date.toLocaleString("en-US")); // "1/10/2017, 3:29:15 PM" (Monat zuerst, 12h-Format)
console.log(date.toLocaleString("en-GB")); // "10/01/2017, 15:29:15"    (Tag zuerst, 24h-Format)
console.log(date.toLocaleString("de-DE")); // "10.1.2017, 16:29:15"    (Punkte als Trenner)

Ausgabe anpassen mit Optionen

Über ein options-Objekt können Sie die Formatierung hochgradig anpassen.

const date = new Date("2017-01-10T15:29:15Z");

const options = {
  weekday: "long",  // "Dienstag"
  year: "numeric",  // "2017"
  month: "long",    // "Januar"
  day: "numeric"    // "10"
};

console.log(date.toLocaleDateString("de-DE", options)); // "Dienstag, 10. Januar 2017"

Dynamische Erkennung des Browser-Locales

In der Praxis sollten Sie die Spracheinstellungen des Benutzers dynamisch aus dem Browser auslesen:

const userLocale = navigator.language || navigator.userLanguage;
console.log(date.toLocaleDateString(userLocale, { month: "long" })); // "Januar" (im deutschen Browser)

4. Lokale Zeit vs. Weltzeit (UTC)

Ein häufiger Fehler bei der Arbeit mit Zeitwerten ist die Vernachlässigung von Zeitzonendifferenzen. Standardmäßig geben Methoden wie getFullYear() oder getHours() die Zeit der lokalen Maschine des Benutzers zurück.

Sollen Zeiten unabhängig vom Standort des Benutzers konsistent verarbeitet werden (z.B. auf einem Server), müssen die UTC-Gegenstücke verwendet werden.

const date = new Date();

// Lokale Zeit des Benutzers
const localYear = date.getFullYear();
const localHour = date.getHours();

// Weltzeit (Coordinated Universal Time)
const utcYear = date.getUTCFullYear();
const utcHour = date.getUTCHours();

Praxis-Beispiel: Warum das wichtig ist

Angenommen, Sie möchten einen Benutzer pünktlich um Mitternacht zum neuen Jahr grüßen. Wenn Sie nur die lokale Zeit verwenden, wird der Benutzer in New York zur gleichen Zeit gegrüßt wie der Benutzer in Berlin, obwohl sich der New Yorker noch in der Zeitzone UTC-5 befindet und dort noch Silvester ist.

5. Mathematische Uhrzeit-Konvertierung (24h zu 12h)

Falls Sie die Uhrzeit manuell formatieren müssen und ein 12-Stunden-Format mit AM/PM benötigen, hilft diese mathematische Formel zur Umrechnung der Stunden:

// Konvertiert Stunden (0-23) in das 12-Stunden-Format (1-12)
const convertTo12Hour = (hours) => {
  return ((hours + 11) % 12) + 1;
};

console.log(convertTo12Hour(0));  // 12 (AM)
console.log(convertTo12Hour(13)); // 1 (PM)
console.log(convertTo12Hour(23)); // 11 (PM)

Fazit

Das native Date-Objekt in JavaScript bietet in Kombination mit der Internationalisierungs-API (toLocaleString) eine vollständige und performante Lösung für die meisten Datums- und Uhrzeit-Herausforderungen. Durch die konsequente Berücksichtigung von Zeitzonen (UTC vs. Lokalzeit) und eine robuste Validierung vermeiden Sie typische Fehlerquellen und halten Ihre Anwendung stabil und barrierefrei.