Die Arbeit mit Datumsangaben ist keine leichte Aufgabe. Aber das Paket date-fns macht es einfach, mit den Datumsangaben in JavaScript zu arbeiten.
Lassen Sie uns tief in das Paket date-fns eintauchen, um unser Leben einfacher als je zuvor zu machen. Das Paket date-fns ist leichtgewichtig.
Inhaltsverzeichnis
Installieren des Pakets
Wir müssen das Projekt mit dem npm einrichten, um mit einem Paket eines Drittanbieters zu arbeiten. Lassen Sie uns schnell die Schritte sehen, um unser Setup abzuschließen.
Ich nehme an, Sie haben NodeJS oder IDE installiert, um dies zu üben.
- Navigieren Sie zu dem gewünschten Verzeichnis, in dem Sie arbeiten möchten.
- Führen Sie den Befehl npm init aus, um das Projekt zu initialisieren.
- Beantworten Sie alle Fragen nach Ihren Wünschen.
- Installieren Sie nun date-fns mit dem folgenden Befehl
npm install date-fns
- Erstellen Sie eine Datei namens dateFunctions.js
Jetzt sind wir bereit, in das Paket date-fns einzusteigen. Lassen Sie uns gehen und einige wesentliche Methoden aus dem Paket lernen.
ist gültig
Alle Daten sind nicht gültig.
Beispielsweise gibt es kein Datum wie 2021-02-30. Wie können wir überprüfen, ob das Datum gültig ist oder nicht?
Die Methode isValid from the date-fns hilft uns herauszufinden, ob das angegebene Datum gültig ist oder nicht.
Untersuchen Sie, ob der folgende Code mit der Gültigkeit der Daten gut funktioniert oder nicht.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Wenn Sie den obigen Code ausführen, werden Sie feststellen, dass der 30. Februar 2021 gültig ist. Oh! Es ist nicht.
Warum passiert es?
JavaScript wandelt den zusätzlichen Februartag in den 1. März 2021 um, der ein gültiges Datum ist. Geben Sie zur Bestätigung ein neues Datum („2021, 02, 30“) auf der Konsole aus.
console.log(new Date("2021, 02, 30"));
Das Paket date-fns stellt eine Methode namens parse bereit, um dieses Problem zu umgehen. Die Methode parse analysiert das von Ihnen angegebene Datum und gibt genaue Ergebnisse zurück.
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 Anwendungen bei der Arbeit mit Datumsangaben besteht darin, sie nach Belieben zu formatieren. Wir formatieren die Daten in verschiedenen Formaten mit der Methode format aus dem Paket date-fns.
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 genannten 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"));
Hier finden Sie die vollständige Liste der Formate hier.
Tage hinzufügen
Die Methode addDays wird verwendet, um eine Frist festzulegen, die nach einer bestimmten Anzahl von Tagen liegt.
Wir können einfach zu jedem Datum Tage hinzufügen, um nach einigen Tagen das Datum des Tages zu erhalten. Es hat viele Anwendungen.
Angenommen, Sie haben nach X Tagen Geburtstag und sind an diesen Tagen beschäftigt. Vielleicht erinnern Sie sich in Ihrem vollen Terminkalender nicht an den Geburtstag. Sie können einfach die addDays-Methode verwenden, um Sie nach X Tagen über den Geburtstag zu informieren. Habe den Code.
const { format, addDays } = require("date-fns");
const today = new Date();
// birthday after 6 days
const birthday = addDays(today, 6);
console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));
Ähnlich wie bei der Methode addDays gibt es noch andere Methoden wie addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc.. Die Funktionsweise der Methoden lässt sich anhand ihrer Namen leicht erraten.
Probiere sie aus.
formatEntfernung
Das Schreiben von Code zum Vergleichen von Daten von Grund auf ist ein Albtraum. Warum vergleichen wir überhaupt Daten?
Es gibt viele Anwendungen, bei denen Sie Datumsvergleiche gesehen haben. Wenn Sie Social-Media-Websites nehmen, gibt es einen Slogan, der vor 1 Minute, vor 12 Stunden, vor 1 Tag usw. erwähnt. Hier verwenden wir einen Datumsvergleich vom Post-Datum und der Uhrzeit bis zum aktuellen Datum und der aktuellen Uhrzeit.
Die Methode formatDistance macht dasselbe. Es gibt die Lücke zwischen den angegebenen zwei Daten zurück.
Lassen Sie uns ein Programm schreiben, um Ihr Alter zu finden.
const { formatDistance } = require("date-fns");
const birthday = new Date("1956, 01, 28");
const presentDay = new Date();
console.log(`Age: ${formatDistance(presentDay, birthday)}`);
everyDayOfInterval
Nehmen wir an, Sie müssen für die nächsten X Tage Namen und Daten finden. Die Methode eachDayOfInterval hilft uns, die Tage zwischen 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 die maximalen bzw. minimalen Daten unter den angegebenen Daten. Die Methoden in den date-fns sind sehr vertraut und die Funktionalität dieser Methoden ist leicht zu erraten. Lassen Sie uns etwas Code schreiben.
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])}`);
ist gleich
Sie können die Funktionalität der Methode isEqual leicht erraten. Wie Sie denken, wird die Methode isEqual verwendet, um zu prüfen, ob zwei Daten gleich sind oder nicht. Siehe Beispielcode unten.
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 über jede Methode im date-fns-Paket sprechen, dauert es Tage, bis sie abgeschlossen ist. Der beste Weg, ein Paket kennenzulernen, besteht darin, sich mit den wesentlichen Methoden vertraut zu machen und dann die Dokumentation für weitere Informationen zu lesen. Wenden Sie dasselbe Szenario auch für das date-fns-Paket an.
Die wesentlichen Methoden haben Sie in diesem Tutorial erlernt. Suchen Sie die spezifische Verwendung in der Dokumentation oder erwägen Sie die Teilnahme an Online-Kursen wie z JavaScript, jQuery und JSON.
Viel Spaß beim Programmieren 👨💻