Day. Js | more elegant in JavaScript date processing

Today I’m going to recommend a library called day.js that can help you with dates in JavaScript, because dates in JavaScript are so hard to use. It is completely unusable when doing business development, and you need to encapsulate various functions by yourself.

Why day.js

First, using day.js makes it easier to handle dates and times in JavaScript.

You’ve probably heard a lot about libraries for dealing with time in JavaScript, such as Moment, but it’s 2021 and it’s not recommended to use moment.js because it’s too clunky for a date-handling tool. Day.js is a more modern, lightweight, and extensible library.

Moment.js

Click here for volume size

Day.js

Click here for volume size

It’s very lightweight because it takes advantage of TreeShaking, and it’s extended by plugins, and we can import plugins as we want, so we only end up importing what we need.

What would we do without day.js

In native JavaScript, we get the current date like this

const today = new Date(a);const dd = String(today.getDate()).padStart(2.'0'); / /,
const mm = String(today.getMonth() + 1).padStart(2.'0'); / / month
const yyyy = today.getFullYear(); / / year
const curDate = `${yyyy}-${mm}-${dd}`

console.log(curDate)
// Output: 2021-09-17
Copy the code

This is all we need in Day.js, and there’s more to it than that.

import dayjs from "dayjs";

const curDate = dayjs().format('YYYY-MM-DD');

console.log(curDate)
// Output: 2021-09-17
Copy the code

Day. Js example

Now let’s look at some practical, interesting examples that are simpler and more readable than the native API.

1. Obtain the number of days between two dates

To view the document

import dayjs from "dayjs";

// The second parameter is specified as 'day' to indicate the daily granularity
dayjs(new Date(2021.10.1)).diff(new Date(2021.9.17), "day"); 
// Output: 15
Copy the code

2. Check whether the date is valid

To view the document

import dayjs from "dayjs";

dayjs("20").isValid(); 
// Output: false
dayjs("2021-09-17").isValid(); 
// Output: true
Copy the code

3. Obtain the days of the month

To view the document

import dayjs from "dayjs";

dayjs("2021-09-13").daysInMonth() 
// Output: 30
Copy the code

4. Add day, month, year, hour, minute, and second

To view the document

import dayjs from "dayjs";

dayjs("The 2021-09-17 08:10:00").add(20."minute").format('YYYY-MM-DD HH:mm:ss') 
// Output: 2021-09-17 08:30:00
Copy the code

5. Subtract days, months, years, hours, minutes and seconds

To view the document

import dayjs from "dayjs";

dayjs("The 2021-09-17 08:10:00").subtract(20."minute").format('YYYY-MM-DD HH:mm:ss')
// Output: 2021-09-17 07:50:00
Copy the code

Use plug-ins to extend functionality

1. RelativeTime

To view the document

Gets the time difference between the specified time and the present time.

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

dayjs("The 2021-09-16 13:28:55").fromNow();
// Output: 9 hours ago
Copy the code

Below are all the output tables

2. WeekOfYear

To view the document

Gets the week of the year in which the specified date is obtained

import dayjs from "dayjs";
import weekOfYear from "dayjs/plugin/weekOfYear";

dayjs.extend(weekOfYear);

dayjs("2021-09-13 14:00:00." ").week(); 
// Output: 38
Copy the code

3. IsSameOrAfter

To view the document

Checks whether a date is equal to or greater than a date

import dayjs from "dayjs";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";

dayjs.extend(isSameOrAfter);

dayjs("2021-09-17").isSameOrAfter("2021-09-16"); 
// Output: true
Copy the code

4. MinMax

To view the document

Gets the largest or smallest date in the array

import dayjs from "dayjs";
import minMax from "dayjs/plugin/minMax";

dayjs.extend(minMax)

const maxDate = dayjs.max([
    dayjs("2021-09-13"), 
    dayjs("2021-09-16"), 
    dayjs("2021-09-20")])const minDate = dayjs.min([
    dayjs("2021-09-13"), 
    dayjs("2021-09-16"), 
    dayjs("2021-09-20")
])

maxDate.format('YYYY-MM-DD HH:mm:ss') 
// Output: 2021-09-20 00:00:00
minDate.format('YYYY-MM-DD HH:mm:ss') 
// Output: 2021-09-13 00:00:00
Copy the code

5. IsBetween

To view the document

Checks whether the specified date is within the specified date range

import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";

dayjs.extend(isBetween);

// Use day as granularity for comparison
dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day");
// Output: true

// Use year for granularity comparison
dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year");
// Output: false
Copy the code

nagging

If this article is useful to you, your likes, comments and concerns are the biggest encouragement for me O(∩_∩)O👍👍👍