使用 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中文網其他相關文章！