Elegantere Verarbeitung von Datumsangaben in JavaScript basierend auf Day.js

Heute empfehle ich jedem die Bibliothek Day.js, die uns bei der Verarbeitung von Daten in JavaScript helfen kann, da die Verwendung von Daten in JavaScript zu schwierig ist. Es ist für die Geschäftsentwicklung völlig unbrauchbar und Sie müssen verschiedene Funktionen selbst kapseln.

Warum day.js verwenden?

Zunächst einmal können wir mit day.js Datum und Uhrzeit in JavaScript einfacher handhaben.
Sie haben vielleicht schon von vielen Bibliotheken zur Zeitverarbeitung in JavaScript gehört, wie etwa Moment. Wir schreiben jedoch das Jahr 2021 und die Verwendung von moment.js ist eigentlich nicht zu empfehlen, da es als Tool zur Datumsverarbeitung zu umständlich ist. day.js ist eine modernere, leichtere und einfacher zu erweiternde Bibliothek.

Moment.js

Klicken Sie hier, um die Größe anzuzeigen

Tag.js

Klicken Sie hier, um die Größe anzuzeigen

Es ist sehr leichtgewichtig, da es TreeShaking verwenden und durch Plug-Ins erweitert werden kann. Wir können Plug-Ins nach Bedarf einführen, sodass wir am Ende nur das einführen, was wir brauchen.

Was würden wir ohne day.js tun?

In nativem JavaScript müssen wir das aktuelle Datum wie folgt abrufen

const heute = neues Datum();
const dd = String(today.getDate()).padStart(2, '0'); // Tag const mm = String(today.getMonth() + 1).padStart(2, '0'); // Monat const yyyy = today.getFullYear(); // Jahr const curDate = `${yyyy}-${mm}-${dd}`

console.log(aktuellesDatum)
// Ausgabe: 2021-09-17

In day.js brauchen wir natürlich nur dies, es unterstützt mehr als das und viele andere Funktionen.
importiere dayjs von „dayjs“;

const curDate = dayjs().format('JJJJ-MM-TT');

console.log(aktuellesDatum)
// Ausgabe: 2021-09-17

Day.js Beispiel

Sehen wir uns nun einige praktische und interessante Beispiele an, die einfacher und lesbarer sind als die native API.

1. Ermitteln Sie die Anzahl der Tage zwischen zwei Daten

Dokumentation anzeigen

importiere dayjs von „dayjs“;

// Der zweite Parameter wird als „Tag“ angegeben, was bedeutet, dass die Granularität day.dayjs(new Date(2021, 10, 1)).diff(new Date(2021, 9, 17), „day“); ist. 
// Ausgabe: 15

2. Überprüfen Sie, ob das Datum gültig ist

Dokumentation anzeigen

importiere dayjs von „dayjs“;

dayjs("20").istGültig(); 
// Ausgabe: false
dayjs("2021-09-17").isValid(); 
// Ausgabe: true

3. Ermitteln Sie die Anzahl der Tage im Monat des Eingabedatums

Dokumentation anzeigen

importiere dayjs von „dayjs“;

dayjs("2021-09-13").TageImMonat() 
// Ausgabe: 30

4. Tag, Monat, Jahr, Stunde, Minute, Sekunde hinzufügen

Dokumentation anzeigen

importiere dayjs von „dayjs“;

dayjs("2021-09-17 08:10:00").add(20, "Minute").format('JJJJ-MM-TT HH:mm:ss') 
// Ausgabe: 2021-09-17 08:30:00

5. Subtrahieren Sie Tage, Monate, Jahre, Stunden, Minuten und Sekunden

Dokumentation anzeigen

importiere dayjs von „dayjs“;

dayjs("2021-09-17 08:10:00").subtract(20, "Minute").format('JJJJ-MM-TT HH:mm:ss')
// Ausgabe: 2021-09-17 07:50:00

Nutzen Sie Plugins, um die Funktionalität zu erweitern

1. RelativeZeit

Dokumentation anzeigen

Rufen Sie die Zeitdifferenz zwischen der angegebenen Zeit und jetzt ab.

importiere dayjs von „dayjs“;
importiere relativeTime aus „dayjs/plugin/relativeTime“;

dayjs.extend(relativeZeit);

dayjs("2021-09-16 13:28:55").vonJetzt();
// Ausgabe: vor 9 Stunden

Nachfolgend finden Sie alle Ausgabetabellen

2. Woche des Jahres

Dokumentation anzeigen

Holen Sie sich die Wochennummer des angegebenen Datums im Jahr

importiere dayjs von „dayjs“;
importiere die Jahreswoche aus „dayjs/plugin/Jahreswoche“;

dayjs.extend(WochedesJahres);

Tagjs("2021-09-13 14:00:00").Woche(); 
// Ausgabe: 38

3. IstDasGleicheOderDanach

Dokumentation anzeigen

Überprüft, ob ein Datum gleich oder größer als ein Datum ist

importiere dayjs von „dayjs“;
importiere isSameOrAfter aus „dayjs/plugin/isSameOrAfter“;

dayjs.extend(istGleichesOrAfter);

dayjs("2021-09-17").isSameOrAfter("2021-09-16"); 
// Ausgabe: true

4. MinMax

Dokumentation anzeigen

Holen Sie sich das größte oder kleinste Datum in einem Array

importiere dayjs von „dayjs“;
importiere minMax aus „dayjs/plugin/minMax“;

dayjs.erweitern(minMax)

const maxDate = dayjs.max([
    dayjs("2021-09-13"), 
    dayjs("2021-09-16"), 
    dayjs("2021-09-20")
])

const minDate = dayjs.min([
    dayjs("2021-09-13"), 
    dayjs("2021-09-16"), 
    dayjs("2021-09-20")
])

maxDate.format('JJJJ-MM-TT HH:mm:ss') 
// Ausgabe: 2021-09-20 00:00:00
minDate.format('JJJJ-MM-TT HH:mm:ss') 
// Ausgabe: 2021-09-13 00:00:00

5. IstZwischen

Dokumentation anzeigen

Überprüft, ob ein angegebenes Datum innerhalb eines angegebenen Datumsbereichs liegt

importiere dayjs von „dayjs“;
importiere isBetween von „dayjs/plugin/isBetween“;

dayjs.extend(istBetween);

// Tag als Vergleichsgranularität verwenden dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day");
// Ausgabe: true

// Jahr als Vergleichsgranularität verwenden dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year");
// Ausgabe: false

Damit ist dieser Artikel über elegantere Datumsverarbeitung in JavaScript basierend auf Day.js abgeschlossen. Weitere Informationen zur Datumsverarbeitung mit Day.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!