Day.js | 更優雅的處理JavaScript中的日期

語言: CN / TW / HK

今天我推薦給大家一個庫 Day.js,它能夠幫助我們處理JavaScript中的日期,因為JavaScript中的日期實在是太難用了。在做業務開發時完全無法使用,需要自己去封裝各種函式。

為什麼使用day.js

首先,使用day.js能夠幫助我們更簡單的處理JavaScript中的日期和時間。

在JavaScript中處理時間的庫你可能聽說很多,比如Moment,但都2021年了,其實是非常不推薦使用moment.js的,因為作為日期處理工具,它過於的笨重,day.js是更現代並且更輕量化,更加容易擴充套件的一個庫。

Moment.js

點選這裡檢視體積大小

image-20210916225923682

Day.js

點選這裡檢視體積大小

image-20210916225950570

它非常輕量化,因為它可以利用TreeShaking,並且通過外掛的方式來進行擴充套件,我們可以根據自己的需求去引入外掛,所以我們最後只會引入我們需要的東西。

沒有day.js我們怎麼辦

在原生的JavaScript中,我們要獲取當前的日期要這樣

``javascript const today = new Date(); const dd = String(today.getDate()).padStart(2, '0'); // 日 const mm = String(today.getMonth() + 1).padStart(2, '0'); // 月 const yyyy = today.getFullYear(); // 年 const curDate =${yyyy}-${mm}-${dd}`

console.log(curDate) // 輸出: 2021-09-17 ```

在day.js中我們只需這樣,當然不止這樣,還支援很多功能。

```javascript import dayjs from "dayjs";

const curDate = dayjs().format('YYYY-MM-DD');

console.log(curDate) // 輸出: 2021-09-17 ```

Day.js 例子

現在我們來看一些實用、有趣的例子,與原生API相比,它更加簡單,而且可讀性更強。

1. 獲取兩個日期相差的天數

檢視文件

```javascript import dayjs from "dayjs";

// 第二個引數指定為'day'代表以日為顆粒度 dayjs(new Date(2021, 10, 1)).diff(new Date(2021, 9, 17), "day"); // 輸出: 15 ```

2. 檢查日期是否合法

檢視文件

```javascript import dayjs from "dayjs";

dayjs("20").isValid(); // 輸出: false dayjs("2021-09-17").isValid(); // 輸出: true ```

3. 獲取輸入日期月份的天數

檢視文件

```javascript import dayjs from "dayjs";

dayjs("2021-09-13").daysInMonth() // 輸出: 30 ```

4. 新增日、月、年、時、分、秒

檢視文件

```javascript import dayjs from "dayjs";

dayjs("2021-09-17 08:10:00").add(20, "minute").format('YYYY-MM-DD HH:mm:ss') // 輸出: 2021-09-17 08:30:00 ```

5. 減去日、月、年、時、分、秒

檢視文件

```javascript import dayjs from "dayjs";

dayjs("2021-09-17 08:10:00").subtract(20, "minute").format('YYYY-MM-DD HH:mm:ss') // 輸出: 2021-09-17 07:50:00 ```

使用外掛來擴充套件功能

1. RelativeTime

檢視文件

獲取指定時間到現在的時間差。

```javascript import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

dayjs("2021-09-16 13:28:55").fromNow(); // 輸出: 9 hours ago ``` 下面是所有的輸出表

| Range | Key | Sample Output | | ------------------ | ---- | -------------------------------- | | 0 to 44 秒 | s | a few seconds ago | | 45 to 89 秒 | m | a minute ago | | 90 秒 to 44 分鐘 | mm | 2 minutes ago ... 44 minutes ago | | 45 to 89 分鐘 | h | an hour ago | | 90 分鐘 to 21 小時 | hh | 2 hours ago ... 21 hours ago | | 22 to 35 小時 | d | a day ago | | 36 小時 to 25 天 | dd | 2 days ago ... 25 days ago | | 26 to 45 天 | M | a month ago | | 46 天 to 10 月 | MM | 2 months ago ... 10 months ago | | 11 月 to 17月 | y | a year ago | | 18 月+ | yy | 2 years ago ... 20 years ago |

2. WeekOfYear

檢視文件

獲取指定日期是當年的第幾周

```javascript import dayjs from "dayjs"; import weekOfYear from "dayjs/plugin/weekOfYear";

dayjs.extend(weekOfYear);

dayjs("2021-09-13 14:00:00").week(); // 輸出: 38 ```

3. IsSameOrAfter

檢視文件

檢查一個日期是否等於或者大於一個日期

```javascript import dayjs from "dayjs"; import isSameOrAfter from "dayjs/plugin/isSameOrAfter";

dayjs.extend(isSameOrAfter);

dayjs("2021-09-17").isSameOrAfter("2021-09-16"); // 輸出: true ```

4. MinMax

檢視文件

獲取陣列中最大的日期,或者最小的日期

```javascript import dayjs from "dayjs"; import minMax from "dayjs/plugin/minMax";

dayjs.extend(minMax)

const maxDate = dayjs.max([ dayjs("2021-09-13"), dayjs("2021-09-16"), dayjs("2021-09-20") ])

const minDate = dayjs.min([ dayjs("2021-09-13"), dayjs("2021-09-16"), dayjs("2021-09-20") ])

maxDate.format('YYYY-MM-DD HH:mm:ss') // 輸出: 2021-09-20 00:00:00 minDate.format('YYYY-MM-DD HH:mm:ss') // 輸出: 2021-09-13 00:00:00 ```

5. IsBetween

檢視文件

檢查指定日期是否在指定的日期範圍內

```javascript import dayjs from "dayjs"; import isBetween from "dayjs/plugin/isBetween";

dayjs.extend(isBetween);

// 使用日為顆粒度進行比較 dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day"); // 輸出: true

// 使用年為顆粒度進行比較 dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year"); // 輸出: false ```

嘮叨

如果本文對你有用,您的點贊、評論、關注是對我最大的鼓勵 O(∩_∩)O👍👍👍