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