Mehrere Ansätze zur Formatierung des Datums in React

Beim Erstellen von React-Anwendungen müssen Entwickler einen Weg finden, mit Datumsangaben zu arbeiten.

Dies beinhaltet das Formatieren, Analysieren und Bearbeiten der Datumswerte. Es ist schwer, sich eine React-App vorzustellen, die auf die eine oder andere Weise keine Daten enthält.

Das Problem mit Datumsangaben in der Programmierung besteht darin, dass Werte nicht immer so formatiert oder klassifiziert werden, wie Sie es möchten. Manchmal sind Datumswerte als Strings, Arrays oder sogar Objekte verfügbar.

In anderen Fällen enthalten sie nur das Jahr, während andere Datumswerte alles von Jahren bis zu Millisekunden enthalten. JavaScript enthält das Objekt Date, um dieses Problem zu lösen, das einige gute Methoden zum Verwalten von Daten bietet.

Für komplexere Anforderungen wie Internationalisierung und Addieren/Subtrahieren von Zeitwerten ist es jedoch immer noch unzureichend.

Entwickler haben dieses Problem gelöst, indem sie zahlreiche Bibliotheken für die Arbeit mit Datumsangaben in JavaScript erstellt haben. Selbst die erfahrensten Webentwickler entscheiden sich für die Verwendung externer Bibliotheken, um direkt mit der Date-API zu interagieren.

Diese externen Pakete bieten eine einfachere API zum Formatieren, Analysieren und Bearbeiten des Datums. Sie sparen JavaScript-Entwicklern Energie und Zeit, die sie für die Verwaltung von Daten aufwenden.

Die beliebtesten Bibliotheken sind moment, date-fns und luxor, um nur einige zu nennen.

Datumsobjekt in JavaScript

Das Date-Objekt in JavaScript ist nicht völlig nutzlos. Es bietet einige nützliche Methoden für einfache Operationen, wie zum Beispiel .getDay(), das den Wochentag eines bestimmten Datumswerts zurückgibt.

Das Objekt Date kann nützlich sein, wenn Sie alle Vorbehalte und komplizierten Details jeder Methode kennen. Der größte Nachteil des Date-Objekts im Vergleich zu externen Bibliotheken ist, dass es veränderlich ist.

Diese Funktion kann zu Inkonsistenzen auf Ihrer Website führen. Beispielsweise ist es leicht, versehentlich änderbare Datumswerte zu überschreiben und am Ende ohne Wissen das falsche Datum anzuzeigen.

Hier sind die nützlichsten Methoden, die für Datums-Objekte verfügbar sind:

• .toDateString(): konvertiert den Datumswert in eine verbale Zeichenfolge, die viel besser lesbar ist. Beispielsweise wird das heutige Datum als Zeichenfolge 'Fr Dec 17, 2021' formatiert.
• .getDay(): gibt den Wochentag zurück. Wenn es heute aufgerufen wird, würde es Fridag zurückgeben.

Lesen Sie die offizielle Dokumentation auf MDN, um mehr über das Date-Objekt und alle damit verbundenen Methoden zu erfahren.

Formatierung in React mit der date-fns-Bibliothek

Datumsbibliotheken wie moment oder date-fns sind die einfachsten Lösungen zur Verwaltung von Daten in React.

Es gibt auch die Bibliothek react-moment, die eine React-Komponente mit allen Funktionen ihrer Schwesterbibliothek bietet. Diese Bibliotheken sind großartige Lösungen für die Handhabung von Datum und Uhrzeit in React-Anwendungen.

Zunächst müssen Sie das Paket date-fns installieren, indem Sie in der Shell folgenden Befehl eingeben:

npm install date-fns

Nach der Installation können Sie die Bibliothek importieren.

Eines der großartigen Dinge am date-fns-Paket ist modular. Sie müssen nicht das gesamte Paket importieren, sondern nur die Funktionen, die Sie benötigen.

Dies ist ein extrem leichter Ansatz und stellt die hohe Leistung Ihrer App sicher. Hier ist ein Beispiel für die Formatierung eines Datums mit date-fns:

import "./styles.css";
import {format} from 'date-fns'
export default function App() {
  return (
    <div className="App">
      {format(new Date(), "'We are currently in' MMMM")}
    </div>
  );
}

Wie Sie auf codesandbox sehen können, lautet die endgültige Ausgabe: We are currently in December.

Dies ist eine einfache Demonstration der Nützlichkeit der Bibliothek date-fns und ihrer Formatierungsleistung. In diesem Fall verwenden wir einen modularen Ansatz und importieren nur die Funktion format.

Dann rufen wir es in unserem JSX zwischen geschweiften Klammern auf, sodass der Aufruf der Funktion als normales JavaScript interpretiert wird. Mit geschweiften Klammern können wir auch eine Instanz des Objekts Date erhalten, das das erste Argument für die Funktion format() ist.

Im zweiten Argument geben wir den Text an, den wir ausgeben möchten und wie wir ihn formatieren möchten. In diesem Fall haben wir die Formatierung MMMM gewählt, die den vollständigen Namen des Monats zurückgibt.

Wir hätten MMM wählen können, und die Ausgabe wäre Wir befinden uns derzeit im Dezember. Dies ist nur eine einfache Demonstration der Formatierungsfähigkeiten dieses Pakets.

Um ein vollständigeres Bild zu erhalten, sehen Sie sich die Dokumentation für ihre Funktion format() an.

Die Vorteile der Verwendung von date-fns für die Formatierung in React

Die Bibliothek hat gegenüber ihren Alternativen eine Reihe von Vorteilen. Wir haben bereits seinen modularen Ansatz erwähnt, der seine Geschwindigkeit weiter erhöht.

Die Bibliothek bietet eine Abstraktionsebene für die Arbeit mit Date-Objekten, ist also vertraut und erfindet das Rad nicht neu. Es unterstützt viele Zeitzonen und Sprachen.

date-fns hat eine unkomplizierte API. Am wichtigsten ist, dass es mit einer informativen Dokumentation geliefert wird, die Anwendungsfälle im Detail erklärt.

Wir haben bereits gezeigt, dass es mit React sehr gut funktioniert. Die Bibliothek funktioniert auch wunderbar mit TypeScript und Flow.