This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

Actual demand

While working on a recent project, we needed to customize a time-range selection component as shown in the picture below, providing some quick options. Let’s see how to do this with day.js.

The basic use

Start by creating a DayJS object

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
Copy the code
  • ValueOf method: Get the timestamp
  • Format: Formats the display

Day.js Official document address: official document

I’ve been working on moment.js for a while, but my colleagues tell me that Moment is no longer maintained and that there is a lighter solution called Day.js, which has exactly the same API and uses the same as moment.js.

Implementation requirements

As OF this writing, ‘today’ is July 21, 2021.

yesterday

Goal: Get yesterday’s 00:00.00 and 23:59:59 time stamps.

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
Copy the code

Subtract (1, ‘days’) from yesterday, startOf(‘date’) from 00:00:00, and endOf(‘date’) from 23:59:59. So we’ve achieved our goal.

  • Subtract method: Allow time to move forward. For example subtract(1, ‘days’) moves forward by 1 day, and subtract(2, ‘months’) moves forward by 2 months.
  • Add method: Move the time backwards. For example, add(1, ‘days’) moves back 1 day; Add (2, ‘months’) moves back 2 months.
  • StartOf method: set to the beginning of a time. For example, set startOf(‘date’) to 00:00:00 and startOf(‘month’) to 00:00:00 on the first day of the month.
  • EndOf method: set to the endOf a time. For example, endOf(‘date’) sets the time to 23:59:59; EndOf (‘month’) sets the time to 23:59:59 on the last day of the month;

Subtract/Add and startOf/endOf is a combination that allows easy access to any time relative to today.

Let’s look at some more examples.

The day before yesterday

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 The console. The log (' the day before yesterday, theDayBeforeYestoday) console. The log (theDayBeforeYestodayStart 'during the day before yesterday, TheDayBeforeYestodayEnd) console. The log (' during the day before yesterday the timestamp, theDayBeforeYestodayEnd. The valueOf (), theDayBeforeYestodayEnd. The valueOf ())Copy the code

On Sunday,

By default, the first day of a week is Sunday, and the last day is Saturday. But our custom is that the first day of the week is Monday and the last day is Sunday. So when we say Last Sunday, we actually mean 'this Sunday' for DayJS, the first day of the current week. 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(' during lastSunDay ', lastSunDay, // const lastSunDayFromWeekday = dayjs().day(0) // Sun Jul 18 2021 00:00:00 console.log(lastSunDay.isSame(lastSunDayFromWeekday.startOf('date'))) // trueCopy the code

Subtract/Add and startOf/endOf as mentioned above, we can easily capture any time relative to today by combining subtract/ Add and startOf/endOf. In addition to this approach, there are some apis shown in the “Value/Assignment” section of the official documentation. As in the day method, passing in numbers from 0(Sunday) to 6(Saturday) adjusts the time to the corresponding day of the week.

  • IsSame method: Compares whether two times are the same.

In addition to the isSame method, more comparison methods are listed in the “Query” section of the official documentation. For example, isBefore determines whether the time isBefore the date and time provided by another, and isBetween determines whether the time isBetween the other two.

On Monday

Monday is the second day of the week in DayJS.

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

Last day of the month

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

First day of the month

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

This week,

// Const Monday = dayjs().startof ('week').add(1, 'days') // Const Sunday = dayjs().endof ('week').add(1, 'days') console.log(Monday. Diff (Sunday, 'days')) // -6 There are seven days in a week, and one day is displayed less. The reason is that Sunday is 23:59:59, less than a day, so it's rounded off. Console. log(Monday. Diff (Sunday, 'hours')) // -167 There are 168 hours in a week, showing 1 hour less. But what we're going to pass to the back end is the time stamps for Monday and Sunday, and the back end can look it up from 00:00 Monday to 23:59:59 Sunday.Copy the code
  • Diff method: The difference between two dates and times. Date1. diff(date2) Defaults to the number of seconds between two dates.

Except the diff method. More information about display methods can be found in the “Display” section of the official documentation. For example, fromNow returns the relative time between now and the current instance (dayjs(‘2000-01-01’).fromnow () // 22 years ago).

Last week,

const lastMonday = dayjs().subtract(1, 'weeks').startOf('week').add(1, Subtract (1, 'weeks').add(1, 'days') // Last week start time const lastSunday = dayjs().subtract(1, 'weeks').add(1, 'days'Copy the code

This month,

// Month end const firstDayOfMouth = dayjs().startof ('month') // Month end const lastDayOfMouth = dayjs().endof ('month')Copy the code

Last month,

Const firstDayOfLastMouth = dayjs().subtract(1, subtract) 'months').startof ('month') // Tue Jun 01 2021 00:00:00 // Last month end time const lastDayOfLastMouth = dayjs().subtract(1, 'months').endOf('month') // Wed Jun 30 2021 23:59:59Copy the code

This quarter

// Const firstDayOfQuarter = dayjs().startof ('quarter') // Thu Jul 01 2021 00:00:00 // Const end of the quarter lastDayOfQuarter = dayjs().endOf('quarter') // Thu Sep 30 2021 23:59:59Copy the code

In the last quarter

Const firstDayOfLastQuarter = dayjs().subtract(1, subtract) 'quarters').startof ('quarter') // Thu Apr 01 2021 00:00:00 // Const lastDayOfLastQuarter = dayjs(). Subtract (1, subtract) 'quarters').endOf('quarter') // Wed Jun 30 2021 23:59:59Copy the code

This year,

// Const firstDayOfYear = dayjs().startof ('year') // Fri Jan 01 2021 00:00:00 // Const lastDayOfYear = dayjs().endOf('year') // Fri Dec 31 2021 23:59:59Copy the code

Last year,

Const firstDayOfLastYear = dayjs().subtract(1, subtract) 'years').startof ('year') // Wed Jan 01 2020 00:00:00 // Year end time const lastDayOfLastYear = dayjs().subtract(1, 'years').endOf('year') // Thu Dec 31 2020 23:59:59Copy the code

The last three days

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

Copy the code

Last 3 months

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
Copy the code

This month 5,

// const number5 = dayjs().startof ('month').add(4, 'days') // const date = dayjs().date(5);Copy the code

On the 5th of last month

// const number5LastMouth = dayjs().subtract(1, 'months').startof ('month').add(4, 'days') / / Mon Jul 05 2021 00:00:00 / / two way of const number5FromDatesLastMouth = dayjs () subtract (1,' up '). Dates (5);Copy the code

This week on Wednesday

// Const Wednesday = dayjs().startof ('week').add(3, 'days') // Rep. rep. rep. Day (3); rep. rep. Rep. Day (3); // Wed Jul 21 2021 18:48:00Copy the code

All experiment code addresses

I put the experimental code in CodeOpen: Experimental code

CodeOpen is a great website for editing front-end code online, making it easy to test the front-end in time and see the results. For example, I tried day.js this time. You can import its CDN directly in CodeOpen. This allows you to call the DAY.js API when writing code. The introduction method is shown as follows:

Today’s actual combat to share here, if you have any questions, welcome to exchange.