博客

安装

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()这些方法. 先写这块把

23: getDate(): 获取传入的日期是几号;

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

 
 
<

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

 console.log(getDate('2019-01-15 00:00:00')); // 15

 
 

24: getDay(): 获取传入的日期是星期几

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

 
 
<

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

console.log(getDay('2019-01-15 00:00:00')); // 2

 
 
<

25: getMonth(): 返回传入时间的月份

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

 
 

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

	const day =new Date();
   console.log(getMonth(day)); // 0

 
 

该函数返回的数字从0开始, 即0代表1月份. 这个和原生js Date对象的getMonth()是一样的.

26: getMinutes(): 返回传入时间的分钟数

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

 
 

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

	const day =new Date(); //15:09
   console.log(getMinutes(day)); // 9

 
 

27:getHours():返回传入时间的小时数

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

 
 

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

const　day = new Date();//15:22
console.log(getHours(day));　// 15

 
 

28: getISOWeek(): 返回传入时间所在月份的第几周．

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

 
 

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

    console.log(getISOWeek('2019-01-10 00:00:00'));　//2

 
 

29: isEqual(): 判断传入的时间是否相等

 function isEqual (
    dateLeft: Date | string | number,
    dateRight: Date | string | number
  ): boolean

 
 

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

   console.log('eee', isEqual('2019年1月2日', this.day)); //false

这个函数的比对有些过分了, 传入两个参数必须是相同格式的, 比如”YYYY-MM-DD”, 两个参数就必须都是这个格式, 如果不是则会返回false. 这个函数也可以理解为,在相同时间格式下,比两个时间是否相等.

30:max: 取得时间数组中的最大值

这个最大最小是指时间靠后为大. 反之为小

 function max (
    ...dates: (Date | string | number)[]
  ): Date

 
 

该函数传入一个参数, …dates: (Date | string | number)[]这种叫做spread扩展运算符, 他还有个反对者是rest参数. 这个运算符的好处就是只要是Date | string | number这三种类型的参数, 传几个, 你随意

为了方便举例子, 再次借用subDays(),这些来做

const day = new Date();
  console.log(max(subDays(day, 1), day, subDays(day, 2))); 
  //Mon Jan 28 2019 15:23:52 GMT+0800 (中国标准时间)

31: min(): 取得时间数组中的最小值

 function min (
    ...dates: (Date | string | number)[]
  ): Date

 
 

与max函数相同

const day = new Date();
 console.log(min(subDays(day, 1), day, subDays(day, 2)));
 //Sat Jan 26 2019 15:26:49 GMT+0800 (中国标准时间)

 
 

未完待续…