Â
Â
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.
Â