Day.js实战

柠檬豆腐脑
8,713 阅读7分钟

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

实际需求

最近在做项目时，需要定制一个如下图的时间范围选择组件，提供一些快捷选择项，我们来看看用day.js如何搞定它。

demo.png

基本使用

先创造一个dayjs对象

const now = dayjs()

console.log(now) // Wed Jul 21 2021 21:11:45
console.log(now.valueOf()) // 1626873105951
console.log(now.format('YYYY-MM-DD')) // 2021-07-21
  • valueOf方法：获取时间戳
  • format方法：格式化显示

Day.js官方文档地址：官方文档

我研究了一阵Moment.js，但是同事告诉我说Moment已经不维护了，有更轻量化的方案Day.js，而且Day.js和Moment.js 的 API 完全一样，用法相同。

实现需求

写文章时，‘今天’是2021年7月21日。

昨天

目标：拿到昨天的0点0分0秒的时间戳和23点59分59秒时间戳。

const yestoday =  dayjs().subtract(1, 'days') // Tue Jul 20 2021 21:13:36
const yestodayStart = yestoday.startOf('date') // Tue Jul 20 2021 00:00:00 
const yestodayEnd = yestoday.endOf('date') // Tue Jul 20 2021 23:59:59

console.log(yestoday)
console.log(yestodayStart, yestodayStart)
console.log(yestodayStart.valueOf(), yestodayEnd.valueOf()) // 1626710400000 1626796799999

通过subtract(1, 'days') 拿到昨天，通过startOf('date') 拿到当天的00:00:00，endOf('date') 拿到当天的23:59:59。这样我们的目标就达到了。

  • subtract方法：让时间向前移动。如subtract(1, 'days')向 前移动1天，subtract(2, 'months')向前移动2个月。
  • add方法：让时间向后移动。如add(1, 'days')向后移动1天；add(2, 'months')向后移动2个月。
  • startOf方法：设置到一个时间的开始。如startOf('date')设置时间到 00:00:00，startOf('month')设置时间到当月1号的00:00:00；
  • endOf方法：设置到一个时间的末尾。如endOf('date')设置时间到23:59:59；endOf('month')设置时间到月末最后一天的23:59:59；

通过subtract/add和startOf/endOf的组合，我们可以方便的获取相对于今天的任何时间。

接下来我们看更多实例。

前天

const theDayBeforeYestoday = dayjs().subtract(2, 'days') // Mon Jul 19 2021 22:11:12
const theDayBeforeYestodayStart =  theDayBeforeYestoday.startOf('date') // Mon Jul 19 2021 00:00:00
const theDayBeforeYestodayEnd =  theDayBeforeYestoday.endOf('date') // Mon Jul 19 2021 23:59:59
console.log('前天', theDayBeforeYestoday)
console.log('前天期间', theDayBeforeYestodayStart, theDayBeforeYestodayEnd)
console.log('前天时间戳期间', theDayBeforeYestodayEnd.valueOf(), theDayBeforeYestodayEnd.valueOf())

上周日

// 方式一
// 默认一周的第一天是周日，最后一天是周六。但是我们的习惯是一周第一天是周一，最后一天是周日。所以我们说的上周日，实际是dayjs的‘本周日’，也就是当前周的第一天。
const lastSunDay = dayjs().startOf('week') // Sun Jul 18 2021 00:00:00
const lastSunDayEnd =  lastSunDay.endOf('date') // Sun Jul 18 2021 23:59:59
console.log('上周日期间', lastSunDay, lastSunDayEnd)

// 方式二
const lastSunDayFromWeekday = dayjs().day(0) // Sun Jul 18 2021 00:00:00
console.log(lastSunDay.isSame(lastSunDayFromWeekday.startOf('date'))) // true

上面提到过，通过subtract/add和startOf/endOf的组合，我们可以方便的获取相对于今天的任何时间。除了这种方式，还有官方文档里的“取值/赋值”章节里展示的一些API。如其中的day方法，传入从0(星期天)到6(星期六)的数，可以将时间调整到对应星期的那一天。

  • isSame方法：比较两个时间是否相同。

除了isSame方法，更多比较方法在官方文档的“查询”章节。如isBefore判断时间是否在另一个提供的日期时间之前，isBetween判断时间是否在其他两个的日期时间之间。

本周一

本周一是dayjs中一周的第二天。

const Monday = dayjs().startOf('week').add(1, 'days') // Mon Jul 19 2021 00:00:00

上月最后一天

const lastDayOfLastMonth = dayjs().subtract(1, 'months').endOf('month'); // Wed Jun 30 2021 23:59:59

本月第一天

const firtstDayOfMonth = dayjs().startOf('months'); // Thu Jul 01 2021 00:00:00

本周

// 本周起始时间
const Monday = dayjs().startOf('week').add(1, 'days') 
// 本周末尾时间
const Sunday = dayjs().endOf('week').add(1, 'days') 

console.log(Monday.diff(Sunday, 'days')) // -6 一周有7天，显示少了1天。原因就是周日是到23时59分59秒，差一秒不足一天，被四舍五入了。
console.log(Monday.diff(Sunday, 'hours')) // -167 一周有168小时，显示少了1小时。不过我们要传给后端的就是Monday和Sunday的时间戳，后端可以根据周一零点到周日23点59分59秒的时间区间查找数据。
  • diff方法：两个日期时间之间的差异。date1.diff(date2)默认是两个日期相差的秒数。

除了diff方法。更多显示的方法在官方文档的“显示”章节理。如fromNow返回现在到当前实例的相对时间（dayjs('2000-01-01').fromNow() // 22 years ago）。

上周

const lastMonday = dayjs().subtract(1, 'weeks').startOf('week').add(1, 'days') // 上周起始时间
const lastSunday = dayjs().subtract(1, 'weeks').endOf('week').add(1, 'days') // 上周末尾时间

本月

// 本月起始时间
const firstDayOfMouth = dayjs().startOf('month') 
// 本月末尾时间
const lastDayOfMouth = dayjs().endOf('month')

上月

// 上月起始时间
const firstDayOfLastMouth = dayjs().subtract(1, 'months').startOf('month') //  Tue Jun 01 2021 00:00:00 
// 上月末尾时间
const lastDayOfLastMouth = dayjs().subtract(1, 'months').endOf('month') // Wed Jun 30 2021 23:59:59

本季度

// 本季度起始时间
const firstDayOfQuarter = dayjs().startOf('quarter') // Thu Jul 01 2021 00:00:00
//  本季度末尾时间
const lastDayOfQuarter = dayjs().endOf('quarter') // Thu Sep 30 2021 23:59:59

上季度

// 上季度起始时间
const firstDayOfLastQuarter = dayjs().subtract(1, 'quarters').startOf('quarter') // Thu Apr 01 2021 00:00:00
// 上季度末尾时间
const lastDayOfLastQuarter = dayjs().subtract(1, 'quarters').endOf('quarter') // Wed Jun 30 2021 23:59:59

本年

// 本年起始时间
const firstDayOfYear = dayjs().startOf('year') // Fri Jan 01 2021 00:00:00
// 本年末尾时间
const lastDayOfYear = dayjs().endOf('year') // Fri Dec 31 2021 23:59:59

去年

// 去年起始时间
const firstDayOfLastYear = dayjs().subtract(1, 'years').startOf('year') // Wed Jan 01 2020 00:00:00
// 去年末尾时间
const lastDayOfLastYear = dayjs().subtract(1, 'years').endOf('year') // Thu Dec 31 2020 23:59:59

最近3天

const first3day = dayjs().subtract(3, 'days').startOf('day') // Sun Jul 18 2021 00:00:00
const yestoday = dayjs().subtract(1, 'days').endOf('day') // Tue Jul 20 2021 23:59:59

最近3个月

const first3month = dayjs().subtract(3, 'months').startOf('month') // Thu Apr 01 2021 00:00:00
const first1month = dayjs().subtract(1, 'months').endOf('month') // Wed Jun 30 2021 23:59:59

本月5号

// 方式一
const number5 = dayjs().startOf('month').add(4, 'days') // Mon Jul 05 2021 00:00:00
// 方式二
const number5FromDates = dayjs().date(5);

上个月5号

// 方式一
const number5LastMouth = dayjs().subtract(1, 'months').startOf('month').add(4, 'days') // Mon Jul 05 2021 00:00:00
// 方式二
const number5FromDatesLastMouth = dayjs().subtract(1, 'months').dates(5);

本周周三

// 方式一
const Wednesday = dayjs().startOf('week').add(3, 'days') // Wed Jul 21 2021 00:00:0
// 方式二
const WednesdayFromDay = dayjs().day(3); // Wed Jul 21 2021 18:48:00

所有实验代码地址

我将实验代码放到了CodeOpen：实验代码

CodeOpen是个十分好用的线上编辑前端代码的网站，可以很方便的及时测试前端，并看到效果。如我这次为了实验Day.js。可以直接在CodeOpen引入它的CDN。这样再写代码的时候，就可以调用Day.js的API了。引入方式如下图：

WX20210721-232136@2x.png

今天的实战分享就到这里，有问题欢迎交流。

avatar
文章
阅读
粉丝