JavaScript日期库之date-fn.js

Posted 2022-09-23 水星记_

前言

用官网的话来说，date-fn.js 就是一个现代 javascript 日期实用程序库，date-fns 为在浏览器和 Node.js 中操作 JavaScript 日期提供了最全面、但最简单和一致的工具集。那实际用起来像它说的那么神奇呢，下面就一起来看看吧。

---

安装

安装的话就非常简单了，你可以用 npm/cnpm，或者你还可以用 yarn安装。

npm install date-fns --save
cnpm install date-fns --save
yarn add date-fns

---

引入

需要注意的是，用到的方法都需要在 中引入，并且 date-fns 是不支持全局引入的。

import  format  from "date-fns"; // 根据需要引入方法

---

实例

date-fns 中有非常多的方法可以选择，话不多说，下面直接进入实战开发。

1. 日期格式转换字符串格式

let dateTime = new Date();
console.log(dateTime); // Tue Sep 20 2022 16:08:58 GMT+0800 (中国标准时间)
let currentTime = format(dateTime, "yyyy-MM-dd HH:mm:ss");
console.log(currentTime); // 2022-09-20 16:09:33

---

2. 字符串格式转换日期格式

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

---

3. 现有日期做加/减

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

例：当前日期减一天

let dateTime = new Date("2022-09-20 16:09:33");
let currentTime = format(subDays(dateTime, 1), "yyyy-MM-dd HH:mm:ss");
console.log(currentTime); // 2022-09-19 16:09:33

---

4. 日期之间的比较

若 timeOne 大于 timeTwo ，返回 1；反之返回 -1，如果相等则返回 0

let timeOne = new Date("2022-09-20 16:09:33");
let timeTwo = new Date("2022-01-20 21:19:53");
let currentTime = compareAsc(timeOne, timeTwo);
console.log(currentTime); // 1

---

5. 日期之间的差值

方法	描述
differenceInYears	年
differenceInMonths	月
differenceInWeeks	周
differenceInDays	日
differenceInHours	时
differenceInMinutes	分

例：相差多少年

let timeOne = new Date("2022");
let timeTwo = new Date("2015");
let currentTime = differenceInYears(timeOne, timeTwo);
console.log(currentTime); // 7

---

6. 判断日期是否为今/昨/明天

判断成立返回 true，反之返回 false

方法	描述
isToday	今天
isYesterday	昨天
isTomorrow	明天

例：判断是否为今天

let dateTime = new Date("2022-09-20");
const currentTime = isToday(dateTime);
console.log(currentTime); // true

---

7. 获取当天的开始/结束时间

方法	描述
startOfDay	开始时间
endOfDay	结束时间

例：获取今天开始时间

let dateTime = new Date("2022-09-20 16:09:33");
let currentTime = format(startOfDay(dateTime), "yyyy-MM-dd HH:mm:ss");
console.log(currentTime); // 2022-09-20 00:00:00

---

8. 获取当月月份的第一天/最后一天

方法	描述
startOfMonth	当月第一天
endOfMonth	当月最后一天

例：获取当月第一天

let dateTime = new Date("2022-09-20");
let currentTime = format(startOfMonth(dateTime), "yyyy-MM-dd");
console.log(currentTime); // 2022-09-01

---

9. 获取传入的日期是哪一年/月/周几/几号

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

例：获取传入的日期是哪一年

// 获取传入的日期是星期几
let dateTime = new Date("2022-12-20");
let currentTime = getYear(dateTime);
console.log(currentTime); // 2022

---

10. 获取传入日期所在一年当中的第几周

let dateTime = new Date("2020-01-11");
let currentTime = getISOWeek(dateTime);
console.log(currentTime); // 2

---

11. 判断传入的日期是否相等

若返回 true，则是相等的，反之若为 false 则不相等

let timeOne = new Date("2020-12-31");
let timeTwo = new Date("2020-11-31");
let currentTime = isEqual(timeOne, timeTwo);
console.log(currentTime); // false

---

总结

其实 date-fns.js 文档中还有一些其它有趣的 api 操作，大家感兴趣的话可以去 官网查看。有关于网上 date-fns.js 和 moment.js 的对比也是层出不穷，其实我在使用两款插件的过程中觉得它们都互有不足，但又各有各的优势，比如 moment.js 体积比较大，而 date-fns.js 体积非常小；又或者 moment.js 支持全局引入，而 date-fns.js 却不支持，诸如此类的对比我就不多做赘述了，如果你对 moment.js 感兴趣的话，也可以参考博主的另一篇文章 vue基于momentJs应用各类时间场景。