** 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)); //结果falseconsole.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}): stringnamespace format {}

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

  const date = new Date();console.log(format(date, 'HH:mm')); // 17:05console.log(format(date, 'YYYY-MM-DD HH:mm:ss')); //2019-01-03 17:26:33console.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-03console.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:33console.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:59console.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:09console.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 (中国标准时间)

32：目前版本不在支持string类型的问题

之前在说format时，可以传入string，最近在使用的时候，发现不可以。但是有时候后台会给我们传回“2020-07-29T16:00:00.000+0000”这种格式的数据。那我们应该怎么处理呢。
官方也给了解决方案。
那就是

import {format} from 'date-fns'
import { parseISO } from "date-fns/fp";
let date = '2020-07-29T16:00:00.000+0000';
format(parseISO(date), "yyyy-MM-dd HH:mm:ss"); //使用parseISO就可以解决了

未完待续…

TypeScript日期工具: date-fns日期工具的使用方法相关推荐

1. oracle 转number日期,oracle number型日期转date型日期

   在搞数据库时,发现有这样的一个字段,类型是NUMBER(38),查看了一下里面的数据,都是这样的, 1323957678114 1321326994295 1322129306804 13221297 ...

2. Java报告比较日期,Java Date Compare 日期比较

   /** * @Title : compareDate * @Description: 比较时间两个日期大小[yyyy-MM-dd],日期越晚则代表值越大 * @param current 参数日期一 ...

3. java时间日期工具类_java日期处理工具类

   java日期处理工具类 import java.text.DecimalFormat; import java.text.ParsePosition; import java.text.SimpleD ...

4. java8的时间工具类_JAVA8日期工具类

   /*** Java8日期时间工具类 * *@authorJourWon * @date 2020/12/13*/ public classLocalDateUtils {/*** 显示年月日时分秒,例 ...

5. 使用hutool工具类,计算日期差

   需求: 参数: 计划日期,实际日期 返回: 超时or提前,天数 hutool工具类 <dependency><groupId>cn.hutool</groupId> ...

6. java 数字翻译成英文_Java实现将数字日期翻译成英文单词的工具类实例

   本文实例讲述了Java实现将数字日期翻译成英文单词的工具类.分享给大家供大家参考,具体如下: package com.sunyard.etp.ag.util; import java.math.Big ...

7. 天干地支 工具类java_java日期工具类DateUtil-续二

   该版本是一次较大的升级,农历相比公历复杂太多(真佩服古人的智慧),虽然有规律,但涉及到的取舍.近似的感念太多,况且本身的概念就已经很多了,我在网上也是查阅了很多的资料,虽然找到一些计算的方法,但都有些 ...

8. java 数字翻译成英文_Java实现数字日期翻译成英文单词的工具类案例分享

   这篇文章主要介绍了Java实现将数字日期翻译成英文单词的工具类,结合完整实例形式分析了Java日期转换与字符串操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了Java实现将数字日期翻译成英文单词 ...

9. java日期工具类、日期格式校验、日期格式化

   文章目录 前言 日期格式校验 String转Date Date格式化为String类型 获取指定日期所在季度的第一天 获取指定日期所在季度的最后一天 LocalDate转Date 日期utils工具类 ...

10. java 日期计算类_java日期计算工具类【包含常用的日期计算方法】

    package com.test; import java.sql.Timestamp; import java.text.SimpleDateFormat; import java.util.Cal ...

最新文章

1. 核弹级漏洞！我把log4j扒给你看！
2. centos7进入用户模式修改root用户名
3. javascript 比量str今天的日期是，参数diff
4. OutOfMemoryError：无法创建新的本机线程–神秘化的问题
5. vb检测html事件,VB代码VB小程序：捕获 WebBrowser 控件的鼠标事件
6. qpython3h手机版怎么发短信_python如何使用腾讯云发送短信
7. ios textview间距_iOS开发之UITextView，设置textView的行间距及placeholder
8. u-boot环境的擦除，默认设置，批写入
9. springboot连接redis进行CRUD
10. 剑指offer第二版(C++实现)
11. 什么是索引？索引的作用是什么?Mysql目前主要的几种索引类型
12. python pyinstaller使用方法_【python快手菜】pyinstaller使用指南
13. 大前端学习工具及网站大全
14. 【利用编程来解决问题】——解数学题
15. 盘丝洞服务器维护,2010年8月3日定期维护公告 群雄逐鹿争霸赛
16. 图像极坐标变换的研究
17. UAP开发中遇到的问题
18. 榆熙教育电商学院：拼多多为何做“百亿补贴”？都带来了什么？
19. c语言二重指针做参数,C语言二重指针的运用
20. MEM/MBA数学强化（04）方程 函数 不等式

热门文章

1. PyTorch 60 分钟入门教程中的一些疑惑
2. 12864液晶8x16ascii点阵_Arduino基础入门篇31—LCD1602液晶显示
3. Postgresql数据库介绍
4. python self.a_python 中关于self到底有什么用续
5. defy 第三方recovery及超频
6. 2012.11.19
7. idea环境下 servlet配置导致jsp页面显示源码问题
8. essay--中国铁路 五纵三横 的主干线
9. MYSQL篇——性能调优专题
10. 高德免费基站定位（智能硬件定位）查询