date-fns常用的方法

一个空杯

于 2025-06-05 09:13:56 发布

阅读量346

点赞数 7

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_48290187/article/details/148430190

格式化日期 format

import { format } from 'date-fns';

const date = new Date();
console.log(format(date, 'yyyy-MM-dd HH:mm:ss')); // 2024-05-30 14:23:45

解析日期字符串 parse / parseISO

import { parse, parseISO } from 'date-fns';

const date1 = parse('2024-05-30', 'yyyy-MM-dd', new Date());
const date2 = parseISO('2024-05-30T12:00:00Z');  // 转成标准时间格式
console.log(date1, date2);

let dateTime = "2022-09-20 16:09:33";
let currentTime = parseISO(dateTime);
console.log(currentTime); // Tue Sep 20 2022 16:09:33 GMT+0800 (中国标准时间)

计算日期差 differenceInDays、differenceInMinutes

import { differenceInDays, differenceInMinutes } from 'date-fns';

const start = new Date('2024-05-01');
const end = new Date('2024-05-30');
console.log(differenceInDays(end, start)); // 29
console.log(differenceInMinutes(end, start)); // 41760

differenceInYears 年
differenceInMonths 月
differenceInWeeks 周
differenceInDays 日
differenceInHours 时
differenceInMinutes 分

日期加减 addDays、subDays、addMonths

import { addDays, subDays, addMonths } from 'date-fns';

const today = new Date();
console.log(format(addDays(today, 5), 'yyyy-MM-dd')); // 5天后
console.log(format(subDays(today, 3), 'yyyy-MM-dd')); // 3天前
console.log(format(addMonths(today, 1), 'yyyy-MM-dd')); // 下个月

addYears 加年
subYears 减年
addMonths 加月
subMonths 减月
addWeeks 加周
subWeeks 减周
addDays 加天
subDays 减天
addHours 加小时
subHours 减小时
addMinutes 加分钟
subMinutes 减分钟

判断日期关系 isBefore、isAfter、isEqual

import { isBefore, isAfter, isEqual } from 'date-fns';

const d1 = new Date('2024-05-01');
const d2 = new Date('2024-05-30');
console.log(isBefore(d1, d2)); // true
console.log(isAfter(d2, d1));  // true
console.log(isEqual(d1, d2));  // false

isToday 今天
isYesterday 昨天
isTomorrow 明天

获取月初、月末 startOfMonth、endOfMonth

import { startOfMonth, endOfMonth } from 'date-fns';

const date = new Date('2024-05-15');
console.log(format(startOfMonth(date), 'yyyy-MM-dd')); // 2024-05-01
console.log(format(endOfMonth(date), 'yyyy-MM-dd'));   // 2024-05-31

获取星期几 getDay

import { getDay } from 'date-fns';

const date = new Date('2024-05-30');
console.log(getDay(date)); // 4（0=周日, 1=周一, ...）

getYear 哪一年
getMonth 哪一个月注意：因为是从0开始，所以最终的结果需要加1
getDay 周几
getDate 几号
getHours 小时
getMinutes 分钟

校验日期有效性 isValid

import { isValid } from 'date-fns';

console.log(isValid(new Date('2024-05-30'))); // true
console.log(isValid(new Date('invalid-date'))); // false

其他常用方法
startOfDay(date) / endOfDay(date)：获取一天的开始/结束
setHours(date, hours)：设置小时
formatDistance(date1, date2)：人性化时间差

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

const date = new Date();
console.log(startOfDay(date));
console.log(endOfDay(date));
console.log(setHours(date, 8));
console.log(formatDistance(new Date(2024, 4, 1), new Date(2024, 4, 30))); // about 1 month

参考链接