使用 Luxon 進行日期格式化

我們模型中日期的預設渲染非常醜陋：Mon Apr 10 2020 15:49:58 GMT+1100 (AUS Eastern Daylight Time)。在本節中，我們將展示如何更新上一節中的BookInstance 列表頁面，以更友好的格式顯示due_date欄位：Apr 10th, 2023。

我們將使用的方法是在我們的BookInstance模型中建立一個虛擬屬性，該屬性返回格式化的日期。我們將使用luxon進行實際的格式化，這是一個功能強大、現代且友好的庫，用於解析、驗證、操作、格式化和本地化日期。

注意：可以使用luxon直接在 Pug 模板中格式化字串，或者我們可以在其他地方格式化字串。使用虛擬屬性使我們能夠以與當前獲取due_date完全相同的方式獲取格式化的日期。

安裝 Luxon

在專案的根目錄中輸入以下命令

bash
npm install luxon

建立虛擬屬性

  1. 開啟./models/bookinstance.js。
  2. 在頁面頂部，匯入luxon。
    js
    const { DateTime } = require("luxon");

在 URL 屬性之後新增虛擬屬性due_back_formatted。

js
BookInstanceSchema.virtual("due_back_formatted").get(function () {
  return DateTime.fromJSDate(this.due_back).toLocaleString(DateTime.DATE_MED);
});

注意：Luxon 可以匯入多種格式的字串並匯出到預定義格式和自由格式。在本例中，我們使用fromJSDate()匯入 JavaScript 日期字串，並使用toLocaleString()以英語DATE_MED格式輸出日期：Apr 10th, 2023。有關其他格式和日期字串國際化的資訊，請參閱 Luxon 文件中的格式化部分。

更新檢視

開啟/views/bookinstance_list.pug並將due_back替換為due_back_formatted。

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

就是這樣。如果您轉到側邊欄中的所有圖書例項，您現在應該會看到所有到期日期都更具吸引力了！

後續步驟