date-fns日期工具的使用方法

date-fns日期工具

1.format()格式化日期函数

日期格式化一直是js比较麻烦的事情.在date-fns中，这件事就很简单了。不需要像在es5中那样需要在Date原型上进行修改之类的操作了。

 function format (
    date: Date | string | number,
    format?: string,
    options?: {
      locale?: Object
    }
  ): string
  namespace format {}

该函数传入三个参数，第一个参数为必传参数，可以为date, string, number， 第二个format为日期格式，为可选参数。第三个暂时没用到是可选参数。

const date = new Date();
console.log(date)  // Tue Jun 08 2021 23:28:31 GMT+0800 (中国标准时间)
console.log(format(date, 'HH:mm')); // 23:28
console.log(format(date, 'YYYY-MM-DD HH:mm:ss')); // 2021-06-08 23:28:56
console.log(format(date, 'YYYY-MM-DD')); // 2021-06-08
console.log(format(new Date('2021-06-09T00:00:00.000Z'),'yyyy-MM-dd HH:mm:ss'))  // 2021-06-09 08:00:00
console.log(format(new Date(null),'yyyy-MM-dd HH:mm:ss'))  // 1970-01-01 08:00:00

2.addDays()获得第n天之后的日期

当我们想要得到几天之后的日期，或是前几天的日期，下一周等等的日期，date-fns依然提供了相应地 函数供我们使用。

function addDays (
    date: Date | string | number,
    amount: number
  ): Date

该函数需要传入两个参数,第一个为date对象， 第二个为一个number类型的数字。传入1返回明天的日期，2则是后天的日期，以此类推。返回的是一个日期对象。

 let date = new Date(); //2019-01-03
 console.log(format( addDays(date, 1), 'YYYY-MM-DD HH:mm:ss')); // 2019-01-04 17:46:30
 //在这里为了阅读方便，我在该函数外面套用了format.
 console.log(format( addDays(date, 2), 'YYYY-MM-DD')); //2019-01-05

有求之后的日期，就有求之后小时,分钟的，就不在一一累述了，用法也是相同的，只在这里提供函数名：
addHours()： 获得当前小时之后的小时(比如现在5点, 得到七点的时间)
addMinutes()：获得当前分钟之后n分钟的时间
addMonths()：获得当前月之后n个月的月份

3.subDays()获得当前日期之前n天的日期

 function subDays (
    date: Date | string | number,
    amount: number
  ): Date

该函数传入两个参数，第一个参数date可以为Date，string，number，第一个参数为number类型，例如(1，2)。返回一个Date对象。

const date = new Date();
console.log(format(date, 'YYYY-MM-DD HH:mm:ss'));//2019-01-04 11:03:33
console.log(format( subDays(date, 2), 'YYYY-MM-DD HH:mm:ss')); //2019-01-02 11:03:33

同样的和获得之后的时间一样， 也有获得之前n小时，n分钟的时间的方法：
subHours()：获得当前时间之前n小时的时间
subMinutes()：获得当前时间之前n分钟的时间
subMonths()：获得当前月份之前n个月的时间

4.format()格式化毫秒数为日期

format(Date.parse('2019-01-02 11:03:33'), 'YYYY-MM-DD')  //2019-01-02 11:03:33

注：Date.parse() 方法解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数，如果该字符串无法识别，或者一些情况下，包含了不合法的日期数值（如：2015-02-31），则返回值为NaN。

5.获取当天零点(00:00)时间

1.const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)); //获取当天零点的时间
//const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)).toISOString() //转化为国际ISO时间
2.const stamp1 = new Date(new Date().toLocaleDateString()); //获取当天零点的时间
注：法2会有浏览器兼容问题 [获取当天零点](https://blog.csdn.net/yujin0213/article/details/104252347)

资料：获取当天零点时间

6.addSeconds() 获得当前时间n秒之后的时间-addSeconds()

addSeconds(date, amount)

示例：

// Add 30 seconds to 10 July 2014 12:45:00:
const result = addSeconds(new Date(2014, 6, 10, 12, 45, 0), 30)
//=> Thu Jul 10 2014 12:45:30

项目实例：

async serverTime() {
      try {
        const res = await serverTime()
        this.currentTime = format(new Date(res.current), 'yyyy-MM-dd HH:mm:ss')
      } catch (err) {
        throw new Error(err)
      }
    },
---------------------------------------------------------------------------------
//获取特定时间按秒自动加 1
async beforeMount() {
  await this.serverTime()
  interval(
    async (iteration, stop) => {
      if (this.stopFlag === true) {
        stop()
        return
      }
      this.currentTime = format(
        addSeconds(new Date(this.currentTime), 1),
        'yyyy-MM-dd HH:mm:ss'
      )
    },
    1000,
    { iterations: Infinity, stopOnError: false }
  )
}