Einfache Zeiträume in vier Zeilen modernem JavaScript
Lange Zeit war Moment.js das Mittel der Wahl, wenn es darum ging, die sehr
simplen Möglichkeiten des nativen Date-Objekts in JavaScript zu erweitern.
Mittlerweile hat sich in diesem Bereich jedoch so viel getan, dass selbst die
Autoren dieser weit verbreiteten Bibliothek von ihrem Einsatz
abraten.
Mit der neuen
Temporal-Schnittstelle
zieht gerade ein vollwertiger Ersatz direkt in die Browser ein, ohne dass es
einer weiteren JavaScript-Bibliothek bedarf.
Eine kleine Warnung vorab: Derzeit (Stand Frühjahr 2026) ist Temporal in
Chrome, Firefox und Edge verfügbar, aber noch nicht in Safari, wo es sich
noch in Arbeit befindet. Für
diesen Browser (und damit insbesondere alle iOS-Geräte) braucht man daher einen
Workaround, z. B. eine Polyfill-Bibliothek.
Was kann Temporal?
Wie mächtig genau ist jetzt diese neue Schnittstelle? Nehmen wir einen oft
gebrauchten Fall an: Das Datum einer Statusmeldung soll in der Form „vor X
Min.“ ausgegeben werden. Wir haben es als Zeitstempel der Form
2026-02-20T12:01:23.01234Z vorliegen.
Auf den ersten Blick scheint das auch mit dem alten Date-Objekt eine überschaubare Aufgabe:
/* ACHTUNG! Falsche Lösung! */
const status_datum = new Date(zeitstempel);
const jetzt = new Date();
console.log(`vor ${jetzt.getMinutes() - status_datum.getMinutes()} Min.`);Man testet es mit ein oder zwei frischen Statusmeldungen, und es scheint wunderbar zu funktionieren. Zumindest die erste halbe Stunde. Dem geneigten Betrachter wird es schnell auffallen: Sobald sich die Stunde ändert, wird der Zähler falsch. Die folgenden zwei Stunden Entwickler-Kopfschmerzen mit Datumswechsel, Schaltjahren, Zeitzone des Browsers usw. ersparen wir uns. Am Ende hat man die Hälfte von Moment.js für dieses kleine Statusleisten-Feature nachprogrammiert.
Eine Lösung in 4 Zeilen Code
Wie löst man das Problem elegant mit der Temporal-Schnittstelle? Zuerst
brauchen wir wieder zwei Datumsobjekte, mit denen wir hantieren können. Wir
instanziieren sie so:
const status_datum = Temporal.Instant.from(zeitstempel);
const jetzt = Temporal.Now.instant();Nun lassen wir Temporal die Differenz zwischen den beiden Zeitpunkten
berechnen:
const dauer = status_datum.until(jetzt, { smallestUnit: 'minutes' });Mit der zusätzlichen Option smallestUnit geben wir Temporal zu verstehen,
dass wir an Zeiträumen unter einer Minute nicht interessiert sind. Das Ergebnis
ist ein
Temporal.Duration-Objekt.
Die Ausgabe delegieren wir ebenfalls an Temporal: Duration bietet uns
dafür die .toLocalString()-Methode.
console.log(`vor ${duration.toLocaleString() || 'weniger als einer Minute'}`);Zu beachten ist, dass .toLocaleString() eine leere Zeichenkette zurückgibt,
wenn die Zeitspanne kürzer ist, als was wir mit smallestUnit definiert haben.
In diesem Fall bestimmen wir uns einen eigenen Fallback-Text.
Internationalisierung ist eingebaut
Das Locale in .toLocaleString() gibt schon einen Hinweis auf ein weiteres
Feature der Methode: Die Ausgabe ändert sich abhängig von der Sprache des
Benutzer-Browsers (nicht des lang-Attributes in HTML!). Man kann die
Sprache mit einem Parameter festzurren, wenn das gewünscht ist. Aber wenn die
Anwendung mehrsprachig ist, übernimmt Temporal hier für uns automatisch
ein kniffliges Internationalisierungsproblem.
Damit sind wir bereits fertig. In vier Zeilen modernem JavaScript haben wir
eine Anforderung umgesetzt, die sich einfach anhört, aber ohne Temporal
überraschend schwer umzusetzen wäre.
Wenn Sie mehr über Temporal erfahren möchten, empfehlen wir Ihnen den
Einführungsartikel von Dr. Axel Rauschmayer.
Und zum Abschluss noch eine kleine Demonstration: Dieser Artikel wurde vor veröffentlicht.