使用 Day.js 轻松处理应用程序中的日期和时间操作

介绍

在 JavaScript 中处理日期和时间可能具有挑战性，尤其是在需要特定格式时。这种复杂性通常会导致应用程序内的日期和时间不一致。因此，开发人员转向外部工具和库（例如 Day.js）来轻松、更准确地管理这些操作。

在本文中，我们将探讨 Day.js 是什么、它的基本功能、如何在项目中使用它、如何使用插件扩展其功能以及它的浏览器支持。

什么是 Day.js？

Day.js 是一个易于使用的轻量级 JavaScript 库，专为处理各种日期和时间操作而设计，允许它们在 Web 应用程序中以易于阅读的格式呈现。

该库可以在客户端（浏览器）和服务器端（Node.Js）环境中使用。

在现代 Web 开发中，开发人员在构建应用程序时力求优先考虑速度和性能。大型导入和庞大的库文件是这些属性的两个常见阻碍因素。

幸运的是，Day.js 通过 2KB 的紧凑文件大小解决了这些问题，使其成为管理日期和时间操作而不影响应用程序性能的理想选择。

安装

要开始在应用程序中使用 Day.js 库，您首先需要包含它。

要在客户端使用该库，请在

中包含以下脚本： HTML 文档的标签。

<script src="path/to/dayjs/dayjs.min.js"></script>

或者，您可以通过 CDN（例如 jsdeliver CDN）访问该库。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

要将库安装为应用程序中的依赖项，请运行以下命令：

npm install dayjs

接下来，将 dayjs 导入到您的 javascript 文件中：

import dayjs from 'dayjs';

要创建新的 Day.js 实例，请调用 dayjs() 函数。如果没有传递参数，它将返回一个表示当前日期和时间的对象：

const currentDate = dayjs();

然后您可以引用该对象来对日期和时间执行各种操作。

由于 Day.js 对象是不可变的，任何修改该对象的操作都将返回一个具有更新日期和时间的新实例。

ISO 日期时间格式

为了有效地处理日期和时间，我们首先需要熟悉 ISO 及其日期时间格式字符串。

ISO（国际标准化组织）是一个全球性非政府组织，负责制定和发布各行业的国际标准，确保全球范围内的一致性和质量。

ISO 提供的标准之一是表示全球日期和时间的格式。

典型的 ISO 日期时间格式字符串如下所示：

<script src="path/to/dayjs/dayjs.min.js"></script>

• 日和小时之间的 T 充当分隔符，将字符串中的日期与时间分开。
• 字符串末尾的 Z，代表 Zulu，表示时间采用 UTC（协调世界时）。

原生 JavaScript Date 对象提供了 toISOString() 方法，该方法有助于将随机日期转换为 ISO 字符串。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

现在我们了解了 ISO DateTime 格式，让我们探索一下 Day.js 库的一些关键功能。

探索 Day.js 的主要特性

Day.js 库具有一系列功能，其中一些功能可用于格式化、解析、操作、查询和验证日期和时间。让我们探索如何利用这些关键功能。

解析

解析功能提供了一种简单的方法来创建具有特定日期和时间的新 Day.js 对象。这可以通过将本机 JavaScript 日期对象、日期字符串或 Unix 时间戳传递给 dayjs() 函数来完成。

npm install dayjs

格式化

格式化功能允许您以特定格式显示日期和时间。以下方法用于对日期和时间进行格式化。

• format()：接收格式字符串并以自定义格式返回日期和时间。

import dayjs from 'dayjs';

操纵

操纵功能允许您以不同的方式调整日期和时间。这可以使用以下方法来完成。

• add(number, timeUnit)：在日期上添加指定的时间量。

const currentDate = dayjs();

• subtract(number, timeUnit)：从日期中减去指定的时间量。

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

• startOf(timeUnit)：将日期设置为特定时间单位的开始，例如一天、一周、一个月等的开始。

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• endOf(timeUnit)：将日期设置为特定时间单位的结束时间，例如一天、一周、一个月等的结束时间。

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

查询

查询功能允许您检查和比较日期和时间。这可以使用以下返回布尔值的方法来完成。

• isBefore(date)：检查日期是否早于指定日期。

<script src="path/to/dayjs/dayjs.min.js"></script>

• isAfter(date)：检查日期是否在指定日期之后。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• isSame(date)：检查日期是否与指定日期相同。

npm install dayjs

• isBetween(date1, date2)：检查日期是否在两个指定日期之间。

import dayjs from 'dayjs';

• isLeapYear()：检查日期的年份是否为闰年。

const currentDate = dayjs();

正在验证

验证功能提供了一种检查所提供的日期格式是否有效的方法。这可以使用以下方法来完成：

• isValid()：返回一个布尔值，指示日期是否正确解析。

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

使用插件扩展功能

Day.js 库提供了各种独立的插件，可用于扩展其基本功能。这使开发人员能够在其应用程序中轻松执行进一步复杂的日期和时间格式化。

要使用插件，首先需要包含它，然后使用extend()方法扩展dayjs。

• 通过 CDN 包含插件：

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

• 要使用插件扩展dayjs：

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

• 使用 ES6 语法包含和扩展插件：

const formattedDate = dayjs().format("HH:mm:ss DD-MM-YYYY");
console.log(formattedDate); // '19:57:36 17-08-2024'

现在，让我们探索如何在应用程序中使用两个可用的插件。

日历插件

日历插件提供了一种以更易于理解的格式显示日期和时间的便捷方法。它非常适合用于事件提醒、项目管理、任务计划等应用。

让我们看一个简单的示例，了解如何在事件提醒应用程序中使用此插件。

首先，我们需要通过 CDN 包含 Day.js 库和日历插件。

const futureDate = dayjs().add(5, 'days'); // Adds 5 days to the current date
console.log(futureDate.format()); // Returns the added date in an ISO date format

接下来，在我们的 javascript 文件中，我们使用日历插件扩展 dayjs 并调用 dayjs() 函数来创建一个新的 Day.js 实例。

const pastDate = dayjs().subtract(2, 'months');  // Subtracts 2 months from the current date
console.log(pastDate.format()); // Returns the subtracted date in an ISO date format

日历插件提供了自定义选项来格式化您想要的日期和时间的呈现方式。您可以使用具有以下确切属性的对象定义自定义格式：

const startOfMonth = dayjs().startOf('month'); // Sets the date to the start of the month
console.log(startOfMonth.format()); // Returns the current date from the start of the month in an ISO date format

在对象中，我们通过将字符串值中的单词括在 [] 方括号中来转义它们。

使用此对象，我们可以在事件提醒应用程序中显示事件的日期和时间：

const endOfMonth = dayjs().endOf('month'); // Sets the date to the end of the month
console.log(endOfMonth.format()); // Returns the current date from the end of the month in an ISO date format

在此示例中，eventDate 设置为距离当前数月的日期。在这种情况下，日期将使用 customFormat 对象的 sameElse 属性中提供的格式显示。

如果事件的日期最终成为过去的日期，例如上周的某一天，例如：

<script src="path/to/dayjs/dayjs.min.js"></script>

然后使用 customFormat 对象的 lastWeek 属性中指定的格式显示日期：

相对时间插件

RelativeTime 插件是一个常用的 day.js 插件，用于在用户界面中将日期和时间差异显示为相对语句。

该插件提供4个不同的API来显示过去和未来的时间：

• .from(date, [withoutSuffix])：返回一个相对时间字符串，描述调用的日期距提供的日期有多远。如果 withoutSuffix 参数为 true，则会从输出中删除“ago”后缀。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

• .to(date, [withoutSuffix])：返回一个相对时间字符串，描述提供的日期距调用的日期有多远。如果 withoutSuffix 参数为 true，则会从输出中删除“in”前缀。

npm install dayjs

• .fromNow([withoutSuffix])：返回一个相对时间字符串，描述调用的日期距当前日期和时间有多远。如果 withoutSuffix 参数为 true，则会从输出中删除“ago”后缀。

import dayjs from 'dayjs';

• .toNow([withoutSuffix])：返回一个相对时间字符串，描述当前日期和时间距调用日期有多远。如果 withoutSuffix 参数为 true，则会从输出中删除“in”前缀。

const currentDate = dayjs();

让我们看一个简单的示例，了解如何使用relativetime插件来显示应用程序评论部分中发布的评论的时间戳。

像往常一样，第一步是包含 dayjs 和relativeTime 插件，如下所示：

"2024-12-25T14:30:00.049Z"
// year-month-dayThour:minute:second.millisecondZ

然后，我们使用relativeTime插件扩展dayjs：

new Date("may 9 2024").toISOString(); 
// Output: '2024-05-09T23:00:00.000Z'

之后，我们可以显示相对于当前时间的评论发布时间：

const date1 = dayjs(new Date()); // called with native Date object.
const date2 = dayjs("2024-08-15"); // called with an ISO date string
const date3 = dayjs(1665613200000); // called with a Unix timestamp

在执行上述代码时，commentPostedTime 变量被设置为当前时间，从而导致评论中输出以下相对时间字符串：

浏览器支持和开发人员受欢迎程度

所有现代网络浏览器都支持 Day.js 库。它拥有一个活跃的社区，拥有超过 1900 万 NPM 下载量。

该库由超过 46k github star 和 330 贡献者积极维护，确保它保持最新状态并与最新的 JavaScript 标准兼容。

结论

总而言之，利用 Day.js 库来处理应用程序中的日期和时间操作不仅可以保持速度和性能，还可以通过提供可轻松用于格式化、查询的现成函数来帮助节省时间、操作、解析和验证日期和时间。

以上是使用 Day.js 轻松处理应用程序中的日期和时间操作的详细内容。更多信息请关注PHP中文网其他相关文章！