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
常见函数就介绍这么多,后续如果使用到新函数,将继续补充~