Форматирование даты при помощи moment
По умолчанию отображение дат наших моделей некрасиво: Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time). В этом разделе мы покажем, как можно обновить страницу списка BookInstance List из предыдущего раздела, чтобы представить поле due_date
в более удобном формате: December 6th, 2016.
Подход, который будет использован, состоит в создании виртуального свойства в модели BookInstance
, которое будет возвращать отформатированную дату. Форматирование будет производиться с использованием moment, легковесной библиотеки JavaScript для разбора, проверки, изменения и форматирования дат.
Примечание: Можно применять moment для форматирования непосредственно в шаблонах Pug, а можно отформатировать строку в других местах. Использование виртуального свойства позволяет получить дату, отформатированную точно так же, как при помощи due_date
.
Установка moment
Ведите следующую команду в корне проекта:
npm install moment
Создание виртуального свойства
-
Откройте файл ./models/bookinstance.js.
-
В начало файла введите строку для импортирования moment.
jsvar moment = require("moment");
Добавьте виртуальное свойство due_back_formatted
сразу после свойства url.
BookInstanceSchema.virtual("due_back_formatted").get(function () {
return moment(this.due_back).format("MMMM Do, YYYY");
});
Примечание: Метод format
может вывести дату почти в любом формате. Синтаксис для представления различных составляющих даты можно найти в документации.
Обновляем представление
Откройте файл /views/bookinstance_list.pug и замените due_back
на due_back_formatted
.
if val.status!='Available'
//span (Due: #{val.due_back} )
span (Due: #{val.due_back_formatted} )
Вот и все. Если вы перейдёте к All book-instances в боковом меню, вы должны увидеть все даты в привлекательном формате!
Далее
- Вернуться к Express Tutorial Part 5: Displaying library data.
- Перейти к следующему подразделу части 5: Author list page and Genre list page challenge (страница списка авторов и тест- страница списка жанров).