Das heutige Datum in HTML abfragen

HTML bietet keine integrierte Live-Datumsanzeige. Mit JavaScript erstellen Sie ein Date-Objekt, formatieren den Wert für Ihre Leser und fügen den resultierenden Text in ein HTML-Element ein. Ein Date-Objekt steht für einen Zeitpunkt; Methoden wie getMonth() und toLocaleDateString() bestimmen, wie dieser Wert dargestellt wird.

Aktuelles Datum und aktuelle Uhrzeit mit JavaScript in HTML anzeigen

Verwenden Sie new Date(), wenn Sie ein Date-Objekt und dessen Methoden benötigen. Ein Aufruf von Date() ohne new gibt stattdessen sofort eine Zeichenfolge mit Datum und Uhrzeit zurück. Auf diese lassen sich daher keine Methoden wie getFullYear() anwenden. Fügen Sie ein Element mit der ID current-date in die Seite ein, wählen Sie anschließend dieselbe ID aus und setzen Sie dessen textContent:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<p>Current date and time: <span id="current-date"></span></p>
<script>
  const currentDate = new Date();
  document.getElementById("current-date").textContent = currentDate.toString();
</script>

Da das Skript nach dem Element steht, ist dieses vorhanden, wenn getElementById() ausgeführt wird. Der angezeigte Wert hängt davon ab, wann das Skript läuft und welche lokale Zeitzone auf dem Gerät eingestellt ist. Verwenden Sie textContent für einfachen Datumstext; so wird der Wert nicht als HTML-Markup behandelt. Dieses Beispiel für eine Browserseite wird nicht in der Laufzeitumgebung des Artikels ausgeführt.

Eine ausführlichere Einführung zum Abrufen des aktuellen Werts finden Sie unter JavaScript: aktuelles Datum abrufen.

Datum in HTML als Monat/Tag/Jahr formatieren

Für ein numerisches Datum im US-amerikanischen Format setzen Sie die Zeichenfolge aus den einzelnen Datumsbestandteilen zusammen. getMonth() liefert einen nullbasierten Wert; addieren Sie daher 1, um die übliche Monatsnummer zu erhalten. getDate() gibt den Tag des Monats zurück, getFullYear() das Jahr. Dieses Beispiel verwendet ein festes Datum, damit sich die Formatierungslogik leicht anpassen lässt. Ersetzen Sie es durch new Date(), wenn Sie das heutige lokale Datum anzeigen möchten.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const page = { textContent: "" };
const document = { getElementById: () => page };
const date = new Date(2024, 0, 5);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = date.getFullYear();
document.getElementById("current-date").textContent = `${month}/${day}/${year}`;
console.log(page.textContent);

Auch das Monatsargument des Konstruktors ist nullbasiert: 0 steht für Januar. Durch das Auffüllen mit Nullen werden einstellige Monate und Tage einheitlich zweistellig dargestellt. Die Reihenfolge month/day/year ist eine Darstellungskonvention und kein weltweit einheitliches Datumsformat. Wählen Sie eine andere Reihenfolge, wenn sie besser zu Ihrer Zielgruppe passt. Weitere Formatierungsmuster finden Sie unter JavaScript: Datum formatieren.

Datum mit toLocaleDateString() an eine Sprache und Region anpassen

Mit toLocaleDateString() können Sie die Internationalisierungsfunktionen des Browsers bitten, eine formatierte Datumszeichenfolge zu erstellen. Geben Sie eine Locale wie en-US oder en-GB an, um eine bestimmte Konvention anzufordern, und legen Sie mit Optionen fest, welche Bestandteile angezeigt werden. Ohne Locale kann sich die Ausgabe nach der Browserumgebung richten und deshalb bei verschiedenen Lesern unterschiedlich ausfallen.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const date = new Date(2024, 0, 5);
const options = { year: "numeric", month: "long", day: "numeric" };
const formatted = date.toLocaleDateString("en-US", options);
console.log(formatted);

Ändern Sie die Locale zu en-GB, um britische englische Konventionen anzufordern. Die genaue Schreibweise und Zeichensetzung richtet sich nach den Locale-Daten der Laufzeitumgebung. Verarbeiten Sie die resultierende Zeichenfolge daher nicht so, als hätte sie immer ein festes Format. Verwenden Sie toLocaleDateString(), wenn die Sprache und regionale Formatierung für Leser wichtig sind und kein maschinenlesbares Datum benötigt wird.

Wochentag oder gut lesbares Datumsformat hinzufügen

Sie können einen Wochentag direkt über die Locale-Formatierung hinzufügen. So müssen Sie kein eigenes Array mit Wochentagsnamen pflegen; die gewählte Locale bestimmt Bezeichnung und Reihenfolge.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const date = new Date(2024, 0, 5);
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toLocaleDateString("en-US", options));

Dieselben Optionen lassen sich mit einer anderen Locale wie fr-FR kombinieren, um ein langes, lokalisiertes Datum auszugeben. Wenn Sie nur einen kurzen Zahlenwert benötigen, lassen Sie weekday weg und verwenden Sie numerische Optionen für Monat und Tag. Die formatierte Ausgabe kann sich zwischen Browsern unterscheiden, wenn sich deren Locale-Daten ändern, auch wenn Locale und Optionen gleich bleiben.

Moment.js für weitere Datums- und Uhrzeitformate verwenden

Moment.js ist eine optionale Bibliothek und für die einfache Datumsanzeige nicht erforderlich. Laden Sie Moment.js, bevor Sie dessen API aufrufen. Für lokalisierte Formate müssen außerdem die passenden Locale-Daten eingebunden sein. Die folgenden Aufrufe dienen als Beispiele und setzen diese Abhängigkeit auf der Seite voraus: moment().format("YYYY-MM-DD") formatiert ein Kalenderdatum; moment().fromNow() gibt eine relative Zeitspanne ab dem aktuellen Zeitpunkt an; moment.locale("fr"); moment().format("LL") fordert ein langes französisches Datumsformat an, sofern die französischen Locale-Daten geladen sind; und moment().calendar() wählt eine Formulierung abhängig davon, wie nah das Datum am aktuellen Zeitpunkt liegt.

Relative Zeit beschreibt einen Zeitraum, nicht das Veröffentlichungs- oder Aktualisierungsdatum einer Seite. Bezeichnen Sie moment().fromNow() nur dann als „Zuletzt aktualisiert“, wenn der Wert auf einem tatsächlich gespeicherten Aktualisierungszeitpunkt beruht. Moment.js kann in bestehenden Projekten nützlich sein, die die Bibliothek bereits einbinden. Für einfache Anzeigen vermeiden die integrierten Date-APIs eine zusätzliche Abhängigkeit.

Datum mit toUTCString() in UTC umwandeln

Verwenden Sie toUTCString(), wenn eine gemeinsame Zeitreferenz hilfreicher ist als die lokale Uhrzeit der betrachenden Person. Die Methode gibt den Wert des Date-Objekts als Zeichenfolge in UTC zurück. Sie verändert weder den zugrunde liegenden Zeitpunkt noch wandelt sie ihn in die lokale Zeit der betrachtenden Person um.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const date = new Date("2024-01-05T12:30:00Z");
console.log(date.toUTCString());

Für einen aktuellen Wert ersetzen Sie den festen ISO-Zeitstempel durch new Date(). Dasselbe UTC-Datum kann in einer lokalen Zeitzone auf einen anderen Kalendertag fallen. Verwenden Sie die lokale Formatierung für ein Datum, das für die betrachtende Person bestimmt ist, die Locale-Formatierung für regionale Konventionen und UTC, wenn Personen eine einheitliche Zeitreferenz vergleichen oder teilen müssen. Weitere Hinweise zu UTC finden Sie unter JavaScript: Datum in UTC umwandeln.