Der Umgang mit Datumsangaben kann eine Herausforderung darstellen. Das Paket `date-fns` vereinfacht jedoch die Arbeit mit Datumsangaben in JavaScript erheblich.
Lassen Sie uns tiefer in das `date-fns` Paket eintauchen und sehen, wie es uns das Leben erleichtern kann. Dieses Paket ist besonders leichtgewichtig.
Installation des Pakets
Um mit externen Paketen arbeiten zu können, müssen wir unser Projekt mit npm einrichten. Im Folgenden sind die Schritte zur Einrichtung aufgeführt:
Ich gehe davon aus, dass Sie Node.js oder eine IDE zur Übung installiert haben.
- Navigieren Sie zum gewünschten Arbeitsverzeichnis.
- Führen Sie den Befehl `npm init` aus, um das Projekt zu initialisieren.
- Beantworten Sie die Fragen entsprechend Ihren Präferenzen.
- Installieren Sie nun `date-fns` mit diesem Befehl:
npm install date-fns
- Erstellen Sie eine Datei mit dem Namen `dateFunctions.js`.
Nun sind wir bereit, `date-fns` zu erkunden. Schauen wir uns einige wichtige Methoden dieses Pakets an.
isValid (Gültigkeit überprüfen)
Nicht jedes Datum ist gültig.
Ein Datum wie der 30. Februar 2021 existiert zum Beispiel nicht. Wie können wir überprüfen, ob ein Datum gültig ist?
Die `isValid`-Methode aus `date-fns` hilft uns festzustellen, ob ein angegebenes Datum gültig ist.
Betrachten wir den folgenden Code, um zu sehen, ob er korrekt mit der Datumsüberprüfung arbeitet.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Beim Ausführen des obigen Codes werden Sie feststellen, dass der 30. Februar 2021 als gültig angesehen wird. Das stimmt aber nicht!
Wieso ist das so?
JavaScript konvertiert den überzähligen Tag im Februar in den 1. März 2021, der ein gültiges Datum darstellt. Um dies zu bestätigen, geben Sie ein neues `Date` Objekt mit („2021, 02, 30“) in der Konsole aus.
console.log(new Date("2021, 02, 30"));
Das `date-fns` Paket bietet eine Methode namens `parse`, um dieses Problem zu umgehen. Die Methode `parse` analysiert das angegebene Datum und liefert genaue Ergebnisse.
Schauen Sie sich den folgenden Code an:
const { isValid, parse } = require("date-fns");
const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());
console.log(isValid(invalidDate));
console.log(isValid(validDate));
Format
Eine der grundlegenden Aufgaben bei der Arbeit mit Datumsangaben ist das Formatieren nach unseren Bedürfnissen. Mit der `format`-Methode aus `date-fns` können wir Datumsangaben in verschiedenen Formaten formatieren.
Formatieren Sie das Datum als 23-01-1993, 1993-01-23 10:43:55, Dienstag, 23. Januar 1993 usw. Führen Sie den folgenden Code aus, um das entsprechende Datum in den gewünschten Formaten zu erhalten.
const { format } = require("date-fns");
console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));
Eine vollständige Liste der Formate finden Sie hier.
Tage hinzufügen
Die `addDays`-Methode wird verwendet, um eine Frist festzulegen, die eine bestimmte Anzahl von Tagen in der Zukunft liegt.
Wir können einem beliebigen Datum ganz einfach Tage hinzufügen, um das Datum nach einer bestimmten Anzahl von Tagen zu erhalten. Dies hat viele Anwendungsfälle.
Angenommen, Ihr Geburtstag ist in X Tagen und Sie sind an diesen Tagen beschäftigt. Vielleicht vergessen Sie in Ihrem vollen Terminkalender den Geburtstag. Sie können die `addDays`-Methode verwenden, um Sie nach X Tagen an den Geburtstag zu erinnern. Hier ist der Code:
const { format, addDays } = require("date-fns");
const today = new Date();
// Geburtstag in 6 Tagen
const birthday = addDays(today, 6);
console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));
Ähnlich wie bei der `addDays`-Methode gibt es noch weitere Methoden wie `addHours`, `subHours`, `addMinutes`, `subMinutes`, `addSeconds`, `subSeconds`, `subDays`, `addWeeks`, `subWeeks`, `addYears`, `subYears` usw. Die Funktionsweise der Methoden ist anhand ihrer Namen leicht zu erraten.
Probieren Sie es aus.
formatDistance
Code zum Vergleichen von Datumsangaben von Grund auf zu schreiben, kann kompliziert sein. Warum müssen wir überhaupt Daten vergleichen?
Es gibt viele Anwendungen, bei denen Datumsvergleiche zum Einsatz kommen. Soziale Medien zeigen zum Beispiel Zeitangaben wie „vor 1 Minute“, „vor 12 Stunden“ oder „vor 1 Tag“ an. Hier wird ein Datumsvergleich zwischen dem Veröffentlichungsdatum und -zeitpunkt und dem aktuellen Datum und der aktuellen Zeit durchgeführt.
Die Methode `formatDistance` macht genau das. Sie gibt den zeitlichen Abstand zwischen zwei angegebenen Datumsangaben zurück.
Schreiben wir ein Programm, um Ihr Alter zu berechnen.
const { formatDistance } = require("date-fns");
const birthday = new Date("1956, 01, 28");
const presentDay = new Date();
console.log(`Alter: ${formatDistance(presentDay, birthday)}`);
eachDayOfInterval
Nehmen wir an, Sie müssen die Namen und Daten für die nächsten X Tage ermitteln. Die Methode `eachDayOfInterval` hilft uns, die Tage zwischen einem Start- und Enddatum zu finden.
Lassen Sie uns die nächsten 30 Tage ab heute herausfinden.
const { addDays, eachDayOfInterval, format } = require("date-fns");
const presentDay = new Date();
const after30Days = addDays(presentDay, 30);
const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });
_30Days.forEach((day) => {
console.log(format(day, "PPPP"));
});
max und min
Die Methoden `max` und `min` finden das maximale bzw. minimale Datum aus den angegebenen Datumsangaben. Die Methoden in `date-fns` sind sehr intuitiv und ihre Funktionalität ist leicht zu erraten. Hier ist etwas Code:
const { min, max } = require("date-fns");
const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");
console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);
isEqual
Die Funktionalität der `isEqual`-Methode ist leicht zu erraten. Wie Sie vielleicht vermuten, dient die `isEqual`-Methode dazu, zu prüfen, ob zwei Datumsangaben gleich sind. Schauen Sie sich den folgenden Beispielcode an.
const { isEqual } = require("date-fns");
const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");
console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));
Fazit
Wenn wir jede einzelne Methode im `date-fns` Paket besprechen würden, würde das Tage dauern. Der beste Weg, ein Paket kennenzulernen, ist, sich mit den wichtigsten Methoden vertraut zu machen und dann die Dokumentation für weitere Informationen zu konsultieren. Wenden Sie dieses Vorgehen auch auf das `date-fns` Paket an.
In diesem Tutorial haben Sie die wesentlichen Methoden kennengelernt. Suchen Sie nach der spezifischen Verwendung in der Dokumentation oder ziehen Sie in Erwägung, Online-Kurse wie JavaScript, jQuery und JSON zu belegen.
Viel Spaß beim Programmieren! 👨💻