JavaScript Academy · Lektion

Dates und Uhrzeiten formatieren

Zeigen Sie Dates mit Intl.DateTimeFormat an.

Dates und Uhrzeiten formatieren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Intl.DateTimeFormat

Intl.DateTimeFormat formatiert Date-Objekte gemäß einer Locale und ersetzt damit fehleranfälliges manuelles Zusammensetzen von Zeichenketten.

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

Unterschiede zwischen Locales

Die Reihenfolge des Datums unterscheidet sich je nach Region: In den USA gilt Monat/Tag/Jahr, in weiten Teilen Europas Tag/Monat/Jahr.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

Voreinstellungen für Datumsformate

dateStyle bietet die Voreinstellungen "full", "long", "medium" und "short" für eine schnelle, gut lesbare Ausgabe.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

Zeitformat

timeStyle funktioniert für den Zeitanteil genauso und kann mit dateStyle kombiniert werden.

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

Benutzerdefinierte Komponentenoptionen

Für eine genaue Kontrolle geben Sie Komponenten wie year, month, day und weekday einzeln an.

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

Monatsformate

month akzeptiert "numeric", "2-digit", "short", "long" und "narrow".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

12- oder 24-Stunden-Format

hour12: true/false überschreibt die Standardeinstellung der Locale für das Uhrzeitformat.

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

Zeitzonen

Übergeben Sie einen IANA-Namen für timeZone, um ein Datum in jeder Zeitzone darzustellen – unabhängig von der lokalen Zeitzone der Laufzeitumgebung.

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts gibt ein Array typisierter Tokens zurück, sodass Sie einzelne Bestandteile formatieren oder neu anordnen können.

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

Zeiträume formatieren

formatRange(start, end) stellt einen Zeitraum kompakt dar und fasst gemeinsame Bestandteile zusammen.

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

Nicht-gregorianische Kalender

Die Option calendar unterstützt Systeme wie "islamic", "hebrew" oder "japanese".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

Schnelltest

Testen Sie die Datumsformatierung.

Zusammenfassung: Datumsangaben und Uhrzeiten

Sie haben Datumsangaben und Uhrzeiten mit Intl.DateTimeFormat formatiert, die Voreinstellungen dateStyle/timeStyle und detaillierte Komponentenoptionen verwendet, Zeitzonen sowie 12- und 24-Stunden-Formate verarbeitet und formatToParts, Zeiträume und alternative Kalender kennengelernt. Als Nächstes geht es um relative Zeitangaben und Pluralformen.

Häufig gestellte Fragen

Ist die Lektion „Dates und Uhrzeiten formatieren“ kostenlos?

Ja — der vollständige Text von „Dates und Uhrzeiten formatieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Dates und Uhrzeiten formatieren“?

Zeigen Sie Dates mit Intl.DateTimeFormat an. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Dates und Uhrzeiten formatieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy