JavaScript 日期 – 如何使用 DayJS 库在 JS 中处理日期和时间

geeks老师

已于 2023-09-06 13:13:48 修改

阅读量284

点赞数

分类专栏： JavaScript 文章标签： java 网络开发语言 servlet intellij-idea struts hibernate

于 2023-09-06 12:35:29 首次发布

本文链接：https://blog.csdn.net/wly476923083/article/details/132712529

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

当涉及到在 JavaScript 中处理日期和时间时，开发人员经常发现自己正在努力应对内置对象的复杂性Date。

虽然普通 JavaScript 提供了基本功能，但使用起来可能相当麻烦，尤其是在处理解析、格式化和操作日期时。

这就是像 DayJS 这样的外部库发挥作用的地方，它提供了大量的优势，使处理日期和时间变得轻而易举。

在这篇文章中，我将向您介绍 DayJS 以及这个小型库如何极大地提高您的代码库和生产力。

我们将介绍以下内容：

如何安装DayJS库
如何在 JavaScript 中使用日期和时间
如何利用 DayJS 库使这些函数更简单、更简洁、更具可读性
vanilla JS 和 DayJS 中执行功能的比较
DayJS 库中提供的有用函数

目录：

JavaScript 中日期对象的快速介绍

JavaScript 中日期对象的快速介绍

您可以使用DateJavaScript 中的对象来处理日期和时间段。但有时处理对象Date可能很麻烦，并且日期/时间可能很难操作。

让我们看看如何在 JavaScript 中获取今天的日期：

var date = new Date();

够简单吧？这将为我们提供一个 ISO 日期（这是通用日期格式），其输出如下：
2023-07-16T14:51:47.557Z

因此您可以看到，在中year-month-date，T标记了日期的时间部分的开始点。那么下面的数字就是hours:minutes:seconds.fractional seconds。末尾的Z表示没有指定时区，应使用 UTC 时区（发音为“Zulu”）。

您可以在此处阅读有关此格式的更多信息。

DayJS 图书馆

现在，我并不是说处理日期和时间的其他方法是错误的，但由于它们的复杂性，对我来说，它们似乎不值得麻烦。

在处理代码中的日期和时间时，我想要一个易于使用、开箱即用的解决方案，该解决方案可以增加代码的可读性并提供灵活性。

这就是 DayJS 发挥作用的地方。这是在 JavaScript 中以库的形式处理日期和时间的另一种方法。

与其他图书馆不同，这个图书馆的规模非常小。例如，有一些开发人员使用的另一个常见库称为MomentJs，但它的文件大小非常大。Moment.js 本身为280.9kb，在包含时区库后增加到467.6kb（允许您设置默认时区，并根据特定时区操作日期）。

在为网络和移动设备进行开发时，我们确实希望避免大型导入和库文件，以帮助提高加载速度和包大小。

DayJs 的大小为令人印象深刻的2kb——这是一个非常小的文件大小，特别是考虑到它的能力和功能。

如何安装 DayJS 库

为了从本教程中学到最多的东西，我强烈建议安装 DayJS，这样您就可以按照示例和要点进行操作。

DayJS 可以使用以下命令通过yarn 或 npm 包管理器轻松安装

// yarnyarn add dayjs//nodenpm install dayjs

要在文件中使用 DayJS .js，只需使用常规导入语法导入它：

import dayjs from 'dayjs'

DayJS API 和基本语法

在普通 JavaScript 中处理日期和时间通常涉及多个方法调用和计算。这使得代码过于冗长并且难以阅读。

DayJS 库通过提供更加直观和简化的 API 来解决这个问题，这极大地简化了日期和时间操作。

考虑将日期格式化为特定格式的任务，例如“YYYY-MM-DD HH:mm:ss”（年-月-日 24 小时:分钟:秒）。

以下是使用普通 JavaScript 的 Date 对象来完成此操作的方法：

const currentDate = new Date();
const formattedDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')} ${currentDate.getHours().toString().padStart(2, '0')}:${currentDate.getMinutes().toString().padStart(2, '0')}:${currentDate.getSeconds().toString().padStart(2, '0')}`;

console.log(formattedDate); // Output 2023-08-23 17:02:33

上面的代码利用Date内置函数来收集日期对象的各个部分。

getFullYear()– 获取全年
getMonth()– 获取月份部分
getDate()– 获取日期部分
getHours()– 获取 24 小时格式的当前时间
getMinutes()– 获取会议记录部分
getSeconds()– 获取秒部分

然后，它构建一个复杂的插值字符串变量，其中包含我们期望看到的所有必需部分，即用前导 0 表示单位数月/日/分钟/秒（这就是该函数正在执行的操作）padStart()。

正如您所看到的，这是非常不可读的——我们可以重构它以使其更具可读性。但这个概念仍然存在。

我们看下面的例子。在这里，我们创建一个formatDate函数，它将接受 JSDate对象，并使用以下格式返回格式化日期day/month/year：

const formatDate = (date) => {
  // Get the individual date components
  var day = date.getDate(); // get the Date part
  var month = date.getMonth() + 1; // Get the Month (Months are zero-based)
  var year = date.getFullYear(); // Get the year
  var hours = date.getHours(); // Get the hour
  var minutes = date.getMinutes(); // Get the minutes
  var seconds = date.getSeconds(); // Get the seconds

您可能会问为什么我们必须在月份中加 1。正如我试图在评论中解释的那样，getMonth()是从零开始的。这意味着一月等于0，因此为了获得正确的月份编号，我们需要为所有月份添加 1。这意味着现在 1 月将变为1。

因此，在上面的代码中，我们已经获得了所需的 Date 对象的相关部分（日、月、年）。现在我们必须对这些部分进行一些格式化，以使它们符合我们对日期和月份的 2 位数的预期结果。

  // Pad single digits with leading zeros to make 2 digits, 
  var formattedDay = day < 10 ? "0" + day : day;
  var formattedMonth = month < 10 ? "0" + month : month;
  // Concatenate (join) the formatted date components
  return formattedDay + "/" + formattedMonth + "/" + year;};// Usage examplevar currentDate = new Date();var formatted = formatDate(currentDate);console.log(formatted); // Output: "16/07/2023"

因此，如果我们将它们放在一起，我们会得到以下代码：

const formatDate = (date) => {
  // Get the individual date components
  var day = date.getDate(); // get the Date part
  var month = date.getMonth() + 1; // Get the Month (Months are zero-based)
  var year = date.getFullYear(); // Get the year
  var hours = date.getHours(); // Get the hour
  var minutes = date.getMinutes(); // Get the minutes
  var seconds = date.getSeconds(); // Get the seconds
  
  // Pad single digits with leading zeros to make 2 digits, 
  var formattedDay = day < 10 ? "0" + day : day;
  var formattedMonth = month < 10 ? "0" + month : month;
  // Concatenate (join) the formatted date components
  return formattedDay + "/" + formattedMonth + "/" + year;}// Usagevar currentDate = new Date();var formatted = formatDate(currentDate);console.log(formatted); // Output: "16/07/2023"

现在它是 19 行代码、6 个基于对象的函数和 1 个实用函数的组合，而且非常不灵活。

DayJS 如何帮助让这一切变得更容易？

让我们看看如何在 DayJS 中实现这一点：

const currentDate = dayjs();const formattedDate = currentDate.format('YYYY-MM-DD HH:mm:ss');console.log(formattedDate);

就是这样！在 3 行代码中，我们使用该dayjs()函数检索了当前日期和时间，使用字符串参数将其格式化为提供的日期时间格式，并注销了输出。

在上面的代码中，我们使用了dayjs.format()实用函数。该函数允许我们基于常见的 JS 格式语法传递我们首选的日期格式。

YYYY= 数字年份
MM= 2 位数字的一年中的数字月份
DD= 2 位数字的数字日期
HH= 24 小时制的小时
mm= 2 位数字的分钟
ss= 2 位数字的秒

全部用连字符和冒号分隔。

有关所有可能格式的列表，请参阅此处的DayJS 文档格式选项。

我想我们都同意，3 行可读的代码远远优于 19 行复杂的代码。

DayJS 的模块化

DayJS 库提供了模块化设计，允许开发人员仅包含他们需要的特定功能。

这种模块化不仅增强了库的灵活性，还有助于优化应用程序包的大小。下面详细介绍了 DayJS 如何实现模块化及其对应用程序大小的影响。

DayJS 被设计为一组提供各种功能的单独插件。可以根据您的项目要求包含或排除这些插件。

一些可用的插件涵盖时区支持、持续时间计算、自定义解析和更高级的格式化选项等功能。

这种模块化结构可确保您只加载实际使用的库部分，从而防止应用程序出现不必要的膨胀。

以下是如何在 DayJS 中利用模块化的简化示例：

// Import only the specific dayjs functionalities you need
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';

// Apply the required plugin
dayjs.extend(timezone);

// Now you have a customized dayjs instance with only the necessary functionalities
const customDayjs = dayjs().tz('America/New_York');

上面，正如您在评论中看到的，我们只是导入 DayJS 以及模块theetimezone。然后我们只需创建一个新dayjs()对象并将时区设置为美国纽约。这意味着日期和时间将是纽约的当前日期/时间，而不是 DayJS 默认的 UTC。

DayJS 库的模块化为开发人员提供了根据特定项目需求定制日期和时间处理的灵活性。这不仅可以使您的代码库保持干净和集中，还可以优化应用程序包的大小。

通过仅包含所需的功能，您可以增强应用程序的性能，特别是在用户加载时间方面。

这与普通 JavaScript 的对象完全不同Date，因为它是嵌入到 JavaScript 语言中的，所以不能被覆盖、扩展或删除特定元素。

DayJS 中的可变性

等等，可变性是什么意思？

可变性是指对象的状态在创建后发生变化的能力。

在编程中，可以修改可变对象。也就是说，其属性或值可以在初始创建后更改。这可能会导致意外的变化和副作用，从而可能影响程序的行为。

在处理日期和时间时尤其如此。Vanilla JavaScript 的 Date 对象是可变的，这意味着更改一个实例可能会无意中影响其他实例。

这就是为什么对象在对象本身上Date有方法。set所以当调用这些方法时，它会影响对象本身。

也许一个例子会有所帮助：

使用普通 JS 日期对象（可变）：

var date = new Date("2023-07-16"); // original date object
console.log(date); //2023-07-16T00:00:00.000Z

date.setDate(date.getDate() + 1); // change the date - add 1 day
console.log(date); // 2023-07-17T00:00:00.000Z the original date has been changed

这里我们使用new Date()命令来初始化一个新的日期对象。这个对象是可变的，为了获得更新的值，我们必须改变原始对象，因为它是可变的。我们使用该setDate()函数来做到这一点。

当使用 JavaScript 的内置日期功能时，您必须小心如何使用和修改日期对象。如果您开始过多地修改原始日期对象，您可能会陷入意想不到的结果之中。

DayJS 中的不可变性和不可变对象

相反，不变性意味着对象的状态一旦创建就无法更改，因为它不会对实际对象本身进行“更改”操作。

使用不可变对象时，您可以使用修改后的值创建一个新实例，而不是更改原始实例。这有助于确保您的数据在整个计划中保持一致和可预测。

不可变数据结构通常在函数式编程中受到青睐，并且可以生成更健壮、更易于维护的代码。

当您对 DayJS 对象执行操作（例如添加或减去时间）时，该库将返回具有修改值的新实例，而原始实例保持不变。

这种方法可以防止数据发生意外更改，并降低引入难以追踪的错误的风险。

考虑以下使用 DayJS 的示例：

var originalDate = dayjs("2023-07-16");
var modifiedDate = originalDate.add(1, "day");

console.log(originalDate.format("YYYY-MM-DD")); // Output: "2023-07-16"
console.log(modifiedDate.format("YYYY-MM-DD")); // Output: "2023-07-17"

使用 DayJS，您可以使用各种可用函数随意修改原始日期对象，而无需丢弃原始值。这意味着它可以随时使用/访问。

不变性的好处

可预测性：不变性确保一旦创建（设置）日期或时间对象，它就不会在整个代码中意外更改。这使得推理程序的行为变得更加容易。
调试：当可变对象的值意外更改时，可能会导致难以跟踪的错误。凭借不变性，您可以确信，如果没有明确的意图，日期或时间不会更改。
并行处理：在多线程或并行编程环境中，不可变数据结构本质上是线程安全的。这可以防止竞争条件和同步问题。

注意：您可以通过克隆原始对象来实现“不可变”的解决方法，Date如下所示：

const cloneDate = (date) => {
  return new Date(date.getTime());
};

// Usage example
var originalDate = new Date("2023-07-16");
var mutableDate = cloneDate(originalDate);

mutableDate.setDate(mutableDate.getDate() + 1);

console.log(originalDate); // 2023-07-16T00:00:00.000Z
console.log(mutableDate); // 2023-07-17T00:00:00.000Z

此代码创建一个克隆函数，该函数获取原始日期，然后从原始日期创建一个新日期并返回它。这允许您保留原始日期，但对该日期的副本进行一些修改，而不修改原始日期。

这样做的缺点是更多的内存使用和复杂性开销。

解析灵活性

在普通 JavaScript 中，解析日期字符串可能是一个真正的挑战，特别是在处理非标准格式时。

DayJS 提供了一组广泛的解析选项，使其在处理各种输入格式时更加通用。事实证明，在处理来自不同来源或可能具有不同日期表示形式的 API 的数据时，此功能尤其有价值。

用户输入：在处理用户输入（例如表单中的日期）时，用户可能会以各种格式输入日期。DayJS 的解析功能使您能够准确、一致地处理这些输入。
数据库交互：数据库可能以不同的格式或时区存储日期。DayJS 的解析可以帮助正确解释这些日期以便在您的应用程序中使用。
API 响应：API 通常以 ISO 8601 等标准化格式返回日期和时间数据，但它们也可能有所不同。DayJS 使您能够轻松解析 API 响应，确保应用程序中的数据表示正确。

与 Vanilla JavaScript 相比如何：

Vanilla JavaScript 的 Date 对象缺乏相同级别的解析灵活性。虽然它可以处理一些标准格式（ISO8601 / RFC2822）和一些其他变体，但处理非标准或不同的格式可能具有挑战性。您经常需要手动拆分日期字符串并执行计算以创建有效的 Date 对象。

假设我们有一个 en-GB 日期（日/月/年）。默认情况下，该Date对象不满足这一点。这意味着我们必须自己解析它，将字符串分成几部分，然后将它们传递给调用new Date()。

const dateString = "23/08/2023";
const parts = dateString.split("/");
const dateObject = new Date(parts[2], parts[0] - 1, parts[1]);

console.log(dateObject);

如果您尝试dateString直接转接new Date()电话，则会收到错误消息，但以 en-US 格式（月/日期/年）则可以正常工作。

const ukDate = new Date("21/01/2023");
console.log(ukDate) // Output: Invalid Date

const usDate = new Date("01/21/2023");
console.log(usDate); // Output: 2023-01-21T00:00:00.000Z

在这里，您可以看到了解Date对象如何工作的知识是必要的。如果这是在实际应用程序中，则需要进行测试以确保我们在从多个源进行解析时不会出现任何错误。

DayJS 解析灵活性

DayJS 建立在Date的核心功能之上，对我来说，为开发人员添加了最好的解析选项之一。dayjs()它允许您将任何日期字符串以及该字符串的格式传递给函数。

注意：这确实需要添加customParseFormatDayJS 的插件 - 这可以很容易地导入。

import dayjs from "dayjs";
import CustomParseFormat from "dayjs/plugin/customParseFormat";

dayjs.extend(CustomParseFormat);

这意味着在处理多个源时，您可以告诉 DayJS 根据源的呈现方式来解析日期字符串。

通常我会说将所有日期（您可以控制此类事情）存储为 UTC ISO8601 日期字符串，因为这样您就有了可靠的基线，并且可以在需要时将它们转换为相关的时区。

分解该dayjs()函数，我们可以看到它可以接收多个参数。这些都是：

string (string) – 这是您要创建的日期的字符串表示形式。
format (string) – 这是您传入的字符串的格式（与我们对该函数所做的方式相同format()）。
timezone / locale (string) – 解析时使用的区域设置键。
严格解析（布尔值） – 严格解析要求格式和输入完全匹配，包括分隔符。

那么，这意味着什么？嗯，这意味着我们对日期的解析/创建有更多的控制权。

例子：

const date1 = dayjs('20/03/2013', 'DD/MM/YYYY').toISOString(); // No Error & Output: '2023-03-20T00:00:00.000Z'

// state the format the dateString will be in from the API
const customFormat = 'YYYY/MM/DD HH:mm:ss'; 

const dateStr = '2023/08/23 14:37:41'; // dateString from the API

// create dayjs object from dateString parsing it using the provided format
const parsedDate = dayjs(dateStr, customFormat);

// format the parsed date , removing the time stamp
console.log(parsedDate.format('YYYY-MM-DD'));  // Outputs: 2023-08-23

希望您能看到 DayJS 使解析和处理日期变得更加容易。它提供了多种不同且灵活的方法来解析各种日期，使得使用多个源比简单地使用内置Date对象更容易。

DayJS 还能做什么？

如何添加或减去日期和时间

很多次我被要求通过在当前日期上添加天数或从时间中减去小时数来计算未来的日期。

如何在 Vanilla JavaScript 中执行此操作：

使用 JavaScript 的Date对象，我们可以通过使用setDate()函数来做到这一点。我们通过以下方式做到这一点：

获取当前日期
获取要添加的天数（5 天）
通过获取 Date 对象的日期部分并添加 5 天，在对象setDate()上使用该函数，Date

例如，getDate()可以返回 16，因此我们将日期部分重置为 16 + 5 = 21。因此日期将是 21 号而不是 16 号。

下面的例子：

var date = new Date(); //2023-08-16T16:43:33.072Z
var daysToAdd = 5;
date.setDate(date.getDate() + daysToAdd);

console.log(date); // 2023-08-21T16:43:33.072Z

或压缩（如果需要考虑代码行）：

var date = new Date()
console.log(date.setDate(date.getDate() + 5));

虽然简洁，但多少失去了可读性。

如何在 DayJS 中执行此操作：

DayJS 的命名约定使其函数更具可读性。这意味着在阅读代码时，您可以更清楚地看到它在做什么。

例如，采用与上面相同的示例并在 DayJS 中编写它看起来像这样：

var date = dayjs().add(5, "day").toISOString(); //2023-08-21T16:43:33.000Z

在这里，我们最大限度地利用函数链接和调用add()返回的 dayjs 对象。我们传入要添加的数字以及要添加的时间段（在本例中为day）。然后，DayJS 库将在当前日期的基础上添加 5 天。然后它以 ISO 字符串的格式返回该日期。

这也可以通过减去天数来完成，如下所示：

在普通 JavaScript 中：

var date = new Date(); //2023-08-16T16:43:33.072Z
var daysToSubtract = 5;
date.setDate(date.getDate() - daysToAdd);

console.log(date); // 2023-08-11T16:43:33.072Z

在 DayJS 中：

var date = dayjs().subtract(5, "day").toISOString(); //2023-08-11T16:43:33

DayJS 库的清晰度再次允许用户像简单的英语一样阅读它：“从此 DayJS 对象中减去 5 天并作为 ISO 字符串返回。”

如何在 DayJS 中比较日期

使用日期时，经常需要比较日期对象，例如检查一个日期是在另一特定日期之前还是之后。

对于 JavaScriptDate对象，您通常使用greaterThan(>) 或lessThan(<) 运算符来执行此操作。

但应该使用这些运算符的哪种方式常常会令人困惑。这是因为要将运算符应用于日期，日期会在底层转换为时间戳，然后按时间顺序进行比较。

例如：

var date1 = new Date("2023-07-16");
var date2 = new Date("2023-07-18");

if (date1 < date2) {
  console.log("Date 1 is before Date 2");
} else {
  console.log("Date 1 is after Date 2");
}

// after
if (date1 > date2) {
  console.log("Date 1 is after Date 2");
} else {
  console.log("Date 1 is before Date 2");
}

// same
if (date1 === date2) {
  console.log("Date 1is exaclty the same as Date 2");
} else {
  console.log("Date 1 not exactly the same as Date 2");
}

虽然这看起来很容易阅读和使用，但 DayJS 提供了一个很棒的 API 来处理日期比较，这可以更容易立即阅读。

例如：

var date1 = dayjs("2023-07-16");
var date2 = dayjs("2023-07-18");

现在假设我们要检查 date1 是否早于 date2 – 我们可以使用isBefore()API 函数。我和许多其他开发人员发现代码实际上在做什么更加清晰，而不必考虑代码正在使用哪个运算符。

if (date1.isBefore(date2)) {
  console.log("Date 1 is before date 2");
} else {
  console.log("Date 1 is after date 2");
}

您还可以使用该函数实现类似的结果isAfter()，检查 date1 是否在date2之后。

if (date1.isAfter(date2)) {
  console.log("Date 1 is after date 2");
} else {
  console.log("Date 1 is before date 2");
}

我发现更可靠的一个 API 函数是isSame函数。许多 JavaScript 开发人员都知道，在检查对象的相等性时，尤其是刚接触该语言的开发人员，何时使用==vs可能会令人困惑===。

DayJS 消除了这种未知，并提供了一个清晰/可读的函数来为您执行此操作。

//check if date1 is the same as date2
if (date1.isSame(date2)) {
  console.log("Date 1 is exactly the same as date 2");
} else {
  console.log("Date 1 is not exactly the same as date 2");
}

假设我们要检查日期是否位于两个范围之间。同样，DayJS 通过该isBetween()函数使这一切变得更容易。使用该isBetween()函数还给我们带来了其他几个好处：

isBetween()简单的日期范围检查：您可以轻松检查日期是否在指定范围内，而不是手动比较日期和执行算术运算。
可读性和可维护性：使用isBetween()使您的代码更具可读性和可理解性。它清楚地传达了检查日期是否在某个范围内的意图。
支持包含和排除范围：isBetween()DayJS 中的功能允许您指定开始日期和结束日期是否包含在范围内或排除在范围之外。这使您可以灵活地定义日期间隔。

例子：

const targetDate = dayjs('2023-08-15');
const startDate = dayjs('2023-08-01');
const endDate = dayjs('2023-08-31');

const isWithinRange = targetDate.isBetween(startDate, endDate, null, '[]'); 
console.log(isWithinRange) // Output: true

正如您所看到的，函数isBefore、isAfter、isSame、和isBetween使代码检查的内容更加清晰。

拥有如此详细的名称可以清楚地表明函数正在执行的操作（与 JavaScript 使用运算符或数学转换的内置方法相反）。API 函数清晰简洁的性质可能对初级开发人员或简单浏览代码时有所帮助。

这在 DayJS 函数中表现得更加明显，例如：

isYesterday()
isTomorrow()
isToday()

如何获取两个日期之间的差异

该diff函数使获取两个日期之间的差异变得如此简单。比使用标准Date对象容易得多！

但我们什么时候想要这样做呢？假设您正在构建一个用户门户，并且希望显示自上次访问以来的天数或小时数。或者是一个倒计时应用程序，它可以向我们显示距特定日期和时间还有多少天、周、小时。您可以使用该diff()函数完成所有这些操作。

我们看一下这个diff函数：

const date1 = dayjs("2019-01-25");
const date2 = dayjs("2018-06-05");

const differenceInMilliseconds = date1.diff(date2); 
console.log(differenceInMilliseconds); // Output: // 20214000000

但毫秒对于 UI 元素并不总是有用，我们可能希望显示天、周或月。

对我们来说幸运的是，DayJS 允许我们指定我们想要返回差值的时间单位。

回到我们的用户界面示例，我们可以有一个可以在多种时间单位之间切换的切换开关。这将向用户显示自上次登录以来的多个时间范围，或者他们完成游戏所花费的天数或小时数等。

可用面额：

天
周
宿舍
月
年
小时
秒
毫秒

const date1 = dayjs("2023-01-25");
const date2 = dayjs("2022-06-05")
date1.diff(date2, "month"); // 7 (months)

const date1 = dayjs("2023-08-25");
date1.diff("2023-08-27", "day"); // 2

默认情况下，diff()会将结果截断至小数点后零位，返回一个整数。如果您想要浮点数，请传递 true 作为第三个参数，这将为您提供更准确的差异。

const date1 = dayjs("2023-01-25");
date1.diff("2022-06-05", "month", true); // 7.645161290322581

Date好的，但是为什么这比在 JavaScript 中使用对象好得多呢？好吧，让我们看看如何使用来做到这一点Date。

function calculateDateDifferenceInDays(date1, date2) {
  // Convert both dates to milliseconds
  const date1Millis = date1.getTime();
  const date2Millis = date2.getTime();

  // Calculate the difference in milliseconds
  const differenceMillis = Math.abs(date2Millis - date1Millis);

  // Convert milliseconds to days (1 day = 24 hours = 24 * 60 * 60 * 1000 ms)
  const differenceDays = differenceMillis / (24 * 60 * 60 * 1000);

  return differenceDays;
}

// Example usage
const startDate = new Date('2023-08-15');
const endDate = new Date('2023-08-25');

const daysDifference = calculateDateDifferenceInDays(startDate, endDate);
console.log(`The difference between the dates is ${daysDifference} days.`);

首先，我们必须对函数进行硬编码以仅返回days。为了允许与库中相同的变化，dayjs我们必须编写自己的扩展函数，它将处理所需的每种转换组合。

例如，获取月份差异的计算方式可能略有不同：

function calculateMonthDifference(startDate, endDate) {
  const startYear = startDate.getFullYear();
  const startMonth = startDate.getMonth();

  const endYear = endDate.getFullYear();
  const endMonth = endDate.getMonth();

  const yearDifference = endYear - startYear;
  const monthDifference = endMonth - startMonth;

  return yearDifference * 12 + monthDifference;
}

但同样，它只是越来越复杂的代码来完成一个小型库最多只需 3 行代码就可以完成的事情。它只是不像 DayJS 那样灵活和易于使用。

如何获取时间段的开始或结束

startOf和endOf是 DayJS 库中另外两个很棒的函数。它们使您可以轻松返回日期期间的开始和结束时间。

例如，您可以获得一天、一周、一个月或一年的开始/结束。当需要计算一个月还剩多少天时，这可能会很方便。有些月份的天数比其他月份多，但我们不想在代码中的某个地方计算/跟踪这一点。

让我们看看如何使用它：

const startOfDay = dayjs().startOf("day"); // 00:00:00 of today

// or given date
const startOfGivenDate = dayjs("2023-08-12T15:00:00").startOf("day");

const startOfWeek = dayjs().startOf("week"); // 00:00:00 first day of the week (locale aware)
const startOfYear = dayjs().startOf("year"); // 1st Jan 2023 00:00:00

const endOfDay = dayjs().endOf("day"); // 23:59:59 of today
const endOfWeek = dayjs().endOf("week"); // 23:59:59 of last day of week (locale aware)
const endOfYear = dayjs().endOf("year"); // 31 Dec 2023 23:59:59

如果我们想用普通 JavaScript 完成同样的事情，我们就必须这样做：

const beginningOfDay = (inputTime?: string) => {

  // Convert inputTime to a Date object if provided
  let date inputTime ? new Date(inputTime) : new Date();

  // Set the time to 00:00:00
  date.setHours(0, 0, 0, 0);

  return date;
};

const givenTime = "2023-08-12T15:00:00"; // 3pm on 12th August 2023
const startOfGiven = beginningOfGivenDay(givenTime);

正如您所看到的，DayJS 使处理时间段的开始和结束比使用纯 JavaScript 容易得多。JavaScript 往往需要更多代码，因为您需要为每个方法编写自己的实现。

DayJS中如何组合函数

正如已经讨论过的，DayJS 允许链接函数，使其成为一个非常强大的工具。

假设我们有一个用户门户，我们想知道今天到月底之间的时间是否大于 7 天，以确定要显示的 UI 元素（例如“即将过期”或“继续”）。

您可以使用 DayJS 用不到 5 行代码来完成此操作，如下所示：

const current = dayjs();
const differenceInDays = current.endOf('month').diff(current,'day');

if(differenceInDays <= 7){
 console.log("Expires Soon"); 
}

它在做什么？

获取当前日期和时间
使用函数链和不变性来
：获取当前月末
b. 获取当前月底与当前日期和时间之间的差异。
检查是否differenceInDays小于或等于 7
如果是这样，则显示一条expires soon消息。

“哦，拜托，我们仍然可以在 JavaScript 中做到这一点”我听到你说。嗯，是的——像所有其他示例一样，您可以在 JS 中完成。但同样，这将需要更多的努力和需要维护的代码。它看起来是这样的：


  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  
  // Get the first day of the next month
  const firstDayOfNextMonth = new Date(currentYear, currentMonth + 1, 1);
  
  // Subtract one day to get the last day of the current month
  const lastDayOfCurrentMonth = new Date(firstDayOfNextMonth.getTime() - 1);
  
  // Calculate the difference in days (using timestamp)
  const timeDifference = lastDayOfCurrentMonth - currentDate;
  console.log(timeDifference) // Output: 689366264 (milliseconds)
  
  // Convert the timestamp to actual days
  const daysDifference = Math.ceil(timeDifference / (24 * 60 * 60 * 1000));
  
  return daysDifference;
}

// Example usage
const daysUntilEnd = daysUntilEndOfMonth();
console.log(`Number of days until the end of the month: ${daysUntilEnd} days`); //Output: Number of days until the end of the month: 8 days

使用 DayJS 更简单，不是吗？

结论

本质上，本文的最终目标是强调一个有用的库，它使日期和时间的处理变得更加容易。该代码比 JavaScript 中标准内置的 Date 对象更简洁、更容易阅读。

geeks老师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 日期 – 如何使用 DayJS 库在 JS 中处理日期和时间

当涉及到在 JavaScript 中处理日期和时间时，开发人员经常发现自己正在努力应对内置对象的复杂性Date。虽然普通 JavaScript 提供了基本功能，但使用起来可能相当麻烦，尤其是在处理解析、格式化和操作日期时。这就是像 DayJS 这样的外部库发挥作用的地方，它提供了大量的优势，使处理日期和时间变得轻而易举。在这篇文章中，我将向您介绍 DayJS 以及这个小型库如何极大地提高您的代码库和生产力。
复制链接

扫一扫