Datumsformatierung mit luxon

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

Unser Ansatz besteht darin, eine virtuelle Eigenschaft in unserem BookInstance-Modell zu erstellen, 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 Zeichenketten direkt in unseren Pug-Templates zu formatieren, oder wir könnten das Formatieren der Zeichenkette an mehreren anderen Stellen vornehmen. Eine virtuelle Eigenschaft ermöglicht es uns, das formatierte Datum genau so zu erhalten, wie wir derzeit das due_date abrufen.

Luxon installieren

Geben Sie den folgenden Befehl im Stammverzeichnis des Projekts ein:

bash
npm install luxon

Die virtuelle Eigenschaft erstellen

  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 Zeichenketten in vielen Formaten importieren und sowohl in vordefinierte als auch in freie Formate exportieren. In diesem Fall verwenden wir fromJSDate(), um eine JavaScript-Datumskette zu importieren, und toLocaleString(), um das Datum im DATE_MED-Format auf Englisch auszugeben: Apr 10th, 2023. Informationen zu anderen Formaten und zur Internationalisierung von Datumszeichenketten finden Sie in der Luxon-Dokumentation zur Formatierung.

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 jetzt im Seitenmenü zu All book-instances gehen, sollten Sie feststellen, dass alle Fälligkeitsdaten weitaus ansprechender sind!

Nächste Schritte