Datumsformatierung mit luxon
Die standardmäßige Darstellung von Daten 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 Feld due_date in einem benutzerfreundlicheren 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 verwenden luxon, eine leistungsstarke, moderne und benutzerfreundliche Bibliothek zum Parsen, Validieren, Manipulieren, Formatieren und Lokalisieren von Daten, um die eigentliche Formatierung vorzunehmen.
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. Durch die Verwendung einer virtuellen Eigenschaft können wir das formatierte Datum auf genau die gleiche Weise abrufen, wie wir derzeit das due_date erhalten.
Luxon installieren
Geben Sie den folgenden Befehl im Stammverzeichnis des Projekts ein:
npm install luxon
Die virtuelle Eigenschaft erstellen
-
Öffnen Sie ./models/bookinstance.js.
-
Importieren Sie luxon am Anfang der Seite.
jsconst { DateTime } = require("luxon");
Fügen Sie die virtuelle Eigenschaft due_back_formatted direkt nach der URL-Eigenschaft hinzu.
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 formatierten Formaten exportieren. In diesem Fall verwenden wir fromJSDate(), um eine JavaScript-Datumskette zu importieren, und toLocaleString(), um das Datum im DATE_MED Format in Englisch auszugeben: Apr 10th, 2023.
Informationen zu anderen Formaten und zur Internationalisierung von Datumszeichenfolgen finden Sie in der Luxon-Dokumentation zum Formatieren.
Ansicht aktualisieren
Öffnen Sie /views/bookinstance_list.pug und ersetzen Sie due_back durch due_back_formatted.
if val.status != 'Available'
//span (Due: #{val.due_back} )
span (Due: #{val.due_back_formatted} )
Das war's. Wenn Sie in der Seitenleiste zu All book-instances gehen, sollten Sie nun sehen, dass alle Fälligkeitsdaten deutlich attraktiver sind!
Nächste Schritte
- Kehren Sie zurück zu Express Tutorial Teil 5: Anzeigen von Bibliotheksdaten.
- Fahren Sie mit dem nächsten Unterartikel von Teil 5 fort: Herausforderung der Autorenseite und Genres-Seite.