date-fns-Spielplatz

Was ist date-fns?

date-fns ist eine moderne JavaScript‑Datums‑Utility‑Bibliothek, die umfassende, konsistente und zuverlässige Werkzeuge für die Arbeit mit Datumswerten in JavaScript bereitstellt. Im Gegensatz zum nativen JavaScript‑Date‑Objekt, das viele Eigenheiten und Inkonsistenzen aufweist, bietet date-fns einen modularen, funktionalen Ansatz zur Datum‑Manipulation. Es ist tree‑shakable, d. h. Sie binden nur die Funktionen ein, die Sie tatsächlich nutzen, wodurch die Bundle‑Größe minimal bleibt. Die Bibliothek unterstützt über 200 Funktionen, die alles von Formatierung und Parsing bis hin zu Vergleich, Manipulation und Lokalisierung von Daten abdecken.

Warum einen date-fns Playground verwenden?

Die Arbeit mit Datumswerten in JavaScript kann knifflig sein – Zeitzonen, Formatierungsmuster und Datumsarithmetik führen häufig zu unerwarteten Ergebnissen. Eine Playground‑Umgebung ermöglicht es Ihnen, date-fns‑Funktionen in Echtzeit zu experimentieren, sofortige Ausgaben zu sehen und die API zu erlernen, ohne ein komplettes Projekt aufzusetzen. Sie ist ideal zum Testen von Format‑Strings, Debuggen von Datumsberechnungen oder schnellen Prototyping von Datum‑Logik, bevor sie in Ihre Anwendung integriert wird.

Tool‑Beschreibung

Der date-fns Playground ist eine interaktive Coding‑Umgebung, die es Ihnen erlaubt, JavaScript‑Code mit der vollständig vor‑geladenen date-fns‑Bibliothek zu schreiben und auszuführen. Die gesamte date-fns‑Bibliothek ist über das Objekt dateFns verfügbar, sodass Sie Zugriff auf alle 200+ Funktionen haben. Der Code wird automatisch beim Tippen ausgeführt (mit Debouncing), und alle console.log, console.warn und console.error‑Ausgaben erscheinen im integrierten Terminal unterhalb des Editors. Das macht ihn ideal zum Lernen von date-fns, Testen von Datums‑Operationen und Experimentieren mit verschiedenen Formatierungsoptionen.

Beispiele

Aktuelles Datum formatieren:

const now = new Date();
console.log(dateFns.format(now, "MMMM do, yyyy"));
// Ausgabe: 30. Dezember 2025

Tage zwischen zwei Daten berechnen:

const start = new Date(2025, 0, 1);
const end = new Date(2025, 11, 31);
console.log(dateFns.differenceInDays(end, start) + " Tage");
// Ausgabe: 364 Tage

Zeit zu einem Datum hinzufügen:

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Nächste Woche:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Nächster Monat:", dateFns.format(nextMonth, "yyyy-MM-dd"));

Prüfen, ob ein Datum in der Vergangenheit oder Zukunft liegt:

const date = new Date(2024, 5, 15);
console.log("Ist vergangen?", dateFns.isPast(date));
console.log("Ist in der Zukunft?", dateFns.isFuture(date));

Ein Datums‑String parsen:

const parsed = dateFns.parse("25/12/2025", "dd/MM/yyyy", new Date());
console.log(dateFns.format(parsed, "EEEE, MMMM do, yyyy"));
// Ausgabe: Donnerstag, 25. Dezember 2025

Funktionen

• Vollständige date-fns‑Bibliothek: Zugriff auf alle 200+ date-fns‑Funktionen über das Objekt dateFns
• Live‑Code‑Ausführung: Code wird automatisch beim Tippen mit intelligentem Debouncing ausgeführt
• Integriertes Terminal: Konsolenausgaben sofort sichtbar, ohne Browser‑Dev‑Tools
• Syntax‑Highlighting: JavaScript‑Syntax‑Highlighting für bessere Lesbarkeit des Codes
• Fehlerbehandlung: Laufzeitfehler werden klar im Terminal‑Output angezeigt

Anwendungsfälle

• date-fns lernen: Mit verschiedenen Funktionen experimentieren und sofortige Ergebnisse sehen, ohne ein Projekt aufzusetzen
• Datum‑Format‑Tests: Unterschiedliche Format‑Strings ausprobieren, um das gewünschte Ausgabe‑Muster zu finden
• Prototyping von Datum‑Berechnungen: Komplexe Datumsarithmetik testen, z. B. Geschäftstage hinzufügen, Intervalle ermitteln oder Daten vergleichen
• Debugging von Datum‑Logik: Datum‑bezogene Code‑Snippets isolieren und testen
• Schnelle Datum‑Konvertierungen: Zwischen Datumsformaten konvertieren oder Zeitdifferenzen on‑the‑fly berechnen

Häufige date-fns‑Funktionen

Referenz für Format‑Token