Datumsformatierung mit luxon

Die Standardanzeige von Daten aus unseren Modellen ist sehr unattraktiv: Mon Apr 10 2020 15:49:58 GMT+1100 (AUS Eastern Daylight Time). In diesem Abschnitt zeigen wir, wie Sie die Seite Buchinstanzliste aus dem vorherigen Abschnitt aktualisieren können, um das Feld due_date in einem freundlicheren Format darzustellen: Apr 10th, 2023.

Der Ansatz, den wir verwenden werden, ist das Erstellen einer virtuellen Eigenschaft in unserem BookInstance-Modell, die das formatierte Datum zurückgibt. Wir werden das eigentliche Formatieren mit luxon durchführen, einer leistungsstarken, modernen und benutzerfreundlichen Bibliothek zum Parsen, Validieren, Manipulieren, Formatieren und Lokalisieren von Daten.

Hinweis: Es ist möglich, luxon zu verwenden, um die Zeichenfolgen direkt in unseren Pug-Vorlagen zu formatieren, oder wir könnten die Zeichenfolge an mehreren anderen Stellen formatieren. Die Verwendung einer virtuellen Eigenschaft ermöglicht es uns, das formatierte Datum auf genau die gleiche Weise zu erhalten wie derzeit das due_date.

Luxon installieren

Geben Sie den folgenden Befehl im Stammverzeichnis des Projekts ein:

bash
npm install luxon

Erstellen der virtuellen Eigenschaft

  1. Öffnen Sie ./models/bookinstance.js.

  2. Importieren Sie luxon am Anfang der Seite.

    js
    const { DateTime } = require("luxon");

Fügen Sie die virtuelle Eigenschaft due_back_formatted direkt nach der URL-Eigenschaft hinzu.

js
BookInstanceSchema.virtual("due_back_formatted").get(function () {
  return DateTime.fromJSDate(this.due_back).toLocaleString(DateTime.DATE_MED);
});

Hinweis: Luxon kann Zeichenfolgen in vielen Formaten importieren und sowohl in vordefinierten als auch in frei gestaltbaren Formaten exportieren. In diesem Fall verwenden wir fromJSDate(), um eine JavaScript-Datum-Zeichenfolge zu importieren und toLocaleString(), um das Datum im DATE_MED-Format in Englisch auszugeben: Apr 10th, 2023. Für Informationen über andere Formate und die Internationalisierung von Datumszeichenfolgen sehen Sie in der Luxon-Dokumentation zum Formatieren nach.

Die Ansicht aktualisieren

Öffnen Sie /views/bookinstance_list.pug und ersetzen Sie due_back durch due_back_formatted.

pug
      if val.status != 'Available'
        //span  (Due: #{val.due_back} )
        span  (Due: #{val.due_back_formatted} )

Das war's. Wenn Sie zu Alle Buchinstanzen in der Seitenleiste gehen, sollten Sie nun sehen, dass alle Fälligkeitsdaten viel attraktiver sind!

Nächste Schritte