我们模型的日期预设呈现很难看: Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)。在本节中,我们将展示如何更新上一节中的 書本實例 BookInstance 列表页面,以更友好的格式显示due_date字段:December 6th, 2016。

我们将使用的方法,是在我们的BookInstance模型中,创建一个返回格式化日期的虚拟屬性。我们将使用moment 来做实际的格式化,这是一个轻量级JavaScript日期库,用于解析,验证,操作和格式化日期。

注意: 我们可以直接在 Pug 模板中,使用 moment 格式化字符串,或者可以在许多其它地方格式化字符串。使用虚拟属性,可以使我们获得格式化的日期,這与我们当前获取 due_date 的方式完全相同。

安装 moment

在项目的根目录,输入下列命令

npm install moment

创建虚拟属性

  1. 打开 ./models/bookinstance.js.
  2. 在此页面最上方,引用 moment
    var moment = require('moment');

在 url 属性后面,加入虚拟属性 due_back_formatted

BookInstanceSchema
.virtual('due_back_formatted')
.get(function () {
  return moment(this.due_back).format('MMMM Do, YYYY');
});

注意: 格式化方法可以使用几乎任何模式显示日期。moment文档中,可以找到表示不同日期组件的语法。

更新视图

打开 /views/bookinstance_list.pug ,然后用  due_back_formatted 取代 due_back

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

这就是本章节的全部了。如果你访问侧边栏的 All book-instances ,你应该会看到所有的归还日期都更吸引人了!

下一步

 

文档标签和贡献者

此页面的贡献者: edgar-chen
最后编辑者: edgar-chen,