Verwalten Sie Datums- und Uhrzeitvorgänge in Ihrer Anwendung ganz einfach mit Day.js

Einführung

Das Arbeiten mit Datums- und Uhrzeitangaben in JavaScript kann eine Herausforderung sein, insbesondere wenn bestimmte Formate erforderlich sind. Diese Komplexität führt häufig zu Inkonsistenzen bei Datum und Uhrzeit innerhalb von Anwendungen. Daher greifen Entwickler auf externe Tools und Bibliotheken wie Day.js zurück, um diese Vorgänge einfacher und genauer zu verwalten.

In diesem Artikel werden wir untersuchen, was Day.js ist, welche Grundfunktionen es hat, wie Sie es in Ihren Projekten verwenden, wie Sie seine Funktionalitäten mit Plugins erweitern und welche Browserunterstützung es bietet.

Was ist Day.js?

Day.js ist eine benutzerfreundliche, leichte Javascript-Bibliothek, die für die Verarbeitung einer Vielzahl von Datums- und Uhrzeitoperationen entwickelt wurde und deren Darstellung in leicht lesbaren Formaten in Webanwendungen ermöglicht.

Die Bibliothek kann sowohl in clientseitigen (Browser) als auch serverseitigen (Node.Js) Umgebungen verwendet werden.

In der modernen Webentwicklung legen Entwickler beim Erstellen von Anwendungen Wert auf Geschwindigkeit und Leistung. Große Importe und umfangreiche Bibliotheksdateien sind zwei häufige Hindernisse für diese Attribute.

Glücklicherweise behebt Day.js diese Probleme mit einer kompakten Dateigröße von nur 2 KB, was es zur idealen Wahl für die Verwaltung von Datums- und Uhrzeitvorgängen macht, ohne die Leistung der Anwendung zu beeinträchtigen.

Installation

Um mit der Day.js-Bibliothek in Ihrer Anwendung arbeiten zu können, müssen Sie sie zunächst einbinden.

Um die Bibliothek auf der Clientseite zu verwenden, fügen Sie das folgende Skript in den ein. Tag Ihres HTML-Dokuments.

<script src="path/to/dayjs/dayjs.min.js"></script>

Alternativ können Sie über ein CDN wie das jsdeliver CDN auf die Bibliothek zugreifen.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Um die Bibliothek als Abhängigkeit in Ihrer Anwendung zu installieren, führen Sie den folgenden Befehl aus:

npm install dayjs

Als nächstes importieren Sie dayjs in Ihre Javascript-Datei:

import dayjs from 'dayjs';

Um eine neue Day.js-Instanz zu erstellen, rufen Sie die Funktion dayjs() auf. Wenn kein Argument übergeben wird, wird ein Objekt zurückgegeben, das das aktuelle Datum und die aktuelle Uhrzeit darstellt:

const currentDate = dayjs();

Sie können dann auf dieses Objekt verweisen, um verschiedene Vorgänge für Datums- und Uhrzeitangaben auszuführen.

Da Day.js-Objekte unveränderlich sind, geben alle Vorgänge, die das Objekt ändern würden, eine neue Instanz mit dem aktualisierten Datum und der aktualisierten Uhrzeit zurück.

Das ISO DateTime-Format

Um effektiv mit Datums- und Uhrzeitangaben arbeiten zu können, müssen wir zunächst mit ISO und seiner DateTime-Formatzeichenfolge vertraut sein.

Die ISO (International Organization for Standardization) ist eine globale Nichtregierungsorganisation, die internationale Standards für verschiedene Branchen entwickelt und veröffentlicht und so weltweit für Konsistenz und Qualität sorgt.

Einer der von der ISO bereitgestellten Standards ist das Format zur globalen Darstellung von Datum und Uhrzeit.

Eine typische ISO-DateTime-Formatzeichenfolge sieht so aus:

<script src="path/to/dayjs/dayjs.min.js"></script>

• Das T zwischen Tag und Stunde dient als Trennzeichen, das das Datum von der Uhrzeit in der Zeichenfolge trennt.
• Das Z am Ende der Zeichenfolge, das für Zulu steht, gibt an, dass die Zeit in UTC (koordinierte Weltzeit) angegeben ist.

Das native JavaScript-Datumsobjekt bietet eine toISOString()-Methode, die dabei hilft, ein zufälliges Datum in eine ISO-Zeichenfolge umzuwandeln.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Da wir nun das ISO-DateTime-Format verstanden haben, wollen wir einige der wichtigsten Funktionen der Day.js-Bibliothek erkunden.

Entdecken Sie die wichtigsten Funktionen von Day.js

Die Day.js-Bibliothek verfügt über eine Reihe von Funktionen, von denen einige zum Formatieren, Analysieren, Bearbeiten, Abfragen und Validieren von Datums- und Uhrzeitangaben verwendet werden können. Lassen Sie uns untersuchen, wie wir diese Schlüsselfunktionen nutzen können.

Parsing

Die Parsing-Funktion bietet eine einfache Möglichkeit, ein neues Day.js-Objekt mit einem bestimmten Datum und einer bestimmten Uhrzeit zu erstellen. Dies kann durch Übergabe eines nativen JavaScript-Datumsobjekts, einer Datumszeichenfolge oder eines Unix-Zeitstempels an die Funktion dayjs() erfolgen.

npm install dayjs

Formatierung

Mit der Formatierungsfunktion können Sie Datums- und Uhrzeitangaben in einem bestimmten Format anzeigen. Die folgende Methode wird verwendet, um Datums- und Uhrzeitformatierungen durchzuführen.

• format(): Dies empfängt eine Formatzeichenfolge und gibt Datum und Uhrzeit in diesem benutzerdefinierten Format zurück.

import dayjs from 'dayjs';

Manipulieren

Mit der Bearbeitungsfunktion können Sie Datum und Uhrzeit auf unterschiedliche Weise anpassen. Dies kann mit den folgenden Methoden erfolgen.

• add(number, timeUnit): Fügt dem Datum eine bestimmte Zeitspanne hinzu.

const currentDate = dayjs();

• subtract(number, timeUnit): Subtrahiert eine angegebene Zeitspanne vom Datum.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

• startOf(timeUnit): Setzt das Datum auf den Beginn einer bestimmten Zeiteinheit, z. B. den Beginn eines Tages, einer Woche, eines Monats usw.

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• endOf(timeUnit): Setzt das Datum auf das Ende einer bestimmten Zeiteinheit, z. B. das Ende eines Tages, einer Woche, eines Monats usw.

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

Abfragen

Mit der Abfragefunktion können Sie Datum und Uhrzeit überprüfen und vergleichen. Dies kann mit den folgenden Methoden erfolgen, die einen booleschen Wert zurückgeben.

• isBefore(date): Prüft, ob das Datum vor dem angegebenen Datum liegt.

<script src="path/to/dayjs/dayjs.min.js"></script>

• isAfter(date): Prüft, ob das Datum nach dem angegebenen Datum liegt.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• isSame(date): Prüft, ob das Datum mit dem angegebenen Datum übereinstimmt.

npm install dayjs

• isBetween(date1, date2): Prüft, ob das Datum zwischen zwei angegebenen Daten liegt.

import dayjs from 'dayjs';

• isLeapYear(): Prüft, ob das Jahr des Datums ein Schaltjahr ist.

const currentDate = dayjs();

Validierung

Mit der Validierungsfunktion können Sie überprüfen, ob das Format des angegebenen Datums gültig ist oder nicht. Dies kann mit der folgenden Methode erfolgen:

• isValid(): Gibt einen booleschen Wert zurück, der angibt, ob ein Datum korrekt analysiert wurde.

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

Erweiterung der Funktionalitäten mit Plugins

Die Day.js-Bibliothek bietet eine Vielzahl unabhängiger Plugins, die zur Erweiterung ihrer Basisfunktionalitäten verwendet werden können. Dadurch können Entwickler problemlos weitere komplexe Datums- und Uhrzeitformatierungen in ihren Anwendungen durchführen.

Um ein Plugin zu verwenden, müssen Sie es zunächst einbinden und dann dayjs mit der Methode „extend()“ erweitern.

• So binden Sie ein Plugin über CDN ein:

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• So erweitern Sie dayjs mit dem Plugin:

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

• So fügen Sie ein Plugin mithilfe der ES6-Syntax ein und erweitern es:

const formattedDate = dayjs().format("HH:mm:ss DD-MM-YYYY");
console.log(formattedDate); // '19:57:36 17-08-2024'

Lassen Sie uns nun untersuchen, wie wir zwei der verfügbaren Plugins in einer Anwendung verwenden können.

Kalender-Plugin

Das Kalender-Plugin bietet eine praktische Möglichkeit, Datum und Uhrzeit in einem besser lesbaren Format anzuzeigen. Es ist ideal für den Einsatz in Anwendungen wie Ereigniserinnerungen, Projektmanagement, Aufgabenplanern usw.

Sehen wir uns ein einfaches Beispiel an, wie wir dieses Plugin in einer Terminerinnerungs-App verwenden können.

Um zu beginnen, müssen wir die Day.js-Bibliothek und das Kalender-Plugin über ein CDN einbinden.

const futureDate = dayjs().add(5, 'days'); // Adds 5 days to the current date
console.log(futureDate.format()); // Returns the added date in an ISO date format

Als nächstes erweitern wir in unserer Javascript-Datei dayjs mit dem Kalender-Plugin und rufen die Funktion dayjs() auf, um eine neue Day.js-Instanz zu erstellen.

const pastDate = dayjs().subtract(2, 'months');  // Subtracts 2 months from the current date
console.log(pastDate.format()); // Returns the subtracted date in an ISO date format

Das Kalender-Plugin bietet Anpassungsoptionen zum Formatieren der Darstellung von Datum und Uhrzeit. Sie können ein benutzerdefiniertes Format mithilfe eines Objekts mit den folgenden genauen Eigenschaften definieren:

const startOfMonth = dayjs().startOf('month'); // Sets the date to the start of the month
console.log(startOfMonth.format()); // Returns the current date from the start of the month in an ISO date format

Im Objekt maskieren wir Wörter in den Zeichenfolgewerten, indem wir sie in eckige Klammern [] einschließen.

Über dieses Objekt zeigen wir dann Datum und Uhrzeit der Ereignisse in der Ereigniserinnerungs-App an:

const endOfMonth = dayjs().endOf('month'); // Sets the date to the end of the month
console.log(endOfMonth.format()); // Returns the current date from the end of the month in an ISO date format

In diesem Beispiel wird „eventDate“ auf ein Datum festgelegt, das Monate nach dem heutigen Tag liegt. In diesem Fall wird das Datum im Format angezeigt, das in der sameElse-Eigenschaft des customFormat-Objekts bereitgestellt wird.

Wenn das Datum des Ereignisses schließlich zu einem vergangenen Datum wird, beispielsweise einem Tag in der Vorwoche, zum Beispiel:

<script src="path/to/dayjs/dayjs.min.js"></script>

Das Datum wird dann in dem Format angezeigt, das in der lastWeek-Eigenschaft des customFormat-Objekts angegeben ist:

RelativeTime-Plugin

Das RelativeTime-Plugin ist ein häufig verwendetes day.js-Plugin zur Anzeige von Datums- und Zeitunterschieden als relative Aussagen in Benutzeroberflächen.

Das Plugin bietet 4 verschiedene APIs zur Anzeige vergangener und zukünftiger Zeiten:

• .from(date, [withoutSuffix]): Gibt eine relative Zeitzeichenfolge zurück, die beschreibt, wie weit das aufgerufene Datum vom angegebenen Datum entfernt ist. Wenn das Argument withoutSuffix wahr ist, wird das Suffix „ago“ aus der Ausgabe entfernt.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• .to(date, [withoutSuffix]): Gibt eine relative Zeitzeichenfolge zurück, die beschreibt, wie weit das angegebene Datum vom aufgerufenen Datum entfernt ist. Wenn das Argument withoutSuffix wahr ist, wird das Präfix „in“ aus der Ausgabe entfernt.

npm install dayjs

• .fromNow([withoutSuffix]): Gibt eine relative Zeitzeichenfolge zurück, die beschreibt, wie weit das aufgerufene Datum vom aktuellen Datum und der aktuellen Uhrzeit entfernt ist. Wenn das Argument withoutSuffix wahr ist, wird das Suffix „ago“ aus der Ausgabe entfernt.

import dayjs from 'dayjs';

• .toNow([withoutSuffix]): Gibt eine relative Zeitzeichenfolge zurück, die beschreibt, wie weit das aktuelle Datum und die aktuelle Uhrzeit vom aufgerufenen Datum entfernt sind. Wenn das Argument withoutSuffix wahr ist, wird das Präfix „in“ aus der Ausgabe entfernt.

const currentDate = dayjs();

Sehen wir uns ein einfaches Beispiel an, wie wir das RelativeTime-Plugin verwenden können, um den Zeitstempel für Kommentare anzuzeigen, die im Kommentarbereich einer Anwendung gepostet werden.

Wie üblich besteht der erste Schritt darin, die dayjs und das relativeTime-Plugin wie folgt einzubinden:

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

Dann erweitern wir dayjs mit dem relativeTime-Plugin:

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

Danach können wir dann den Zeitpunkt anzeigen, zu dem ein Kommentar gepostet wurde, im Verhältnis zur aktuellen Zeit:

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

Zum Zeitpunkt der Ausführung des obigen Codes wurde die Variable commentPostedTime auf die aktuelle Zeit gesetzt, was dann zu der folgenden relativen Zeitzeichenfolgenausgabe im Kommentar führte:

Browserunterstützung und Beliebtheit bei Entwicklern

Die Day.js-Bibliothek wird in allen modernen Webbrowsern unterstützt. Es verfügt über eine aktive Community mit über 19 Millionen NPM-Downloads.

Die Bibliothek wird aktiv mit über 46.000 Github-Stars und 330 Mitwirkenden gepflegt, um sicherzustellen, dass sie auf dem neuesten Stand und mit den neuesten JavaScript-Standards kompatibel bleibt.

Abschluss

Zusammenfassend lässt sich sagen, dass die Verwendung der Day.js-Bibliothek zur Verarbeitung der Datums- und Uhrzeitvorgänge in Ihrer Anwendung nicht nur Geschwindigkeit und Leistung aufrechterhält, sondern auch Zeit spart, indem gebrauchsfertige Funktionen bereitgestellt werden, die problemlos zum Formatieren und Abfragen verwendet werden können , Daten und Zeiten manipulieren, analysieren und validieren.

Das obige ist der detaillierte Inhalt vonVerwalten Sie Datums- und Uhrzeitvorgänge in Ihrer Anwendung ganz einfach mit Day.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!