JavaScript 日期處理不再難！Day-js 帶你飛！

本文介紹了 Day.js 的使用方法，Day.js 是一個輕量級的 JavaScript 庫，用於解析、驗證、操作和格式化日期和時間。Day.js 的使用方法類似於Moment.js，但 Day.js 的大小隻有 2KB，比 Moment.js 更小。

Day.js 支持鏈式語法，可以通過插件擴展功能，同時 Day.js 還提供了許多有用的功能，如相對時間、時區支持、本地化等。

Day.js的主要功能包括日期解析、日期格式化、日期操作、相對時間和本地化。日期解析包括字符串解析和日期對象解析，可以將字符串轉換爲日期對象，也可以將日期對象轉換爲字符串。日期格式化可以將日期對象格式化爲指定的字符串格式。日期操作可以進行日期的加減、比較和判斷。相對時間可以將日期轉換爲相對於當前時間的時間差，如 “2 分鐘前”、“1 小時前” 等。本地化可以將日期格式化爲本地化的格式，包括日期格式、時間格式、相對時間格式等。

總之，Day.js 是一個非常有用的 JavaScript 日期庫，可以幫助開發人員輕鬆地處理日期和時間。它具有輕量級、易於使用和擴展、支持鏈式語法等優點。如果你需要在 JavaScript 中處理日期和時間，那麼 Day.js 是一個不錯的選擇。

Day.js 是 JavaScript 中最受推薦的日期和時間格式化庫之一，因爲它可以用於客戶端和服務器端渲染，並且在這兩種情況下都能完美地工作。

下面是一個圖表，顯示了 Day.js 每月的 NPM 下載量。

下面是一張圖表，顯示了已經添加到 GitHub 上的 Day.js 星標。

在本文中，我們將展示如何使用它來可能替代 Moment.js。

爲什麼要替換 Moment.js？

Moment.js 是一個 JavaScript 包，它使得在 JavaScript 中解析、驗證、操作和顯示日期和時間非常簡單。

自從 Moment.js 團隊發佈了關於其使用的棄用通知以來，開發人員被迫遷移到 Day.js 和其他建議的庫。下面列出了 Moment.js 的缺點。

Day.js 的好處

使用類似的 API，Day.js 旨在成爲 Moment.js 的簡單替代品。Day.js 不是一個完全兼容的替代品；但是，如果你習慣於使用 Moment 的 API 並且需要快速遷移，請考慮使用 Day.js：

不過，有一個缺點：

JavaScript 社區中的 Day.js 支持

持續更新工具的需求是開發人員面臨的問題的觸發因素。任何 Web 開發人員都會始終以最大化優化爲目標，以生產簡單、快速的應用程序。爲了保證軟件產品的高性能並維護其安全性，我們必須定期升級我們的庫和框架到最新版本。

Day.js 是一個優秀的替代 Moment.js 的選擇，當比較大小和性能時。

快速開始

尋找 Day.js 的 CDN 很簡單，cdnjs.com 提供了一個 Day.js CDN，可用於我們的瀏覽器。CDN 鏈接具有一個腳本標籤，可以添加到我們的 HTML 代碼的頂部或底部。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js" integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

使用 Unpkg：

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

要在 Node.js 中安裝 day，請運行下面的代碼。

npm i dayjs

使用以下代碼將 Day.js 作爲 Node.js 項目的依賴項：

const dayjs = require("dayjs");

使用 Babel 或 ES6：

import Dayjs from "dayjs";

在本教程中，我們將使用 Day.js CDN 和純 JavaScript 在瀏覽器中格式化日期和時間。

ISO 概述

表達數字日曆日期並消除歧義的標準方法是國際標準化組織（ISO）日期格式。可以使用 JavaScript 日期方法toISOString()，它以 ISO 格式返回新形成的日期，以確認此格式。

格式化日期

當我們在瀏覽器中運行 Day.js 時，.format() 方法會返回一個 ISO 格式的字符串。這與原生 JavaScript 的 toISOString() 日期構造函數方法非常相似。

console.log(dayjs().format())
//Output: 2022-08-17T09:28:20+01:00

在方括號內放置轉義字符（例如 [MM，DD，YY]）：

dayjs().format() // Output: 2022-08-17T09:31:09+01:00 
dayjs().format('MM') // Output: 08
dayjs().format('DD') // Output: 17
dayjs().format('YY') // Output: 22
dayjs().format('MMMM') // August

此外，可以定義你希望日期以哪種格式返回：

console.log(dayjs('2022-04-2').format('DD/MM/YYYY')) // Output: 02/04/2022

更多格式化內容：

dayjs().format('a') // am

dayjs().format('A') // AM

// @ The offset from UTC, ±HHmm
dayjs().format('ZZ') // +0100

// @ The millisecond, 3-digits
dayjs().format('SSS') // 912

dayjs().format('h:mm A  ') // 8:28 AM  

dayjs().format('h:mm:ss A') // 8:30:51 AM 

dayjs().format('MM/DD/YYYY') // 08/19/2022

dayjs().format('M/D/YYYY') // 8/19/2022

dayjs().format('ddd, hA')
// Output:  "Fri, 8AM"

dayjs().format('MMM D, YYYY') 
// Aug 19, 2022

我們還可以看到一些高級的日期格式：

dayjs().format('ddd, MMM D, YYYY h:mm A ');
// @ Output: Fri, Aug 19, 2022 8:23 AM        

dayjs().format('MMM D, YYYY h:mm A');
// Aug 19, 2022 8:24 AM

dayjs().format('dddd, MMMM D YYYY, h:mm:ss A')
// Output:  "Friday, August 19 2022, 8:15:51 AM"

dayjs().format('dddd, MMMM Do YYYY, h:mm:ss A')
// output => "Friday, August 19o 2022, 8:15:51 AM"

RelativeTime 插件

在繼續其他示例之前，我們來討論一下 RelativeTime 插件。使用 RelativeTime 插件，可以將日期和時間數字轉換爲相對語句，例如 “5 小時前”。

使用 CD 安裝瀏覽器：我們必須使用 Relativetime CDN，然後使用 Day.js 設置它，以使 RelativeTime 插件正常工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/dayjs.min.js"
    integrity="sha512-Ot7ArUEhJDU0cwoBNNnWe487kjL5wAOsIYig8llY/l0P2TUFwgsAHVmrZMHsT8NGo+HwkjTJsNErS6QqIkBxDw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

其次 從 cdnjs.com 獲取的 CDN。

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/relativeTime.min.js"></script>

相對時間插件正在爲 Day.js 進行設置:

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime)    
</script>

Node.js 和 ES6 導入的 RelativeTime 插件

當使用 npm i dayjs 時，RelativeTime 插件位於 Day.js 包內。只需要 Day 內的 RelativeTime 路徑即可使用它。

const dayjs = require('dayjs')
var relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)

ES6 import

import Dayjs from "dayjs";
import relativeTIme from "dayjs/plugin/relativeTime";
Dayjs.extend(relativeTIme);

從 X 獲取時間

提供表示相對於 X 的時間字符串。相對時間插件將使我們能夠實現這一點。

始終確保使用 dayjs.extend 配置相關插件。您可以閱讀更多關於 Day.js 插件的信息。

dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a))
// Output: 2 years ago

如果傳遞 true，可以獲得沒有後綴的值。

dayjs.extend(window.dayjs_plugin_relativeTime);
var a = dayjs("2022-01-01");
console.log(dayjs("2020-01-01").from(a, true))
// Output: 2 years

從現在開始計算時間

這將把相對於現在的時間字符串轉換出來。現在需要一個 RelativeTime 插件。

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime);
    console.log(dayjs('2000-01-01').fromNow()) 
</script>

來自未來：

<script>
    dayjs.extend(window.dayjs_plugin_relativeTime);
    console.log(dayjs('2050-01-01').fromNow()) 
</script>

// Output: in 27 years

沒有後綴：您] 可以使用 true 布爾值提供返回日期字符串。

dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('2000-01-01').fromNow(true)  // Output: 23 years

獲取當前時間

這將返回一個表示相對時間到現在的字符串。請記住，這取決於相對時間插件。

dayjs.extend(window.dayjs_plugin_relativeTime);
dayjs('1980-01-01').toNow() // Output: in 43 years

缺少後綴

dayjs('1980-01-01').toNow(true) // Output: 43 years

如何生成日期的 Unix 時間戳

這將給出 Day.js 對象的 Unix 時間戳，即自 Unix 紀元以來的秒數。Unix 時間戳對象是 Day.js 中的內置對象，因此使用它不需要調用插件。

沒有毫秒:

dayjs('2019-01-25').unix() // Output: 1548370800

以毫秒爲單位：

dayjs('2019-01-25').valueOf() // Output: 1548370800000

根據 Day.js 文檔，始終建議使用 Unix 時間戳。

計算一個月的天數

獲取當前月份的天數，無需插件:

dayjs('2020-02-04').daysInMonth() // Output: 29

將日期作爲對象返回

爲了以對象格式返回日期，應該使用帶有 CDN 的toObject插件，或在 node.js 或 ES6 導入中要求它。

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/toObject.min.js"
    integrity="sha512-qWOc7v2jfO5Zg34fVOIfnpvDopsqDBilo8Onabl/MHIr5idHpg73tVRUGDMVOQs2dUEsmayiagk75Ihjn6yanA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Node.js

var dayjs = require('dayjs')
var toObject = require('dayjs/plugin/toObject')
dayjs.extend(toObject)

使用 toObject() 擴展 CDN:

<script>
    dayjs.extend(window.dayjs_plugin_toObject);
    dayjs('2020-01-25').toObject()
</script>

輸出：

{date: 25, hours: 0, milliseconds: 0, minutes: 0, months: 0, seconds: 0, years: 2020}

將日期作爲數組返回

爲了以數組格式返回日期，應該使用帶有 CDN 的 ToArray 插件，或在 node.js 或 ES6 導入中要求它。

CDN:

Node.js

var toArray = require('dayjs/plugin/toArray')
dayjs.extend(toArray)

dayjs.extend(window.dayjs_plugin_toArray);
dayjs('2022-08-04').toArray() // Output: [2022, 7, 4, 0, 0, 0, 0]

以 JSON 格式獲取時間和日期

將其序列化爲 ISO 8601 字符串格式，無需插件：

dayjs('2019-06-25').toJSON() // Output: 2019-06-24T23:00:00.000Z
dayjs('1996-01-11').toJSON() // Output: 1996-01-10T23:00:00.000Z
dayjs('2025-05-10').toJSON() // Output: 2025-05-09T23:00:00.000Z

提供日期和時間作爲字符串

返回一個包含日期表示的字符串，不需要插件:

dayjs('2025-03-20').toString() // Output: Wed, 19 Mar 2025 23:00:00 GMT
dayjs('2010-08-08').toString() // Output: Sat, 07 Aug 2010 23:00:00 GMT
dayjs('01-2005-25').toString() // @ Error output: Invalid Date

解析日期

Day.js 對象是不可變的，這意味着所有修改它的 API 操作都會產生一個新的對象實例。

字符串轉日期：檢查以下代碼以解析字符串並以日期格式返回它：

dayjs('2020-08-04T15:00:00.000Z')

一個已存在的本地 JavaScript Date 對象可以用來創建一個 Day.js 對象:

let d = new Date(2021, 02, 11);
let day = dayjs(); // The date returned by the first formatted date is copied in this line

現在使用 Parse：請參見下面的代碼，以使用 Parse 返回當前日期

new Date(2021, 02, 11);
// Alternative
dayjs(new Date());

驗證

要檢查日期和時間是否有效，請使用 Day.js 中的 .isValid() 方法。該方法會產生一個布爾結果:

dayjs('1996-05-01').isValid(); // Output: true
dayjs('dummy text').isValid(); // Output: false
dayjs('2005-06-09').isValid(); // Output: true

時區

Day.js 爲觀察相同標準時間的地區提供時區兼容性。使用 Day.js 時區需要一個插件。要在 Day.js 中使用時區，我們需要同時安裝時區和 UTC 插件:

const dayjs = require('dayjs')
const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)

UTC 插件的 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/utc.min.js"
    integrity="sha512-z84O912dDT9nKqvpBnl1tri5IN0j/OEgMzLN1GlkpKLMscs5ZHVu+G2CYtA6dkS0YnOGi3cODt3BOPnYc8Agjg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

時區插件的 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/timezone.min.js"
    integrity="sha512-fG1tT/Wn/ZOyH6/Djm8HQBuqvztPQdK/vBgNFLx6DQVt3yYYDPN3bXnGZT4z4kAnURzGQwAnM3CspmhLJAD/5Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Day.js 擴展時區和 UTC 插件：

<script>
    dayjs.extend(window.dayjs_plugin_utc)
    dayjs.extend(window.dayjs_plugin_timezone);
<script>

事例：

dayjs.tz("2020-06-01 12:00", "America/Toronto")

在控制檯上輸出：

let time = {
    $D: 18,
    $H: 11,
    $L: "en",
    $M: 10,
    $W: 1,
    $d: "Mon Nov 18 2013 11:55:00 GMT+0100 (West Africa Standard Time) {}",
    $m: 55,
    $ms: 0,
    $offset: -300,
    $s: 0,
    $x: {
        $localOffset: -60,
        $timezone: "America/Toronto"
    }
}

還可以使用 Day.js 中包含的 .toString() 方法，將時區作爲普通字符串返回。

dayjs.tz("2013-11-18 11:55", "America/Toronto").toString()
// Output: Mon, 18 Nov 2013 16:55:00 GMT

區解析

如果你想解析時區格式的日期，請使用名爲CurrentParseFormate的插件來協助你解析時區：

Node.js

var customParseFormat = require('dayjs/plugin/customParseFormat')
dayjs.extend(customParseFormat)

dayjs('05/02/69 1:02:03 PM -05:00', 'MM/DD/YY H:mm:ss A Z')
// Returns an instance containing '1969-05-02T18:02:03.000Z'

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.5/plugin/customParseFormat.min.js" integrity="sha512-FM59hRKwY7JfAluyciYEi3QahhG/wPBo6Yjv6SaPsh061nFDVSukJlpN+4Ow5zgNyuDKkP3deru35PHOEncwsw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
dayjs.extend(window.dayjs_plugin_customParseFormat);
dayjs.tz("12-25-1995", "MM-DD-YYYY", "America/Toronto").toString()
//Mon, 25 Dec 1995 05:00:00 GMT

轉換爲時區

更新偏移量，切換時區，然後返回到 day.js 對象實例。當第二個參數傳遞一個 true 值時，只有時區（和偏移量）被更改，而本地時間保持不變。

<script>
    dayjs.extend(window.dayjs_plugin_utc)
    dayjs.extend(window.dayjs_plugin_timezone);
<script>

估計用戶時區

dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
dayjs.tz.guess()  //Asia/Calcutta

默認時區設置

將你喜歡的時區設置爲默認時區，而不是本地時區。在特定的 dayjs 對象中，仍然可以自定義不同的時區

Node.js

var utc = require('dayjs/plugin/utc')
var timezone = require('dayjs/plugin/timezone') // dependent on utc plugin
dayjs.extend(utc)
dayjs.extend(timezone)

CDN

dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);

dayjs.tz.setDefault("America/New_York") // Setting the default time

dayjs.tz("2019-08-05 11:00")

總結

我們首先了解了 Day.js 及其使用它格式化時間和日期的好處。Day.js 簡單地替代了 Moment.js。雖然 Moment.js 不是必需的，但 Day.js 提供了所有日期格式化、解析、插件和本地化要求。因此，可以使用 dayjs.org 在官方 Day.js 網站上選擇並查找更多信息。

原文：https://blog.openreplay.com/working-with-dates-and-times-with-day-js/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/wpUHd3DrtuXHS71D4XufGw

猜你喜歡