我們模型的日期預設呈現很難看: 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,