date-fns详解

发布时间:2023-05-19

一、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

这些函数会将日期设置为对应的起始时间和结束时间,我们可以用它们来计算一天、一周、一月的开始和结束时间等。