安装
1. isToday():判断所传入日期是否为今天
2.isYesterday(): 判断是否为昨天
3.isTomorrow()判断是否为明天. 用法与isToday(), isYesterday()用法相同,就不加以累述了.
4.format(): 格式化日期函数
5. addDays():获得第n天之后的日期;
6.addHours(): 获得当前小时之后的小时(比如现在5点, 得到七点的时间).
7.addMinutes():获得当前分钟之后n分钟的时间
8.addMonths(): 获得当前月之后n个月的月份
9.subDays():获得当前日期之前n天的日期
10: subHours(): 获得当前时间之前n小时的时间
11:subMinutes(): 获得当前时间之前n分钟的时间
12: subMonths():获得当前月份之前n个月的时间
13: differenceInDays(): 获得两个时间相差几天,
14:differenceInHours();获得两个时间相差的小时.
15: differenceInMinutes(): 获得两个时间相差的分钟
16: differenceInMonths():获得两个时间相差月份
17: differenceInWeeks(): 获得两个时间相差的周数
18: differenceInYears():获得两个时间相差的年数
19:startOfDay():返回传入日期一天开始的Date对象(一天开始的时间)
20: endOfDay(): 获得传入日期一天的结束时间(与startOfDay对应)
21: startOfMonth():获取月份的第一天
22: endOfMonth(): 获得月份的最后一天
23: getDate(): 获取传入的日期是几号;
24: getDay(): 获取传入的日期是星期几
25: getMonth(): 返回传入时间的月份
26: getMinutes(): 返回传入时间的分钟数
27:getHours():返回传入时间的小时数
28: getISOWeek(): 返回传入时间所在月份的第几周．
29: isEqual(): 判断传入的时间是否相等
30:max: 取得时间数组中的最大值
31: min(): 取得时间数组中的最小值
** 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
1
在angualr5.0项目中只需在使用时引入就好了,不需要在module.ts文件中引入.需要什么函数,就引入什么函数.
import { isToday, format } from 'date-fns';
1
1. isToday():判断所传入日期是否为今天
通过查看date-fns的ts文件:` function isToday (date: Date | string | number ): boolean namespace isToday {}`
1
我们可以知道该函数接收 date, string, number类型参数. 返回boolean类型.
举个例子:
const day = new Date();
console.log(isToday(day)); // 结果为: true
1
2
同时我们也验证下传入字符串是否可行
console.log(isToday("2019-01-01T06:35:00.000Z")); //结果false
1
那既然有判断今天的,是否有判断是否为昨天,明天的呢,答案是有的
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
1
2
3
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 {}
1
2
3
4
5
6
7
8
该函数传入三个参数, 第一个参数为必传参数,可以为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
1
2
3
4
5
6
日期格式问题的解决,接下来是当我们想要得到几天之后的日期,或是前几天的日期,下一周等等的日期,date-fns依然提供了相应地 函数供我们使用
5. addDays():获得第n天之后的日期;
function addDays (
date: Date | string | number,
amount: number
): Date
1
2
3
4
该函数需要传入两个参数,第一个为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
1
2
3
4
有求之后的日期,就有求之后小时,分钟的,就不在一一累述了.用法也是相同的.只在这里提供函数名
6.addHours(): 获得当前小时之后的小时(比如现在5点, 得到七点的时间).
7.addMinutes():获得当前分钟之后n分钟的时间
8.addMonths(): 获得当前月之后n个月的月份
9.subDays():获得当前日期之前n天的日期
function subDays (
date: Date | string | number,
amount: number
): Date
1
2
3
4
该函数传入两个参数,第一个参数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
1
2
3
同样的和获得之后的时间一样, 也有获得之前n小时,n分钟的时间的方法.
10: subHours(): 获得当前时间之前n小时的时间
11:subMinutes(): 获得当前时间之前n分钟的时间
12: subMonths():获得当前月份之前n个月的时间
说完这部分,下面来说下求时间差的一些方法. 这个在项目中也是相当常见的.
13: differenceInDays(): 获得两个时间相差几天,
function differenceInDays (
dateLeft: Date | string | number,
dateRight: Date | string | number
): number
1
2
3
4
传入两个参数, 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
1
2
3
4
5
注:在这里,还有一个函数为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
1
2
3
传入一个参数,可以是Date类型,string, number类型. 返回一个Date对象.
const today = new Date();
const startDate = startOfDay(today); /Mon Jan 14 2019 00:00:00 GMT+0800 (中国标准时间)
1
2
20: endOfDay(): 获得传入日期一天的结束时间(与startOfDay对应)
function endOfDay (
date: Date | string | number
): Date
1
2
3
传入一个参数,可以是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 (中国标准时间)
1
2
3
21: startOfMonth():获取月份的第一天
function startOfMonth (
date: Date | string | number
): Date
1
2
3
传入一个参数,可以是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
1
2
3
22: endOfMonth(): 获得月份的最后一天
function endOfMonth (
date: Date | string | number
): Date
1
2
3
传入一个参数,可以是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);
1
2
3
4
其他的诸如startOfHour(),startOfMinute(),startOfToday()等等方法就不一一介绍了.用法都一样.
写到这里发现竟然没有写getDay()这些方法. 先写这块把
23: getDate(): 获取传入的日期是几号;
function getDate (
date: Date | string | number
): number
1
2
3
传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据
console.log(getDate('2019-01-15 00:00:00')); // 15
1
24: getDay(): 获取传入的日期是星期几
function getDay (
date: Date | string | number
): number
1
2
3
传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据
console.log(getDay('2019-01-15 00:00:00')); // 2
1
25: getMonth(): 返回传入时间的月份
function getMonth (
date: Date | string | number
): number
1
2
3
传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据
const day =new Date();
console.log(getMonth(day)); // 0
1
2
该函数返回的数字从0开始, 即0代表1月份. 这个和原生js Date对象的getMonth()是一样的.
26: getMinutes(): 返回传入时间的分钟数
function getMinutes (
date: Date | string | number
): number
1
2
3
传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据
const day =new Date(); //15:09
console.log(getMinutes(day)); // 9
1
2
27:getHours():返回传入时间的小时数
function getHours (
date: Date | string | number
): number
1
2
3
传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据
const day = new Date();//15:22
console.log(getHours(day)); // 15
1
2
28: getISOWeek(): 返回传入时间所在月份的第几周．
function getISOWeek (
date: Date | string | number
): number
1
2
3
传入一个参数,可以是Date类型,string, number类型. 返回一个number类型的数据
console.log(getISOWeek('2019-01-10 00:00:00')); //2
1
29: isEqual(): 判断传入的时间是否相等
function isEqual (
dateLeft: Date | string | number,
dateRight: Date | string | number
): boolean
1
2
3
4
传入两个参数,可以是Date类型,string, number类型.返回一个Boolean类型.
console.log('eee', isEqual('2019年1月2日', this.day)); //false
1
2
这个函数的比对有些过分了, 传入两个参数必须是相同格式的, 比如"YYYY-MM-DD", 两个参数就必须都是这个格式, 如果不是则会返回false. 这个函数也可以理解为,在相同时间格式下,比两个时间是否相等.
30:max: 取得时间数组中的最大值
这个最大最小是指时间靠后为大. 反之为小
function max (
...dates: (Date | string | number)[]
): Date
1
2
3
该函数传入一个参数, …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 (中国标准时间)
1
2
3
4
31: min(): 取得时间数组中的最小值
function min (
...dates: (Date | string | number)[]
): Date
1
2
3
与max函数相同
const day = new Date();
console.log(min(subDays(day, 1), day, subDays(day, 2)));
//Sat Jan 26 2019 15:26:49 GMT+0800 (中国标准时间)