在 JavaScript 中使用 date-fns 处理日期

作者
Tweet
Share
Share
Pin
0 Shares

处理日期并非易事。然而， date-fns 库使得在 JavaScript 环境中管理日期变得相当便捷。

让我们深入了解一下 date-fns 库，它能让我们的日常开发工作变得更加轻松。这个库的一大特点是它的轻量化设计。

安装软件包

为了使用第三方库，我们需要先用 npm 初始化项目。下面是快速完成项目设置的步骤：

我假设你已经安装了 NodeJS 或者有一个适合练习的 IDE。

  • 首先，导航到你想要创建项目的目录。
  • 接着，运行命令 npm init 来初始化项目。
  • 根据你的需要回答初始化过程中出现的所有问题。
  • 现在，通过运行以下命令来安装 date-fns 库：
npm install date-fns
  • 最后，创建一个名为 dateFunctions.js 的文件。

现在，我们已经准备好开始使用 date-fns 库了。 让我们从学习一些常用的方法开始。

验证日期

并非所有日期都是有效的。

例如， 2021-02-30 这样的日期是不存在的。那么，我们该如何检查一个日期是否有效呢？

date-fns 库中的 isValid 方法可以帮助我们确定给定的日期是否有效。

请看下面的代码，观察在日期有效性方面它的工作原理。

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

如果你运行上面的代码，你可能会认为 2021 年 2 月 30 日是有效的。 但事实并非如此！

这是为什么呢？

JavaScript 会将 2 月份多余的天数转换为 2021 年 3 月 1 日，这是一个有效的日期。 为了验证这一点，可以将 new Date("2021, 02, 30") 打印到控制台。

console.log(new Date("2021, 02, 30"));

date-fns 库提供了一个名为 parse 的方法来解决这个问题。 parse 方法会解析你提供的日期，并返回准确的结果。

请看以下代码示例：

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

格式化日期

处理日期的一个基本操作是根据需要对其进行格式化。我们可以使用 date-fns 库中的 format 方法将日期格式化成各种不同的形式。

例如，将日期格式化为 23-01-1993，1993-01-23 10:43:55，Tuesday，January 23rd 1993 等等。运行以下代码可以得到上述格式的日期：

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

你可以在 这里 找到完整的格式列表。

增加天数

addDays 方法用于计算某个日期之后指定天数的日期，或者说，设定一个最后期限。

简单来说，我们可以将天数加到任何日期上，以获得几天后的日期。它有很多应用场景。

假设你的生日是在 X 天之后，而那几天你很忙。 为了不忘记你的生日，你可以简单地使用 addDays 方法来在 X 天后提醒你。下面是代码示例：

const { format, addDays } = require("date-fns");

const today = new Date();

// 6 天后的生日
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

与 addDays 方法类似，还有其他方法，如 addHours、subHours、addMinutes、subMinutes、addSeconds、subSeconds、subDays、addWeeks、subWeeks、addYears、subYears 等。你可以通过它们的方法名轻松推断出其功能。

不妨自己尝试一下。

格式化距离

从头开始编写代码来比较日期是一件非常繁琐的事情。 那么，我们为什么要比较日期呢？

在很多应用中，你都会看到日期比较功能。 例如，社交媒体网站会显示“1 分钟前”、“12 小时前”、“1 天前”等信息。 在这里，我们使用从发布日期和时间到当前日期和时间的日期比较。

formatDistance 方法可以实现相同的功能。 它返回两个给定日期之间的间隔时间。

让我们编写一个程序来计算你的年龄：

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Age: ${formatDistance(presentDay, birthday)}`);

获取间隔中的每一天

假设你需要查找未来 X 天的日期和星期几。 eachDayOfInterval 方法可以帮助我们找到开始日期和结束日期之间的所有天数。

让我们来找出从今天开始的未来 30 天的日期：

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
   console.log(format(day, "PPPP"));
});

最大值和最小值

max 和 min 方法分别用于找出给定日期中的最大值和最小值。 date-fns 中的方法都非常直观，很容易推断出它们的功能。 让我们来写一些代码：

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);

判断是否相等

你很容易猜到 isEqual 方法的功能。正如你所想， isEqual 方法用于检查两个日期是否相等。 请看下面的示例代码：

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

总结

如果要讨论 date-fns 库中的每个方法，那可能需要几天时间才能完成。 学习任何库的最佳方式是从熟悉其基本方法开始，然后阅读文档以获取更多信息。 这也适用于 date-fns 库。

在本教程中，你已经学习了一些基本方法。 更具体的使用方法可以在 文档 中找到，或者你可以考虑参加一些在线课程，例如 JavaScript, jQuery 和 JSON。

祝你编码愉快！👨‍💻