date-fns詳解

一、date-fns與其他日期庫對比

目前常見的日期庫有moment、 dayjs等，它們與date-fns最大的不同在於體積。

date-fns的體積相比moment和dayjs來說更小，同樣的功能卻能夠獲得更快的加載速度，這對於一些需要追求網頁加載速度的場景來說非常實用。

// date-fns

import { format, addDays } from 'date-fns';

const today = new Date();
console.log(format(today, 'YYYY-MM-DD'));
console.log(addDays(today, 1));

// dayjs

import dayjs from 'dayjs';

const today = dayjs();
console.log(today.format('YYYY-MM-DD'));
console.log(today.add(1, 'day'));

// moment

import moment from 'moment';

const today = moment();
console.log(today.format('YYYY-MM-DD'));
console.log(today.add(1, 'day'));

二、date-fns isBefore函數的使用

isBefore函數是判斷兩個日期的先後順序，如果第一個日期早於第二個日期則返回true，否則返回false。

isBefore函數對於計算倒計時、顯示時間差等場景來說非常實用。

import { isBefore } from 'date-fns';

const date1 = new Date('2022-01-01');
const date2 = new Date('2022-01-02');

console.log(isBefore(date1, date2)); // true
console.log(isBefore(date2, date1)); // false

三、date-fns 日期格式化函數

日期格式化函數是將日期轉換為指定格式的字符串，date-fns中的format函數支持大量的日期格式化格式。

比如，我們需要將日期轉化為’YYYY-MM-DD’的格式：

import { format } from 'date-fns';

const date = new Date('2022-01-01');

console.log(format(date, 'YYYY-MM-DD')); // 2022-01-01

如果我們需要將日期轉化為’MMMM Do YYYY, h:mm:ss a’的格式：

import { format } from 'date-fns';

const date = new Date('2022-01-01 12:34:56');

console.log(format(date, 'MMMM Do YYYY, h:mm:ss a')); // January 1st 2022, 12:34:56 pm

四、date-fns 獲取日期差值函數

有時候我們需要計算兩個日期之間的差值，date-fns提供了diff函數來完成這個任務。

比如，我們需要計算兩個日期相差的天數：

import { differenceInDays } from 'date-fns';

const date1 = new Date('2022-01-01');
const date2 = new Date('2022-01-05');

console.log(differenceInDays(date2, date1)); // 4

還可以計算出相差的小時，分鐘等等。

五、date-fns 獲取開始結束時間函數

有時候我們需要根據當前日期計算出開始和結束時間，date-fns提供了startOf和endOf兩個函數來完成這個任務。

import { startOfDay, endOfDay } from 'date-fns';

const date = new Date('2022-01-01 12:34:56');

console.log(startOfDay(date)); // 2022-01-01T00:00:00.000Z
console.log(endOfDay(date)); // 2022-01-01T23:59:59.999Z

這些函數會將日期設置為對應的起始時間和結束時間，我們可以用它們來計算一天、一周、一月的開始和結束時間等。