Node.js-Module: Datumsbibliothek date-fns

Node.js: Gutes Date-Handling in JavaScript mit date-fns
Keine Kommentare

Die Arbeit mit Datumswerten ist ein Problem der ersten Stunde der Sprache. Zwar verfügt JavaScript im Kern über ein Date-Objekt, mit dem Sie theoretisch Datumsberechnungen durchführen können, wären da nicht etliche Schwächen des API. Doch es gibt zum Glück hilfreiche Bibliotheken, die uns eine Menge Arbeit ersparen können.

Ein Problem ist beispielsweise der Umgang mit verschiedenen Zeitzonen bei den Datumsobjekten, so nutzt JavaScript die aktuelle Zeitzone des Systems als Grundlage. Gerade bei zeitzonenübergreifenden Applikationen kann das zu Schwierigkeiten führen. Eine weitere Eigenheit des Date-Objekts in JavaScript ist die Repräsentation des Monats. Der Januar wird beispielsweise mit dem Wert 0 angegeben. Bei Tages- und Jahreszahl folgt JavaScript jedoch wiederum dem zu erwartenden Standard, so wird der 5. eines Monats durch die Zahl 5 repräsentiert.

Bei der Implementierung einer Applikation, die mit Datumswerten arbeitet, stoßen Sie häufig auf die Aufgabe, dass Sie diese erzeugen, modifizieren und ausgeben müssen. Das Erzeugen und Ausgeben ist problemlos mit den Bordmitteln von JavaScript möglich. Kommt es jedoch zur Modifikation eines Datums, wollen Sie also von einem Datum beispielsweise zwei Tage abziehen, ist das nicht mehr ohne Weiteres möglich. Natürlich können Sie sich den Zeitstempel des Datums holen und dann die entsprechende Anzahl von Millisekunden abziehen, um auf das Zieldatum zu kommen. Gut lesbar und wartungsfreundlich oder gar sonderlich elegant ist dieser Lösungsansatz jedoch nicht. Aus diesem Grund und etlichen weiteren Gründen sind in der Vergangenheit zahlreiche Bibliotheken entstanden, die Ihnen den Umgang mit Datumswerten in JavaScript erleichtern sollen. Eine der auf dem Markt am weitesten verbreiteten Lösungen ist Moment.js. Der Platzhirsch hat jedoch vor einiger Zeit einen ernstzunehmenden Konkurrenten bekommen: Das Projekt date-fns.

Wie unterscheidet sich date-fns von Moment.js?

Der erste und einer der wichtigsten Unterschiede steckt bereits im Namen des Projekts, denn fns steht für Functions. date-fns ist eine Sammlung von Funktionen, mit deren Hilfe Sie mit Datumswerten arbeiten können. Im Gegensatz dazu verfolgt Moment.js einen objektorientierten Ansatz. Hier erzeugen Sie eine Moment-Instanz und arbeiten mit den Methoden dieses Objekts. Das hat natürlich Auswirkungen auf die Paketgröße. Standardmäßig beinhaltet Moment.js die gesamte Schnittstelle. Sie können das Paket zwar optimieren, hierfür sind jedoch zusätzliche Schritte erforderlich. Bei date-fns laden Sie nur die Funktionen, die Sie wirklich benötigen. In einer Backend-Applikation mit Node.js spielt diese Überlegung keine allzu große Rolle, da die Paketgröße eher nebensächlich ist. date-fns wie auch Moment.js können Sie auch im Frontend im Browser einsetzen. Hier ist die Paketgröße entscheidend.

JavaScript Days 2019

JavaScript Testing in der Praxis (Teil 1 + 2)

mit Dominik Ehrenberg (Crosscan) und Sebastian Springer (MaibornWolff)

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner (‚Webtechnologie-Erklärbär‘)


Die Entwickler von date-fns haben nicht nur darauf geachtet, das Projekt in viele kleine und größtenteils unabhängige Funktionen zu unterteilen, sondern auch, dass es sich bei den Funktionen um Pure Functions handelt. So übergeben Sie beispielsweise der Funktion addHours ein Datumsobjekt und die Anzahl der Stunden, die hinzugefügt werden sollen. Als Ergebnis erhalten Sie ein neues Datumsobjekt, bei dem die angegebene Anzahl von Stunden später ist als bei der Eingabe. Es treten also keinerlei Seiteneffekte, wie beispielsweise die direkte Modifikation der Eingabe, auf.

Wie wird date-fns installiert?

date-fns ist, wie die meisten übrigen JavaScript-Bibliotheken, als npm-Paket verfügbar und kann als solches über npm installiert werden. Nutzen Sie hierfür das Kommando npm install date-fns in Ihrem Projekt. Das Paket wird automatisch als Dependency in Ihre package.json-Datei eingetragen. Analog dazu können Sie auch yarn mit dem Befehl yarn add date-fns nutzen.

Wie wird es verwendet?

Das date-fns-Paket können Sie sowohl mit dem CommonJS-Modulsystem als auch mit ES-Modulen nutzen. Im folgenden Beispiel nutzen Sie die format-Funktion, um das aktuelle Datum auszugeben. In Listing 1 sehen Sie, wie Sie mit dem CommonJS-Modulsystem arbeiten können.

const { format } = require('date-fns');

const date = new Date();

console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

Neuere Versionen von Node.js unterstützen mittlerweile auch die Schlüsselwörter import und export, um Module zu importieren beziehungsweise zu exportieren. An dieser Stelle können Sie entweder das gesamte date-fns-Paket importieren und auf die benötigten Funktionen zugreifen oder Sie können ausnutzen, dass jede Funktion in einer separaten Datei verfügbar ist, sodass Sie die format-Funktion einzeln importieren können. Wie das funktioniert, sehen Sie in Listing 2.

import { format } from 'date-fns/format';

const date = new Date();

console.log(`Heute ist der: ${format(date, 'DD.MM.YYYY')}`);

Formatierung von Datumswerten

Mit format haben Sie bereits die wichtigste Funktion zur Formatierung von Datumswerten kennen gelernt. Über die Format-Zeichenkette können Sie festlegen, welchen Teil des Datums Sie wie formatieren möchten. Eine umfassende Referenz der einzelnen Tokens, die Sie in der Format-Zeichenkette nutzen können, finden Sie unter https://date-fns.org/docs/format.

Neben dieser Funktion haben Sie Zugriff auf weitere Hilfsfunktionen wie beispielsweise die distanceInWords-Funktion, die den Unterschied zweier Datumswerten in lesbarer Form ausgibt.

Datumsarithmetik

Eine bereits erwähnte Schwachstelle des Date-Objekts in JavaScript ist die mangelnde Unterstützung einer Datumsarithmetik. So ist es nicht ohne Weiteres möglich, Addition oder Subtraktion durchzuführen. date-fns bietet hierfür eine Reihe von Hilfsfunktionen. Generell folgen diese Funktionen einem einheitlichen Namensschema: Zuerst geben Sie die Operation an, gefolgt von der Einheit, mit der Sie arbeiten möchten. Daraus ergeben sich Funktionsnamen wie addMinutes oder subYears. Alle Funktionen dieser Kategorie akzeptieren als erstes Argument ein Datumsobjekt und als zweites eine Zahl, die angibt, wie viele Einheiten Sie addieren oder subtrahieren möchten. Um beispielsweise eine dreiviertel Stunde zum aktuellen Datum zu addieren, können Sie den Code aus Listing 3 nutzen.

const { addMinutes, addHours, format } = require('date-fns');

const date = addMinutes(addHours(new Date(), 1), 45);

console.log(format(date, 'DD.MM.YYYY HH:mm'));

Vieles, was Ihnen Pakete wie Moment.js und date-fns bieten, können Sie auch mit JavaScript erreichen – worunter allerdings die Lesbarkeit des Quellcodes leidet.

Vergleiche

Sehr hilfreich sind auch die Vergleichsfunktionen von date-fns, mit deren Hilfe Sie feststellen können, ob ein Datum vor oder nach einem anderen liegt, beziehungsweise, ob ein gewisses Datum in der Zukunft oder der Vergangenheit liegt. Am Beispiel der Funktionen isAfter und isFuture sehen Sie in Listing 4 deren Einsatz.

const { isAfter, isFuture, addHours } = require('date-fns');

const date1 = new Date();
const date2 = addHours(new Date(), 5);

console.log(`Date1 is ${isAfter(date1, date2) ? 'after' : 'before'} Date2`);
console.log(`Date2 is ${isFuture(date2) ? 'not' : ''} in the past`);

Weiterführende Operationen

Das date-fns Paket bietet Ihnen nicht nur einfache Operationen wie beispielsweise Addition, sondern verfügt auch über komplexere Operationen wie beispielsweise die areRangesOverlapping-Funktion, mit deren Hilfe Sie feststellen können, ob sich zwei Zeitspannen überschneiden.

Mit der min– und max-Funktion können Sie aus einer Reihe von Datumswerten den frühesten beziehungsweise spätesten Termin herausfinden.

Mithilfe der compareAsc– und compareDsc-Funktionen können Sie außerdem Arrays mit Datumswerten sortieren. Diese Funktion wird als Vergleichsfunktion an die sort-Methode eines Arrays übergeben. Ein Beispiel hierfür enthält Listing 5.

const { compareAsc } = require('date-fns');

const sortedDates = [
  new Date(2001, 1, 1),
  new Date(2003, 3, 3),
  new Date(2002, 2, 2),
].sort(compareAsc);

console.log(sortedDates);

Fazit

Vieles, was Ihnen Pakete wie Moment.js oder date-fns bieten, können Sie auch mit nativem JavaScript erreichen. Allerdings leidet in diesen Fällen die Lesbarkeit des Quellcodes stark. Dies ist eines der wichtigsten Argumente, die neben der Behebung der Eigenheiten des JavaScript-Date-Objekts für den Einsatz dieser Bibliotheken spricht.

Die hier gezeigten Möglichkeiten der date-fns stellen nur einen kleinen Ausschnitt der Bibliothek dar und sollen Ihnen nur einen Vorgeschmack auf den Funktionsumfang dieser Bibliothek geben. Mit zahlreichen Erweiterungen und einer sehr guten Unterstützung von Internationalisierung in Applikationen sollten Sie date-fns zumindest in die engere Auswahl nehmen, wenn Sie das nächste Mal vor der Auswahl einer Datumsbibliothek für eine Ihrer Applikationen stehen.

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -