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

5,501 阅读7分钟

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

函数简介

函数名作用函数名作用
isToday()判断传入日期是否为今天
isYesterday()判断传入日期是否为昨天
isTomorrow()判断传入日期是否为明天
format()日期时间格式化
addDays()获得当前时间n天之后的日期subDays()获得当前时间n天之前的日期
addHours()获得当前时间n小时之后的时间subHours()获得当前时间n小时之前的时间
addMinutes()获得当前时间n分钟之后的时间subMinutes()获得当前时间n分钟之前的时间
addMonths()获得当前时间n个月之后的时间subMonths()获得当前时间n个月之前的时间
differenceInMinutes()获得两个时间相差的分钟数differenceInHours()获得两个时间相差的小时数
differenceInDays()获得两个时间相差的天数differenceInWeeks()获得两个时间相差的周数
differenceInMonths()获得两个时间相差的月数differenceInYears()获得两个时间相差的年数
getDate()获取传入的日期是几号getMinutes()获取传入时间的分钟数
getDay()获取传入的日期是星期几getHours()获取传入时间的小时数
getMonth()获取传入时间的月份getISOWeek()返回传入时间当前年份的第几周
isEqual()判断传入的时间是否相等

安装

npm install --save date-fns

angular项目中按需引入,例如:

import { addDays, format, subDays } from 'date-fns';

函数使用

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

源码:

  function isToday(date: Date | number): boolean
  namespace isToday {}

函数接收 Date 或 number 类型参数,返回 boolean 类型。

eg:

  const day = new Date();
  console.log(isToday(day)); // true

2. isYesterday() 判断传入日期是否为昨天

源码

  function isYesterday(date: Date | number): boolean
  namespace isYesterday {}

传入 Date 或 number 类型参数,返回 boolean 类型

eg:

  const date = new Date();
  console.log(isYesterday(date)); // false
  const timestamp = new Date().getTime(); //获得当前时间的时间戳
  console.log(isYesterday(timestamp)); // false

3. isTomorrow() 判断传入日期是否为明天

isTomorrow() 用法与 isToday()、isYesterday()一致,不再加以赘述。

4. format() 日期时间格式化

源码

  function format(
    date: Date | number,
    format: string,
    options?: {
      locale?: Locale
      weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
      firstWeekContainsDate?: number
      useAdditionalWeekYearTokens?: boolean
      useAdditionalDayOfYearTokens?: boolean
    }
  ): string
  namespace format {}

format() 函数传入参数为3个,第一个参数是必传参数,指需要被格式化的时间,可以是 Date 或 number 类型;第二个参数也是必传参数,指时间格式,例如 yyyy-MM-dd、HH:mm、yyyy-MM-dd HH:mm:ss ,是 string 类型;最后一个参数为可传参数,暂时没用到。

eg:

  const date = format(new Date(), 'yyyy-MM-dd');
  console.log(date) // 2023-03-14
  
  const date1 = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
  console.log(date1) // 2023-03-14 15:21:04 HH大写则为24小时格式
  
  const date2 = format(new Date(), 'yyyy-MM-dd hh:mm:ss');
  console.log(date2) // 2023-03-14 03:21:04 hh小写则为12小时格式
  
  const date3 = format(new Date(), 'HH:mm');
  console.log(date3) // 15:21 格式化出当前时间

当然,也可格式化几天前或几天后的日期,需搭配其他函数,后面会讲解到。

5. addDays() 获得当前时间n天之后的日期

源码

  function addDays(date: Date | number, amount: number): Date
  namespace addDays {}

addDays() 函数为获得当前日期后的某一天日期,需传入两个参数,第一个为 date,可以是 Date 或 number 类型,第二个为天数,number 类型,例如1,5,10;函数返回的是一个 Date 对象,因此往往搭配 format() 函数使用。

eg:

  // 当天日期为 2023-03-14
  const date = format(addDays(new Date(), 1), 'yyyy-MM-dd');
  console.log(date); // 2023-03-15
  const date1 = format(addDays(new Date(), 5), 'yyyy-MM-dd');
  console.log(date1); // 2023-03-19
  const date2 = format(addDays(new Date(), 10), 'yyyy-MM-dd');
  console.log(date2); // 2023-03-24

6. addHours() 获得当前时间n小时之后的时间

源码

  function addHours(date: Date | number, amount: number): Date
  namespace addHours {}

addHour() 函数需传入两个参数,需传入两个参数,第一个为 date,可以是 Date 或 number 类型,第二个为小时数,number 类型,例如1h,5h,10h;返回 Date 对象,常搭配 format() 函数使用。

eg:

  // 当前时间为 15:34
  const time = format(addHours(new Date(), 1), 'HH:mm');
  console.log(time); // 16:34 

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

源码

  function addMinutes(date: Date | number, amount: number): Date
  namespace addMinutes {}

与 addHours() 函数一致,不多加赘述。

eg:

  // 当前时间为 15:45
  const time = format(addMinutes(new Date(), 10), 'HH:mm');
  console.log(time); // 15:55

8. addMonths() 获得当前时间n个月之后的时间

源码

  function addMonths(date: Date | number, amount: number): Date
  namespace addMonths {}

与 addHours() 函数一致,不多加赘述。

eg:

  // 当天日期为 2023-03-14
  const date = format(addMonths(new Date(), 3), 'MM');
  console.log(date); // 06

9. subDays() 获得当前时间n天之前的日期

源码

  function subDays(date: Date | number, amount: number): Date
  namespace subDays {}

与 addDays() 函数用法一致。

eg:

  // 当天日期为 2023-03-14
  const date = format(subDays(new Date(), 10), 'yyyy-MM-dd');
  console.log(date); // 2023-03-04

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

与 addHours() 函数一致,不多加赘述。

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

与 addMinutes() 函数一致,不多加赘述。

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

与 addMonths() 函数一致,不多加赘述。

13. differenceInMinutes() 获得两个时间相差的分钟数

源码

  function differenceInMinutes(
    dateLeft: Date | number,
    dateRight: Date | number,
    options?: {
      roundingMethod?: string
    }
  ): number
  namespace differenceInMinutes {}

differenceInMinutes() 需要三个参数,前两个为必传,dateLeft为比较靠前的时间, dateRight 为比较靠后的时间,Date 或 number 类型;后一个为可选参数,返回的是 number 类型。

eg:

  const dateLeft = new Date(); // 相较于靠后的时间 2023-03-14
  const dateRight = subDays(new Date(), 10); // 相较于靠前的时间 2023-03-04
  console.log(differenceInMinutes(dateLeft, dateRight)); // 14400

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

differenceInHours函数使用与 differenceInMinutes() 函数类似,不多加描述。

15. differenceInDays() 获得两个时间相差的天数

源码

  function differenceInDays(
    dateLeft: Date | number,
    dateRight: Date | number
  ): number
  namespace differenceInDays {}

differenceInDays()函数需传入两个参数,均为 Date 或 number类型,返回的是 number。

16. differenceInWeeks() 获得两个时间相差的周数

17. differenceInMonths() 获得两个时间相差的月数

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

以上函数使用与 differenceInDays() 函数类似,不多加描述。

19. getDate() 获取传入的日期是几号

  function getDate(date: Date | number): number
  namespace getDate {}

函数需要传入一个参数,可以是 Date 或 number 类型,返回 number 类型的数据。

eg:

  // 当前时间为 2023-03-14
  const date = new Date();
  console.log(getDate(date)); // 14

20. getDay() 获取传入的日期是星期几

  function getDay(date: Date | number): 0 | 1 | 2 | 3 | 4 | 5 | 6
  namespace getDay {}

函数需要传入一个参数,可以是 Date 或 number 类型,返回 0~6 的整数。

eg:

  // 当前时间为 2023-03-14
  const date = new Date();
  console.log(getDay(date)); // 2 周二

21. getMonth() 获取传入时间的月份

  function getMonth(date: Date | number): number
  namespace getMonth {}

函数需要传入一个参数,可以是 Date 或 number 类型,返回 number 类型的数据。

eg:

  // 当前时间为 2023-03-14
  const date = new Date();
  console.log(getMonth(date)); // 2

该函数返回的数字从0开始,即0代表1月份,2代表3月份。

22. getMinutes() 获取传入时间的分钟数

  function getMinutes(date: Date | number): number
  namespace getMinutes {}

23. getHours() 获取传入时间的小时数

  function getHours(date: Date | number): number
  namespace getHours {}

24. getISOWeek() 返回传入时间当前年份的第几周

  function getISOWeek(date: Date | number): number
  namespace getISOWeek {}

eg:

  const date = new Date();
  console.log(getISOWeek(date)); // 11 第11周

25. isEqual() 判断传入的时间是否相等

  function isEqual(dateLeft: Date | number, dateRight: Date | number): boolean
  namespace isEqual {}

eg:

  const leftDate = new Date();
  const rightDate = addDays(new Date(), 10);
  console.log(isEqual(leftDate, rightDate)); // false

常见函数就介绍这么多,后续如果使用到新函数,将继续补充~