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

微信搜尋【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

快來免費體驗ChatGpt plus版本的，我們出的錢
體驗地址:https://chat.waixingyun.cn/#/home
可以加入網站底部技術群，一起找bug.

本文介紹了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 的缺點。

與樹搖最佳化不相容，因為它會導致較大的捆綁包大小和效能問題
Moment.js存在一個影響可變性的問題。
由於其複雜的API和龐大的捆綁包大小，如果正在開發需要高效能的Web應用程式，則可能會導致顯著的效能損失

Day.js 的好處

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

使用 Day.js 效能高。
Day.js比Moment.js更輕，因為Date.js的軟體包大小僅約為232 kB。 Day JS的最新版本為7Kb（已壓縮），大小為2Kb（已壓縮）。
Day.js可以作為JavaScript檔案從CDN或本地檔案中包含，同時支援import和require。

不過，有一個缺點：

Day.js 的功能比 Moment.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網站上選擇並查詢更多資訊。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

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

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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

為什麼要替換 Moment.js？

Day.js 的好處

JavaScript社群中的Day.js支援

快速開始

ISO概述

格式化日期

RelativeTime 外掛

Node.js和ES6匯入的 RelativeTime 外掛

從 X 獲取時間

從現在開始計算時間

獲取當前時間

如何生成日期的Unix時間戳

計算一個月的天數

將日期作為物件返回

將日期作為陣列返回

以 JSON 格式獲取時間和日期

提供日期和時間作為字串

解析日期

驗證

時區

區解析

轉換為時區

估計使用者時區

預設時區設定

總結

交流

相關文章