介紹

在 JavaScript 中處理日期和時(shí)間可能具有挑戰(zhàn)性，尤其是在需要特定格式時(shí)。這種復(fù)雜性通常會(huì)導(dǎo)致應(yīng)用程序內(nèi)的日期和時(shí)間不一致。因此，開發(fā)人員轉(zhuǎn)向外部工具和庫（例如 Day.js）來輕松、更準(zhǔn)確地管理這些操作。

在本文中，我們將探討 Day.js 是什么、它的基本功能、如何在項(xiàng)目中使用它、如何使用插件擴(kuò)展其功能以及它的瀏覽器支持。

什么是 Day.js？

Day.js 是一個(gè)易于使用的輕量級(jí) JavaScript 庫，專為處理各種日期和時(shí)間操作而設(shè)計(jì)，允許它們?cè)?Web 應(yīng)用程序中以易于閱讀的格式呈現(xiàn)。

該庫可以在客戶端（瀏覽器）和服務(wù)器端（Node.Js）環(huán)境中使用。

在現(xiàn)代 Web 開發(fā)中，開發(fā)人員在構(gòu)建應(yīng)用程序時(shí)力求優(yōu)先考慮速度和性能。大型導(dǎo)入和龐大的庫文件是這些屬性的兩個(gè)常見阻礙因素。

幸運(yùn)的是，Day.js 通過 2KB 的緊湊文件大小解決了這些問題，使其成為管理日期和時(shí)間操作而不影響應(yīng)用程序性能的理想選擇。

安裝

要開始在應(yīng)用程序中使用 Day.js 庫，您首先需要包含它。

要在客戶端使用該庫，請(qǐng)?jiān)?

中包含以下腳本： HTML 文檔的標(biāo)簽。

<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>

要將庫安裝為應(yīng)用程序中的依賴項(xiàng)，請(qǐng)運(yùn)行以下命令：

npm install dayjs

接下來，將 dayjs 導(dǎo)入到您的 javascript 文件中：

import dayjs from 'dayjs';

要?jiǎng)?chuàng)建新的 Day.js 實(shí)例，請(qǐng)調(diào)用 dayjs() 函數(shù)。如果沒有傳遞參數(shù)，它將返回一個(gè)表示當(dāng)前日期和時(shí)間的對(duì)象：

const currentDate = dayjs();

然后您可以引用該對(duì)象來對(duì)日期和時(shí)間執(zhí)行各種操作。

由于 Day.js 對(duì)象是不可變的，任何修改該對(duì)象的操作都將返回一個(gè)具有更新日期和時(shí)間的新實(shí)例。

ISO 日期時(shí)間格式

為了有效地處理日期和時(shí)間，我們首先需要熟悉 ISO 及其日期時(shí)間格式字符串。

ISO（國際標(biāo)準(zhǔn)化組織）是一個(gè)全球性非政府組織，負(fù)責(zé)制定和發(fā)布各行業(yè)的國際標(biāo)準(zhǔn)，確保全球范圍內(nèi)的一致性和質(zhì)量。

ISO 提供的標(biāo)準(zhǔn)之一是表示全球日期和時(shí)間的格式。

典型的 ISO 日期時(shí)間格式字符串如下所示：

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

• 日和小時(shí)之間的 T 充當(dāng)分隔符，將字符串中的日期與時(shí)間分開。
• 字符串末尾的 Z，代表 Zulu，表示時(shí)間采用 UTC（協(xié)調(diào)世界時(shí)）。

原生 JavaScript Date 對(duì)象提供了 toISOString() 方法，該方法有助于將隨機(jī)日期轉(zhuǎn)換為 ISO 字符串。

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

現(xiàn)在我們了解了 ISO DateTime 格式，讓我們探索一下 Day.js 庫的一些關(guān)鍵功能。

探索 Day.js 的主要特性

Day.js 庫具有一系列功能，其中一些功能可用于格式化、解析、操作、查詢和驗(yàn)證日期和時(shí)間。讓我們探索如何利用這些關(guān)鍵功能。

解析

解析功能提供了一種簡單的方法來創(chuàng)建具有特定日期和時(shí)間的新 Day.js 對(duì)象。這可以通過將本機(jī) JavaScript 日期對(duì)象、日期字符串或 Unix 時(shí)間戳傳遞給 dayjs() 函數(shù)來完成。

npm install dayjs

格式化

格式化功能允許您以特定格式顯示日期和時(shí)間。以下方法用于對(duì)日期和時(shí)間進(jìn)行格式化。

• format()：接收格式字符串并以自定義格式返回日期和時(shí)間。

import dayjs from 'dayjs';

操縱

操縱功能允許您以不同的方式調(diào)整日期和時(shí)間。這可以使用以下方法來完成。

• add(number, timeUnit)：在日期上添加指定的時(shí)間量。

const currentDate = dayjs();

• subtract(number, timeUnit)：從日期中減去指定的時(shí)間量。

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

• startOf(timeUnit)：將日期設(shè)置為特定時(shí)間單位的開始，例如一天、一周、一個(gè)月等的開始。

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

• endOf(timeUnit)：將日期設(shè)置為特定時(shí)間單位的結(jié)束時(shí)間，例如一天、一周、一個(gè)月等的結(jié)束時(shí)間。

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

查詢

查詢功能允許您檢查和比較日期和時(shí)間。這可以使用以下返回布爾值的方法來完成。

• 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)：檢查日期是否在兩個(gè)指定日期之間。

import dayjs from 'dayjs';

• isLeapYear()：檢查日期的年份是否為閏年。

const currentDate = dayjs();

正在驗(yàn)證

驗(yàn)證功能提供了一種檢查所提供的日期格式是否有效的方法。這可以使用以下方法來完成：

• isValid()：返回一個(gè)布爾值，指示日期是否正確解析。

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

使用插件擴(kuò)展功能

Day.js 庫提供了各種獨(dú)立的插件，可用于擴(kuò)展其基本功能。這使開發(fā)人員能夠在其應(yīng)用程序中輕松執(zhí)行進(jìn)一步復(fù)雜的日期和時(shí)間格式化。

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

• 通過 CDN 包含插件：

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

• 要使用插件擴(kuò)展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 語法包含和擴(kuò)展插件：

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

現(xiàn)在，讓我們探索如何在應(yīng)用程序中使用兩個(gè)可用的插件。

日歷插件

日歷插件提供了一種以更易于理解的格式顯示日期和時(shí)間的便捷方法。它非常適合用于事件提醒、項(xiàng)目管理、任務(wù)計(jì)劃等應(yīng)用。

讓我們看一個(gè)簡單的示例，了解如何在事件提醒應(yīng)用程序中使用此插件。

首先，我們需要通過 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 文件中，我們使用日歷插件擴(kuò)展 dayjs 并調(diào)用 dayjs() 函數(shù)來創(chuàng)建一個(gè)新的 Day.js 實(shí)例。

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

日歷插件提供了自定義選項(xiàng)來格式化您想要的日期和時(shí)間的呈現(xiàn)方式。您可以使用具有以下確切屬性的對(duì)象定義自定義格式：

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

在對(duì)象中，我們通過將字符串值中的單詞括在 [] 方括號(hào)中來轉(zhuǎn)義它們。

使用此對(duì)象，我們可以在事件提醒應(yīng)用程序中顯示事件的日期和時(shí)間：

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 設(shè)置為距離當(dāng)前數(shù)月的日期。在這種情況下，日期將使用 customFormat 對(duì)象的 sameElse 屬性中提供的格式顯示。

如果事件的日期最終成為過去的日期，例如上周的某一天，例如：

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

然后使用 customFormat 對(duì)象的 lastWeek 屬性中指定的格式顯示日期：

相對(duì)時(shí)間插件

RelativeTime 插件是一個(gè)常用的 day.js 插件，用于在用戶界面中將日期和時(shí)間差異顯示為相對(duì)語句。

該插件提供4個(gè)不同的API來顯示過去和未來的時(shí)間：

• .from(date, [withoutSuffix])：返回一個(gè)相對(duì)時(shí)間字符串，描述調(diào)用的日期距提供的日期有多遠(yuǎn)。如果 withoutSuffix 參數(shù)為 true，則會(huì)從輸出中刪除“ago”后綴。

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

• .to(date, [withoutSuffix])：返回一個(gè)相對(duì)時(shí)間字符串，描述提供的日期距調(diào)用的日期有多遠(yuǎn)。如果 withoutSuffix 參數(shù)為 true，則會(huì)從輸出中刪除“in”前綴。

npm install dayjs

• .fromNow([withoutSuffix])：返回一個(gè)相對(duì)時(shí)間字符串，描述調(diào)用的日期距當(dāng)前日期和時(shí)間有多遠(yuǎn)。如果 withoutSuffix 參數(shù)為 true，則會(huì)從輸出中刪除“ago”后綴。

import dayjs from 'dayjs';

• .toNow([withoutSuffix])：返回一個(gè)相對(duì)時(shí)間字符串，描述當(dāng)前日期和時(shí)間距調(diào)用日期有多遠(yuǎn)。如果 withoutSuffix 參數(shù)為 true，則會(huì)從輸出中刪除“in”前綴。

const currentDate = dayjs();

讓我們看一個(gè)簡單的示例，了解如何使用relativetime插件來顯示應(yīng)用程序評(píng)論部分中發(fā)布的評(píng)論的時(shí)間戳。

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

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

然后，我們使用relativeTime插件擴(kuò)展dayjs：

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

之后，我們可以顯示相對(duì)于當(dāng)前時(shí)間的評(píng)論發(fā)布時(shí)間：

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

在執(zhí)行上述代碼時(shí)，commentPostedTime 變量被設(shè)置為當(dāng)前時(shí)間，從而導(dǎo)致評(píng)論中輸出以下相對(duì)時(shí)間字符串：

瀏覽器支持和開發(fā)人員受歡迎程度

所有現(xiàn)代網(wǎng)絡(luò)瀏覽器都支持 Day.js 庫。它擁有一個(gè)活躍的社區(qū)，擁有超過 1900 萬 NPM 下載量。

該庫由超過 46k github star 和 330 貢獻(xiàn)者積極維護(hù)，確保它保持最新狀態(tài)并與最新的 JavaScript 標(biāo)準(zhǔn)兼容。

結(jié)論

總而言之，利用 Day.js 庫來處理應(yīng)用程序中的日期和時(shí)間操作不僅可以保持速度和性能，還可以通過提供可輕松用于格式化、查詢的現(xiàn)成函數(shù)來幫助節(jié)省時(shí)間、操作、解析和驗(yàn)證日期和時(shí)間。

以上是使用 Day.js 輕松處理應(yīng)用程序中的日期和時(shí)間操作的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！