Die Day.js-Bibliothek erleichtert die Abwicklung von Datums- und Uhrzeitvorgängen in React-Anwendungen.
Das Datums- und Zeitmanagement ist für jede Anwendung von entscheidender Bedeutung, und React bildet da keine Ausnahme. Obwohl JavaScript integrierte Funktionen zur Datums- und Uhrzeitmanipulation bietet, können diese umständlich sein. Glücklicherweise können viele Bibliotheken von Drittanbietern die Datums- und Zeitverwaltung in React vereinfachen. Eine solche Bibliothek ist Day.js.
Day.js ist eine schlanke Bibliothek zum Parsen, Validieren, Bearbeiten und Formatieren von Datums- und Uhrzeitangaben in JavaScript.
Day.js installieren
Der Day.js Bibliothek ist eine moderne Alternative zu Moment.js, eine weitere Bibliothek zur Verarbeitung von Datums- und Uhrzeitangaben. Day.js bietet eine ähnliche API mit geringerem Platzbedarf und schnellerer Leistung.
Um Day.js in Ihrer React-Anwendung verwenden zu können, müssen Sie es zunächst installieren. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:
npm installiere dayjs
Analysieren und Formatieren von Datums- und Uhrzeitangaben
Day.js bietet eine einfache API zum Analysieren und Formatieren von Datumsangaben. Datum und Uhrzeit können Sie mit dem abrufen dayjs() Methode, aber zuerst müssen Sie sie aus der Day.js-Bibliothek importieren.
Zum Beispiel:
importieren Reagieren aus'reagieren';
importieren dayjs aus'dayjs';FunktionApp() {
const date = dayjs();
Konsole.log (Datum);zurückkehren (
Datum und Zeitmanagement</p>
</div>
)
}
ExportStandard App
Der dayjs() -Methode erstellt ein neues Day.js-Objekt, das ein bestimmtes Datum und eine bestimmte Uhrzeit darstellt. Im obigen Beispiel ist die dayjs() -Methode erstellt ein Day.js-Objekt, das das aktuelle Datum und die aktuelle Uhrzeit darstellt.
In Ihrer Konsole würde das Day.js-Objekt so aussehen:
Der dayjs() Die Methode akzeptiert ein optionales Datumsargument, das eine Zeichenfolge, eine Zahl (Unix-Zeitstempel) oder ein JavaScript-Datumsobjektoder ein anderes Day.js-Objekt. Die Methode generiert ein Day.js-Objekt, das das angegebene Datumsargument darstellt.
Zum Beispiel:
importieren Reagieren aus'reagieren';
importieren dayjs aus'dayjs';FunktionApp() {
const date = dayjs('2023-05-01');
Konsole.log (Datum); // Day.js-Objekt, das das angegebene Datum darstelltconst unixDate = dayjs(1651382400000);
Konsole.log (unixDate); // Day.js-Objekt, das das angegebene Datum darstelltzurückkehren (
Datum und Zeitmanagement</p>
</div>
)
}
ExportStandard App
Die Ausgabe dieses Codeblocks durch das Day.js-Objekt ähnelt der des vorherigen Codeblocks, weist jedoch andere Eigenschaftswerte auf.
Um die als Day.js-Objekte generierten Daten anzuzeigen, müssen Sie die verwenden Format() Methode. Der Format() Mit der Methode der Day.js-Bibliothek können Sie ein Day.js-Objekt als Zeichenfolge gemäß einer bestimmten Formatzeichenfolge formatieren.
Die Methode verwendet einen Formatstring als Argument. Das Zeichenfolgenargument kann eine Kombination aus Buchstaben und Sonderzeichen mit jeweils einer bestimmten Bedeutung enthalten.
Zum Beispiel:
importieren Reagieren aus'reagieren';
importieren dayjs aus'dayjs';FunktionApp() {
const date = dayjs('2023-05-01').Format('dddd, MMMM T, JJJJ'); // Montag, 1. Mai 2023
const time = dayjs().format('HH: mm: ss'); //09:50:23
const unixDate = dayjs(1651382400000).Format('MM/TT/JJ'); // 05/01/22zurückkehren (
{Datum}</p>
{unixDate}</p>
{Zeit}</p>
</div>
)
}
ExportStandard App
Der Datum Die Variable zeigt das Datum in diesem Format an: „Mittwoch, 26. April 2023“. Die Formatzeichenfolge lautet „TTTT, MMMM T, JJJJ“ Wo dddd ist der Wochentag, MMMM ist der Monat in Worten, D ist der Tag des Monats in einer oder zwei Ziffern und JJJJ ist das Jahr in vier Ziffern.
Der unixDate Die Variable wird mithilfe der Formatzeichenfolge als Zeichenfolge formatiert „MM/TT/JJJJ“, Dies stellt den Monat zweistellig, den Tag des Monats zweistellig und das Jahr vierstellig dar.
Der Zeit Die Variable zeigt die aktuelle Uhrzeit im angegebenen Format an. Die Formatzeichenfolge lautet „HH: mm: ss“ bei dem die HH stellt die Stunden dar, die mm stellt die Minuten dar, und die ss stellt die Sekunden dar.
Datum und Uhrzeit manipulieren
Day.js bietet mehrere Methoden, die die Manipulation von Datums- und Uhrzeitangaben erleichtern. Sie können sich auf die beziehen Day.js In der offiziellen Dokumentation finden Sie eine vollständige Liste der verfügbaren Methoden zur Manipulation von Datums- und Uhrzeitangaben.
Zum Beispiel:
importieren Reagieren aus'reagieren';
importieren dayjs aus'dayjs';FunktionApp() {
const date = dayjs().add(7,'Tage').Format('dddd, MMMM T, JJJJ'); // Mittwoch, 16. Juni 2023
const time = dayjs().subtract(2, 'Std').Format('HH: mm: ss'); // 07:53:00zurückkehren (
{Datum}</p>
{Zeit}</p>
</div>
)
}
ExportStandard App
Der obige Codeblock verwendet die hinzufügen() Methode zum Hinzufügen von 7 Tagen zum aktuellen Datum. Der hinzufügen() Mit der Methode können Sie einem Day.js-Objekt eine bestimmte Zeitspanne hinzufügen. Die Methode benötigt zwei Argumente: die Zeit zum Addieren von Zahlen und die Zeiteinheit zum Addieren.
Mit dem subtrahieren() Methode können Sie eine bestimmte Zeitspanne von der subtrahieren Day.js Objekt. Der Zeit Die Variable subtrahiert mithilfe von 2 Stunden von der aktuellen Zeit subtrahieren() Methode.
Relative Zeit anzeigen
Day.js bietet mehrere Methoden, darunter in(), jetzt(), Zu(), Und aus() um die relative Zeit anzuzeigen, z. B. „vor 2 Stunden“ oder „in 3 Tagen“. Um diese Methoden zu verwenden, importieren Sie die relativeZeit Plugin von dayjs/plugin/relativeTime in Ihrer React-Anwendung.
Zum Beispiel:
importieren Reagieren aus'reagieren';
importieren dayjs aus'dayjs';
importieren relativeZeit aus'dayjs/plugin/relativeTime';FunktionApp() {
dayjs.extend (relativeTime);
const date = dayjs().add(7, 'Tage')
const relativeDate = date.fromNow(); // in 7 Tagenconst date2 = dayjs().subtract(2, 'Std');
const relativeDate2 = date2.toNow(); // in 2 Stundenconst lastYear = dayjs().subtract(1, 'Jahr');
const diff = date.from (lastYear); // in einem Jahr
const diff2 = date.to (lastYear) // vor einem Jahrzurückkehren (
{ relativeDate }</p>
{ relativeDate2 }</p>
{ diff }</p>
{ diff2 }</p>
</div>
)
}
ExportStandard App
Der in() Die Funktion zeigt eine relative Zeitzeichenfolge an, die die Differenz zwischen der aktuellen Uhrzeit und einem angegebenen Datum darstellt. In diesem Beispiel ist die in() zeigt den Unterschied zwischen an Datum und die aktuelle Uhrzeit.
Der jetzt() Die Funktion ähnelt der in() Funktion, indem sie eine Zeichenfolge anzeigt, die die Differenz zwischen einem angegebenen Datum und der aktuellen Uhrzeit darstellt. Wenn Sie anrufen jetzt() Funktion gibt sie eine relative Zeitzeichenfolge zur aktuellen Zeit zurück.
Schließlich verwenden Sie die aus() Und Zu() Mit diesen Funktionen können Sie eine relative Zeitzeichenfolge anzeigen, die die Differenz zwischen zwei angegebenen Daten darstellt. In diesem Beispiel erhalten Sie den Unterschied zwischen letztes Jahr Und Datum Verwendung der aus() Und Zu() Funktionen.
Beachten Sie, dass Sie auch ein optionales boolesches Argument an übergeben können in(), jetzt(), aus(), Und Zu() Methoden, um anzugeben, ob das Suffix ein- oder ausgeschlossen werden soll (z. B. „ago“ oder „in“).
Zum Beispiel:
const date = dayjs().add(7, 'Tage')
const relativeDate = date.fromNow(WAHR); // 7 Tageconst date2 = dayjs().subtract(2, 'Std');
const relativeDate2 = date2.toNow(WAHR); // 2 Stunden
const lastYear = dayjs().subtract(1, 'Jahr');
const diff = date.from (lastYear, WAHR) // ein Jahr
const diff2 = date.to (lastYear, WAHR) // ein Jahr
Vorbeigehen FALSCH zum Argument werden die Daten mit dem Suffix angezeigt.
Datum und Uhrzeit effektiv verwalten
Die Verwaltung von Datum und Uhrzeit ist ein entscheidender Aspekt jeder Anwendung, und Day.js bietet eine benutzerfreundliche und flexible Bibliothek für die Abwicklung dieser Vorgänge in einer React-Anwendung. Durch die Integration von Day.js in Ihr Projekt können Sie Datums- und Uhrzeitangaben einfach formatieren, Zeichenfolgen analysieren und Dauern manipulieren.
Darüber hinaus bietet Day.js eine Reihe von Plugins, um seine Funktionalität zu erweitern und es noch leistungsfähiger zu machen. Unabhängig davon, ob Sie einen einfachen Kalender oder ein komplexes Planungssystem erstellen, ist Day.js eine hervorragende Wahl für die Verwaltung von Datum und Uhrzeit in Ihrer React-Anwendung.