- 安装
- 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
在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 (中国标准时间)
未完待续…
