Datumsformatierung mit Luxon

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

Der Ansatz, den wir verwenden werden, ist die Erstellung einer virtuellen Eigenschaft in unserem BookInstance-Modell, die das formatierte Datum zurückgibt. Die eigentliche Formatierung führen wir mit luxon durch, 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 Strings direkt in unseren Pug-Vorlagen zu formatieren, oder wir könnten den String an verschiedenen anderen Stellen formatieren. Die Verwendung einer virtuellen Eigenschaft ermöglicht es uns, das formatierte Datum genau so zu erhalten, wie wir derzeit das due_date erhalten.

Luxon installieren

Geben Sie den folgenden Befehl im Root-Verzeichnis des Projekts ein:

bash
npm install luxon

Die virtuelle Eigenschaft erstellen

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

  2. Importieren Sie luxon am Anfang der Datei.

    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 Strings in vielen Formaten importieren und sowohl in vordefinierten als auch frei gestalteten Formaten exportieren. In diesem Fall verwenden wir fromJSDate(), um einen JavaScript-Datumsstring zu importieren, und toLocaleString(), um das Datum im DATE_MED-Format in Englisch auszugeben: Apr 10th, 2023. Für Informationen über andere Formate und Internationalisierung von Datumsstrings siehe die Luxon-Dokumentation zum Formatieren.

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 im Seitenmenü zu Alle Buchinstanzen gehen, sollten Sie jetzt sehen, dass alle Fälligkeitsdaten deutlich ansprechender sind!

Nächste Schritte