使用 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} )

就是这样。如果您转到侧边栏中的所有图书实例，您现在应该会看到所有到期日期都更具吸引力了！

后续步骤