So handhaben Sie die Datums- und Zeitverwaltung in React mithilfe von Moment.js

Die Verwaltung von Datum und Uhrzeit in React kann für diejenigen, die sich in diesem Bereich nicht auskennen, eine Herausforderung darstellen. Glücklicherweise gibt es mehrere Bibliotheken, die Ihnen bei der Datums- und Zeitverwaltung in React helfen können. Eine dieser Bibliotheken ist Moment.js.

Moment.js ist eine schlanke Bibliothek mit einer einfachen Möglichkeit, Datums- und Uhrzeitangaben in JavaScript zu bearbeiten und zu formatieren.

Installieren der Moment.js-Bibliothek

Moment.js Bibliothek ist eine Paket zum Verwalten von Datums- und Uhrzeitoperationen in JavaScript. Die Installation der Moment.js-Bibliothek ist der erste Schritt zur Verwendung von Moment.js in Ihrer React-Anwendung. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm-Installationszeitpunkt

Sobald die Installation abgeschlossen ist, können Sie Moment.js in Ihrer React-Komponente verwenden.

Verwenden von Moment.js zum Anzeigen von Datum und Uhrzeit

Sie können Moment.js verwenden, um Datums- und Uhrzeitangaben in einem bestimmten Format in Ihrer React-App anzuzeigen. Um die Bibliothek zu verwenden, importieren Sie Moment aus dem installierten Paket.

importieren Reagieren aus'reagieren';
importieren Moment aus'Moment';
FunktionApp() {
const date = moment().format(„MMMM TT JJJJ“);
const time = moment().format(„HH mm ss“);
zurückkehren (



 HeuteDas Datum ist { Datum } 

 Die Zeit ist { time } </p>
 </div>
 )
}
ExportStandard App

Der Moment() Die Methode erstellt ein neues Momentobjekt, das einen bestimmten Zeitpunkt darstellt. Der Format() Die Methode formatiert ein Momentobjekt in eine Zeichenfolgendarstellung.

Der Format() Die Methode akzeptiert ein Zeichenfolgenargument, das das gewünschte Format für das Momentobjekt angibt. Das Zeichenfolgenargument kann eine Kombination aus Buchstaben und Sonderzeichen mit jeweils einer bestimmten Bedeutung enthalten.

Einige dieser Sonderzeichen sind:

• JJJJ: Jahr mit vier Ziffern
• JJ: Jahr mit zwei Ziffern
• MM: Monat mit zwei Ziffern
• M: Monat mit einer oder zwei Ziffern
• MMMM: Monat in Worten
• DD: Tag des Monats mit zwei Ziffern
• D: Tag des Monats mit einer oder zwei Ziffern
• Tun: Tag des Monats mit der Ordnungszahl
• HH: Stunde mit zwei Ziffern
• H: Stunde mit einer oder zwei Ziffern
• mm: Minute mit zwei Ziffern
• M: Minute mit einer oder zwei Ziffern
• ss: Sekunde mit zwei Ziffern
• S: Sekunde mit einer oder zwei Ziffern

Wenn das App Wenn die Komponente im vorherigen Codeblock gerendert wird, werden das aktuelle Datum und die aktuelle Uhrzeit im angegebenen Format auf dem Bildschirm angezeigt.

Der Moment() Die Methode kann ein String-Datums- oder Uhrzeitargument annehmen. Wenn das Moment() Wenn die Methode über ein String-Datums- oder Uhrzeitargument verfügt, erstellt sie ein Momentobjekt, das dieses Datum oder diese Uhrzeit darstellt. Die Zeichenfolge kann in verschiedenen Formaten vorliegen, z. B. ISO 8601, RFC 2822 oder Unix-Zeitstempel.

Zum Beispiel:

const Datum = Moment('1998-06-23').Format(„MMMM TT JJJJ“);

Verwenden von Moment.js zum Manipulieren von Datum und Uhrzeit

Die Moment.js-Bibliothek bietet außerdem mehrere Methoden zum Bearbeiten von Datums- und Uhrzeitangaben. Mit diesen Methoden können Sie Zeitintervalle addieren oder subtrahieren, bestimmte Werte für Datums- und Zeitkomponenten festlegen und andere anwendbare Vorgänge ausführen.

Zum Beispiel:

importieren Reagieren aus'reagieren';
importieren Moment aus'Moment';
FunktionApp() {
const morgen = moment().add(1, 'Tag').Format(„Mach MMMM, JJJJ“);
const time = moment().subtract(1, 'Stunde').Format(„HH: mm: ss“);
const lastYear = moment().set('Jahr', 2022).Satz('Monat', 1).Format(„Mach MMMM, JJJJ“);
const Stunde = Moment().get('Stunde');
zurückkehren (

„App“>
MorgenDas Datum ist {morgen}

Dies war die Zeit: { time }, vor einer Stunde</p>

{ letztes Jahr }</p>

{ Stunde }</p>
 </div>
 )
}
ExportStandard App

In diesem Beispiel Sie Deklarieren Sie die folgenden JavaScript-Variablen: morgen, Zeit, letztes Jahr, Und Stunde. Diese vier Variablen nutzen verschiedene Methoden der Moment.js-Bibliothek, um Datum und Uhrzeit zu manipulieren.

Der morgen Variable verwendet die hinzufügen() Methode zum Hinzufügen eines Tages zum aktuellen Datum. Der hinzufügen() Die Methode fügt einem bestimmten Moment-Objekt Zeit hinzu. Die Funktion benötigt zwei Argumente: einen Dauerwert und eine Zeichenfolge, die die hinzuzufügende Zeiteinheit darstellt. Die Einheit könnte sein Jahre, Monate, Wochen, Tage, Std., Protokoll, Und Sekunden.

Sie können die Zeit auch mit dem subtrahieren subtrahieren() Methode. In diesem Fall ist die Zeit Variable verwendet die subtrahieren() Methode zum Subtrahieren einer Stunde von der aktuellen Zeit.

Verwendung der Satz() Methode, die letztes Jahr Die Variable setzt das Jahr auf 2022 und den Monat auf Februar (da Januar als Monat 0 dargestellt wird). Der Satz() Die Methode weist einem Moment-Objekt eine bestimmte Zeiteinheit zu.

Mit dem erhalten() Mit dieser Methode können Sie eine bestimmte Zeit abrufen. Der erhalten() Die Methode benötigt ein einzelnes Argument, eine Zeiteinheit.

Verwenden von Moment.js zum Parsen von Datum und Uhrzeit

Eine weitere hilfreiche Funktion von Moment.js ist die Fähigkeit, Datums- und Uhrzeitangaben aus Zeichenfolgen zu analysieren. Dies kann nützlich sein, wenn Sie mit Daten aus externen Quellen arbeiten.

Um ein Datum oder eine Uhrzeit aus einer Zeichenfolge zu analysieren, müssen Sie Folgendes verwenden Moment() Methode. In diesem Fall ist die Moment() Die Methode benötigt zwei Argumente, die Datumszeichenfolge und eine Formatzeichenfolge.

Hier ist ein Beispiel dafür, wie Sie das verwenden können Moment() Methode zum Analysieren von Datum und Uhrzeit:

importieren Reagieren aus'reagieren';
importieren Moment aus'Moment';
FunktionApp() {
const Datum = Moment('2920130000', „Do-MMMM-JJJJ“).miteinander ausgehen();
Konsole.log( Datum);
zurückkehren (

</div>
 )
}
ExportStandard App

Im Codeblock oben: Moment() Die Methode analysiert diese Zeichenfolge „2920130000“ unter Verwendung der Formatzeichenfolge „Do-MMMM-YYYY“. Der miteinander ausgehen() Methode konvertiert das Momentobjekt in ein natives JavaScript-Datumsobjekt.

Der miteinander ausgehen() Die Methode akzeptiert keine Argumente und gibt ein JavaScript-Datumsobjekt zurück, das dasselbe Datum und dieselbe Uhrzeit wie das Moment-Objekt darstellt.

Relative Zeit anzeigen

Mit der Moment.js-Bibliothek können Sie relative Zeit formatieren und anzeigen. Dazu nutzen Sie die in() Und jetzt() Methoden. Diese Methoden zeigen die Zeit zwischen einem bestimmten Datum und der aktuellen Uhrzeit an.

Zum Beispiel:

importieren Reagieren aus'reagieren';
importieren Moment aus'Moment';
FunktionApp() {
const gestern = moment().subtract(7, 'Tag');
const time1 = gestern.fromNow(); // vor 7 Tagen
const time2 = gestern.toNow(); // in 7 Tagen
zurückkehren (



{ time1 }</p>

{ time2 }</p>
 </div>
 )
}
ExportStandard App

In diesem Beispiel ist die in() Die Methode gibt die seit dem angegebenen Datum verstrichene relative Zeit zurück, während die jetzt() Die Methode gibt die relative Zeit bis zum aktuellen Zeitpunkt zurück.

Mehr zu Moment.js

Moment.js ist eine leistungsstarke Bibliothek, die eine einfache Möglichkeit bietet, Datums- und Uhrzeitangaben in JavaScript zu bearbeiten und zu formatieren. Sie haben gelernt, wie Sie Datums- und Uhrzeitangaben in React mithilfe von Moment.js bearbeiten, anzeigen und analysieren.

Moment.js bietet mehrere andere Methoden, z. B. local, startOf, endOf usw. Mit den bereitgestellten Informationen sind Sie jedoch bestens darauf vorbereitet, Moment.js in Ihrer React-Anwendung zu verwenden.