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

朱欣荣

2023-12-01

** date-fns是一个"麻雀虽小却五脏俱全"的日期工具库.如果不翻墙,是看不到官方文档的,国内文档又很少.以下总结内容为我在最近的一次开发项目中使用. 该使用方法是在angualr5.0环境中使用的. 使用typescript.
**

以下为函数简介, 用法请查看正文(有目录了就不画表格了,先留着吧)

函数名	作用
isToday()	判断传入日期是否为今天
isYesterday()	判断传入日期是否为昨天
isTomorrow()	判断传入日期是否为
format()	日期格式化
addDays()	获得当前日期之后的日期
addHours()	获得当前时间n小时之后的时间点
addMinutes()	获得当前时间n分钟之后的时间
addMonths()	获得当前月之后n个月的月份
subDays()	获得当前时间之前n天的时间
subHours()	获得当前时间之前n小时的时间
subMinutes()	获得当前时间之前n分钟的时间
subMonths()	获得当前时间之前n个月的时间
differenceInYears()	获得两个时间相差的年份
differenceInWeeks()	获得两个时间相差的周数
differenceInDays()	获得两个时间相差的天数
differenceInHours()	获得两个时间相差的小时数
differenceInMinutes()	获得两个时间相差的分钟数

安装

npm install --save date-fns

在angualr5.0项目中只需在使用时引入就好了,不需要在module.ts文件中引入.需要什么函数,就引入什么函数.

import { isToday, format } from 'date-fns';

1. isToday():判断所传入日期是否为今天

通过查看date-fns的ts文件:` function isToday (date: Date | string | number ): boolean  namespace isToday {}`

我们可以知道该函数接收 date, string, number类型参数. 返回boolean类型.
举个例子:

const day = new Date();
console.log(isToday(day)); // 结果为: true

同时我们也验证下传入字符串是否可行

 console.log(isToday("2019-01-01T06:35:00.000Z")); //结果false

那既然有判断今天的,是否有判断是否为昨天,明天的呢,答案是有的

2.isYesterday(): 判断是否为昨天

通过查看date-fns的ts文件:function isYesterday ( date: Date | string | number ): boolean namespace isYesterday {}
依然是传入 date, string, number类型参数. 返回boolean类型.
举个例子:

 	const date = new Date();
    console.log(isYesterday(date)); //结果false
    console.log(isYesterday("2019-01-02T06:35:00.000Z")); //结果为true

3.isTomorrow()判断是否为明天. 用法与isToday(), isYesterday()用法相同,就不加以累述了.

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

4.format(): 格式化日期函数

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

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

	 const date = new Date();
     console.log(format(date, 'HH:mm')); // 17:05
     console.log(format(date, 'YYYY-MM-DD HH:mm:ss')); //2019-01-03 17:26:33
     console.log(format(date, 'YYYY-MM-DD')); //2019-01-03 
    	// 不传第二个参数的时候.
     console.log(format(date));//2019-01-03T17:27:27.102+08:00

日期格式问题的解决,接下来是当我们想要得到几天之后的日期,或是前几天的日期,下一周等等的日期,date-fns依然提供了相应地函数供我们使用

5. addDays():获得第n天之后的日期;

 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

有求之后的日期,就有求之后小时,分钟的,就不在一一累述了.用法也是相同的.只在这里提供函数名

6.addHours(): 获得当前小时之后的小时(比如现在5点, 得到七点的时间).

7.addMinutes():获得当前分钟之后n分钟的时间

8.addMonths(): 获得当前月之后n个月的月份

9.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分钟的时间的方法.

10: subHours(): 获得当前时间之前n小时的时间

11:subMinutes(): 获得当前时间之前n分钟的时间

12: subMonths():获得当前月份之前n个月的时间

说完这部分,下面来说下求时间差的一些方法. 这个在项目中也是相当常见的.

13: differenceInDays(): 获得两个时间相差几天,

function differenceInDays (
    dateLeft: Date | string | number,
    dateRight: Date | string | number
  ): number

传入两个参数, dateLeft为时间比较靠前的时间, dateRight 为时间比较靠后的时间. 返回一个number类型的数字

  const time = '2017-01-29 11:03:33';
    const date = new Date();
    console.log(format(date, 'YYYY-MM-DD HH:mm:ss'));
    console.log(differenceInCalendarDays(date, time));
    console.log(differenceInDays(date, time)); //705

注:在这里,还有一个函数为differenceInCalendarDays(); 在.ts文件中并未看出两者的区别.从字面的意思也只是认为这是在日程表里的日期.至于还有没有其他的区别,等日后实际应用中在做探索. 另外,在differenceInDays()应用中会出现差是-0的情况.在js中打印console.log(-0 === 0); 返回是true.至于如何区分这两个数值的区别.百度下便可得知.js判断0与-0区别

既然有求相差几天的函数,那么相差几小时,几分钟的方法也是有的. 用法也是一样的,不在举例子只展示方法

14:differenceInHours();获得两个时间相差的小时.

15: differenceInMinutes(): 获得两个时间相差的分钟

16: differenceInMonths():获得两个时间相差月份

17: differenceInWeeks(): 获得两个时间相差的周数

18: differenceInYears():获得两个时间相差的年数

19:startOfDay():返回传入日期一天开始的Date对象(一天开始的时间)

 function startOfDay (
    date: Date | string | number
  ): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

const today = new Date();
 const startDate = startOfDay(today); /Mon Jan 14 2019 00:00:00 GMT+0800 (中国标准时间)

20: endOfDay(): 获得传入日期一天的结束时间(与startOfDay对应)

 function endOfDay (
    date: Date | string | number
  ): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

	const today = new Date();
	const endDate = endOfDay(today);
    console.log('endDate', endDate);// Mon Jan 14 2019 23:59:59 GMT+0800 (中国标准时间)

21: startOfMonth():获取月份的第一天

function startOfMonth (
    date: Date | string | number
  ): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

	const today = new Date();
	 const startMonth = startOfMonth(today); //Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)
    const aa = format(startMonth, 'YYYY-MM-DD HH:mm:ss'); // 2019-01-01 00:00:00

22: endOfMonth(): 获得月份的最后一天

 function endOfMonth (
    date: Date | string | number
  ): Date

传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.

	const today = new Date();
	 const endMonth = endOfMonth(today); //Thu Jan 31 2019 23:59:59 GMT+0800 (中国标准时间)
    const aa = format(endMonth, 'YYYY-MM-DD HH:mm:ss'); // 2019-01-31 23:59:59
    console.log('endMonth', endMonth);

其他的诸如startOfHour(),startOfMinute(),startOfToday()等等方法就不一一介绍了.用法都一样.
写到这里发现竟然没有写getDay()这些方法. 先写这块把