DEV Community

Cover image for Day.js | The lightest API to handle dates in JS
Product Hackers profile image Jesús Mejías Leiva
Jesús Mejías Leiva for Product Hackers

Posted on • Edited on • Originally published at blog.susomejias.dev

Day.js | The lightest API to handle dates in JS

#javascript #webdev

Today I am writing again to bring you a library that will help us with the handling of dates in JavaScript, yes, as we all know the handling of dates in JavaScript is not very intuitive.

🤔 Why use dayjs?

Basically the justification for using dayjs is to simplify the handling of dates in JavaScript.

It is a fairly widespread library and which you have probably heard of already, it was presented a while ago as an alternative to Moment which is not recommended for use today, the main reason is the weight and the appearance of new alternatives that offer more modern and lighter solutions, dayjs is an example of this.

Moment

see more here

image

Dayjs

see more here

image

It is very light because it takes advantage of the Treeshaking since the library is fully extensible through plugins that we will add depending on the needs that arise, in this way we will only import the things we need.

🧪 Some examples

Now we will go to see some examples where its use would be justified compared to the native API, either for simplicity, readability or also to prevent possible errors.

We are going to review some of the most interesting functionalities that dayjs offers us.

🧹 Without plugins

Get difference in days between two dates

docs

import dayjs from "dayjs";

dayjs(new Date(2020, 5, 10)).diff(new Date(2020, 5, 1), "day"); // output:  9
Enter fullscreen mode Exit fullscreen mode

Check if the given date is valid or not

docs

import dayjs from "dayjs";

dayjs("20").isValid(); // output:  false
dayjs("2021-09-13").isValid(); // output:  true
Enter fullscreen mode Exit fullscreen mode

Get the number of days in the month

docs

import dayjs from "dayjs";

dayjs("2021-09-13").daysInMonth() // output: 30
Enter fullscreen mode Exit fullscreen mode

Add days, months, years, hours, minutes, seconds etc.

docs

import dayjs from "dayjs";

dayjs("2021-09-13 20:09:09").add(20, "minute").format() // output: 2021-09-13T20:29:09+02:00
Enter fullscreen mode Exit fullscreen mode

Subtract days, months, years, hours, minutes, seconds etc

docs

import dayjs from "dayjs";

dayjs("2021-09-13 20:09:09").subtract(20, "minute").format() // output: 2021-09-13T19:49:09+02:00
Enter fullscreen mode Exit fullscreen mode

⚡ Extending the functionality through plugins

RelativeTime

docs

Get time difference in string format between current date and given date using Spanish locale

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

dayjs.locale("es");
dayjs.extend(relativeTime);

dayjs("2021-09-14T13:28:55.979Z").fromNow(); // example output: en 3 horas
Enter fullscreen mode Exit fullscreen mode

WeekOfYear

docs

Get week of year

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

dayjs.extend(weekOfYear);

dayjs("2021-09-13T13:28:55.979Z").week(); // output: 38
Enter fullscreen mode Exit fullscreen mode

IsSameOrAfter

docs

Check if one date is equal to or greater than another

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

dayjs.extend(isSameOrAfter);

// To use `year` granularity pass the second parameter
dayjs("2021-09-13").isSameOrAfter("2021-09-14", "year"); // output: true
Enter fullscreen mode Exit fullscreen mode

MinMax

docs

Get the highest date or the lowest date among the dates of an 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() // output: 2021-09-20T00:00:00+02:00  
minDate.format() // output: 2021-09-13T00:00:00+02:00
Enter fullscreen mode Exit fullscreen mode

IsBetween

docs

Check if the given date is within the indicated date range

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

dayjs.extend(isBetween);

// To use `day` granularity pass the third parameter
dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day"); //output: true

// To use `year` granularity pass the third parameter
dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year"); //output: false
Enter fullscreen mode Exit fullscreen mode

AdvancedFormat

docs

Vitamin default formatting options

import dayjs from "dayjs";
import advancedFormat from "dayjs/plugin/advancedFormat";

dayjs.extend(advancedFormat);

dayjs("2021-09-14").format("Q Do k kk X x"); // output: 3 14th 24 24 1631570400 1631570400000
Enter fullscreen mode Exit fullscreen mode

As can be seen in the examples above, the API is quite simple and readable, it seems to me without a doubt a great option if we need to solve some other complex function with dates in JavaScript.

For view more information go to official dayjs docs.

Thanks for reading me. 😊

thanks

Top comments (12)

Collapse
 
fabian3081 profile image
Fabian Scharfenberger •

Didn't heared of day.js before. Looks as light as you said.
Thanks, I'll keep it in mind for my future projects.

Collapse
 
susomejias profile image
Jesús Mejías Leiva •

Thank you for your comment, I am glad that it is useful to you 🤗

Collapse
 
rcoundon profile image
Ross Coundon •

It's nice to use but there's an outstanding issue in dealing with Daylight Savings Time raised a few months ago which meant we had to move to a different library. We now use Luxon, which works very well.

Collapse
 
susomejias profile image
Jesús Mejías Leiva • • Edited

Oh thanks for your contribution 🎉 i was unaware of this topic 🙈

Collapse
 
rcoundon profile image
Ross Coundon •

No problem, it's this one
github.com/iamkun/dayjs/issues/1260
but I see there have been a lot of similar issues raised since

Collapse
 
gerreth profile image
Gerret Halberstadt •

I was quite happy with dayjs until I had to deal with issues with different timezones and DST. We started to migrate to luxon and luckily the API is mostly the same. I'd strongly recommend to consider this in your decision to use dayjs as it could help you from some hard to spot bugs.

Collapse
 
susomejias profile image
Jesús Mejías Leiva •

Thank you for your contribution! 🤗

Collapse
 
pawelmiczka profile image
Paweł Miczka •

Isn't date-fns better? I didn't tested it out but I think that dayjs will include whole library in production build. In the other hand date-fns has is tree shakable.

Collapse
 
susomejias profile image
Jesús Mejías Leiva • • Edited

Dayjs also supports tree-shaking, although date-fns is another great library for handling dates in JavaScript 🤗

Collapse
 
vulchivijay profile image
Vijaya Kumar •

We can write our own right.

Collapse
 
smhz101 profile image
Muzammil Hussain •

It seems amazing, i'll definitely use in my next project. Thanks for sharing...

Collapse
 
susomejias profile image
Jesús Mejías Leiva •

Thanks to you for your comment, good luck with that next project 😜

View full discussion (12 comments)

Read next

hanzla-baig profile image

Update Front-end Dev.to Challenge

Hanzla Baig -

valeriavg profile image

Day 21: In the name of Progress! 📈

Valeria -

anwarachilles profile image

Custom YouTube Player Gadget with Javascript

Anwar Achilles -

pardnchiu profile image

FlexPlyr: 模組化多風格播放器

邱敬幃 Pardn Chiu -