Easily Work with Dates in JavaScript using dayjs and comparision with date-fns
đź“’

Easily Work with Dates in JavaScript using dayjs and comparision with date-fns

 
 
JavaScript provides a built-in Date object that allows developers to work with dates and times. With the Date object, you can perform various operations, such as getting the current date and time, comparing dates, and formatting dates.
 
The Date object is accessed through the global Date function. To create a Date object, you can pass a date string to the Date function, like this:
 
let date = new Date("December 14, 2022");
 
You can also create a Date object using individual date and time values, like this:
 
let date = new Date(2022, 11, 14, 12, 0, 0);
The Date object has several methods that allow you to get information about the date and time, such as the year, month, day, hour, minute, and second. For example, you can use the getFullYear() method to get the year, and the getMonth() method to get the month.
 
let date = new Date("December 14, 2022"); let year = date.getFullYear(); // 2022 let month = date.getMonth(); // 11 // ...
 
In addition to the built-in Date object, there are also several libraries that make it easier to work with dates in JavaScript.

Dayjs

Day.js is a small, fast, and immutable date library that provides a similar API to Moment.js. To install day.js, you can use the npm package manager, like this:
 
npm install dayjs
 

1. Basic Getting the Current Date and Time with dayjs in JavaScript

 
Once you've installed day.js, you can create a day.js object using the dayjs() function,
// Get the current date and time using dayjs const now = dayjs(); // Format the date and time console.log(now.format('MM/DD/YYYY, h:mm:ss a')); // 12/14/2022, 10:15:30 am // Parse a date string using dayjs const dateString = '2022-12-14'; const date = dayjs(dateString); // Format the date using dayjs console.log(date.format('MM/DD/YYYY')); // 12/14/2022
 

2. Manipulating Dates with dayjs in JavaScript

// Parse a date string using dayjs const dateString = '2022-12-14'; const date = dayjs(dateString); // Add one month to the date const nextMonth = date.add(1, 'month'); // Subtract two days from the date const previousTwoDays = date.subtract(2, 'day'); // Check if the date is before a given date const isBefore = date.isBefore('2022-12-20');
 

3. Comparing Dates with dayjs in JavaScript”

// let's create some dates to work with const date1 = dayjs('2022-12-14'); const date2 = dayjs('2022-12-15'); // Check if date1 is before date2 console.log(date1.isBefore(date2)); // Output: true // Check if date1 is after date2 console.log(date1.isAfter(date2)); // Output: false // Check if date1 is the same as date2 console.log(date1.isSame(date2)); // Output: false
 
You can also compare two dates by using the .isSame() method, which returns a boolean value indicating whether two dates are the same.
 
const firstDate = dayjs('2022-12-01'); const secondDate = dayjs('2022-12-31'); const thirdDate = dayjs('2022-12-01'); // Check if the first and second dates are the same console.log(firstDate.isSame(secondDate)); // Output: false // Check if the first and second dates are the same year console.log(firstDate.isSame(secondDate,'year')); // Output: true // Check if the first and third dates are the same console.log(firstDate.isSame(thirdDate)); // Output: true
 
You can also specify the level of precision at which to compare the dates, using the .isSame() method's second argument. For example, you can compare only the year, month, or day, by passing in the string 'year', 'month', or 'day', respectively.
 

4. Sorting Dates with dayjs in JavaScript

The sort method can be used to sort an array of dates in ascending or descending order. For example:
let dates = [ dayjs('2022-12-14T12:00:00'), dayjs('2022-12-13T12:00:00'), dayjs('2022-12-15T12:00:00')]; dates.sort((a, b) => a.diff(b)); // sort dates in ascending order dates.sort((a, b) => b.diff(a)); // sort dates in descending order
 
The min and max methods can be used to find the earliest and latest dates in an array of dates, respectively. For example:
 
let dates = [ dayjs('2022-12-14T12:00:00'), dayjs('2022-12-13T12:00:00'), dayjs('2022-12-15T12:00:00')]; let earliestDate = dates.reduce((a, b) => a.isBefore(b) ? a : b); let latestDate = dates.reduce((a, b) => a.isAfter(b) ? a : b); console.log(earliestDate) // '17:10 12/14/2022' console.log(latestDate) // '17:10:14 2022-12-14'
 

5. From now

This dependent on RelativeTime plugin to work
 
RelativeTime adds .from .to .fromNow .toNow APIs to formats date to relative time strings (e.g. 3 hours ago). docs
 
If you pass true, you can get the value without the suffix.
 
import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; dayjs.extend(relativeTime); dayjs("1997-18-03").fromNow(); // '25 years ago' dayjs("1997-18-03").fromNow(true); // '25 years'
Range
Key
Sample Output
0 to 44 seconds
s
a few seconds ago
45 to 89 seconds
m
a minute ago
90 seconds to 44 minutes
mm
2 minutes ago ... 44 minutes ago
45 to 89 minutes
h
an hour ago
90 minutes to 21 hours
hh
2 hours ago ... 21 hours ago
22 to 35 hours
d
a day ago
36 hours to 25 days
dd
2 days ago ... 25 days ago
26 to 45 days
M
a month ago
46 days to 10 months
MM
2 months ago ... 10 months ago
11 months to 17months
y
a year ago
18 months+
yy
2 years ago ... 20 years ago
Check docs for customizing locales. ( Check docs )

Comparision date-fns dayjs

Two popular good libraries: Day.js and date-fns. Both libraries offer a range of methods for working with dates and times, and are known for their small size and performance.
 
We found that date-fns had the smallest size in our tests, coming in at just 1.6 KiB when using only one method. However, when using more methods, the size advantage of date-fns diminished, resulting in a final size of 3.63 KiB when using webpack and 3.6 KiB when using esbuild.
 
On the other hand, Day.js offers an API that is similar to that of Moment.js, making it an attractive option for projects that already use Moment.js. In our tests, Day.js was slightly larger than date-fns, with a size of 6.64 KiB when using webpack and 7.0 KiB when using esbuild. However, Day.js does require the use of plugins for some methods, which can increase the overall size of the library.
 
Overall, date-fns is the best choice for projects that are concerned about build size, while Day.js is a good option for projects that are looking to migrate from Moment.js.
Â