DEV Community

Cover image for date-fns: a moment.js alternative

date-fns: a moment.js alternative

idoshamun profile image Ido Shamun Originally published at ・3 min read

JavaScript Date is no fun! It's OK for the basics, but once you want to do more complex manipulations, you have to go back and forth from milliseconds (number) to Date. It makes our code less readable and coding more tedious.

Moment.js was my go-to library for everything that has to do with dates. JavaScript date format, adding or subtracting time, converting between timezones, and many more. Momentjs has its drawbacks, but it was a great tool. Unfortunately, the team decided to declare that it's now in maintenance mode and is considered a legacy project. It means only one thing we have to look for alternatives.

Recently, I started using date-fns, and I like it! date-fns is a set of utility functions for JavaScript dates. Unlike moment, date-fns uses the Date object and doesn't create a new object to encapsulate it.
Second, it's genuinely a set of functions. You import whatever functions you want and use them with the Date objects. Yes, yes, you got it right, tree-shaking out-of-the-box! Your production bundle will include only the functions you export and used.

On their website, they mention a few more perks, which are fantastic! Typescript support, immutable by default, consistent with timezones, internationalization & localization support (with tree-shaking as well!), and more goodies.

The community is already pretty big with 181 contributors, including financial contributors, among them you can also find Addy Osmani.

Coding time!

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'Today is a' iiii")
//=> "Today is a Monday"

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

Please note that we import only functions and provide them with a regular js date object.

To achieve the same with moment.js:

import moment from 'moment';

`Today is a ${moment().format('dddd')}`
//=> "Today is a Monday"

moment().subtract(3, 'days').fromNow()
//=> "3 days ago"

moment().subtract(3, 'days').calendar();
//=> "Last Friday at 7:26 p.m."

This time we have to import the moment function, which creates a new object with all momentjs functionality. It means no tree-shake, and we cannot use js date object. We must convert it to a momentjs object first.

I think that's all you need to know to give it a try and see if you like it.

I want to thank the moment.js team from the bottom of my heart! ❤️

More posts that might be interesting as well

Daily delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Daily Poster

Discussion (9)

Editor guide
dollier profile image
Dorian C

I recently change one of my project using moment with dayjs and it was a breeze. I basically changed all moment() in dayjs() and it worked (expect for weekShortDays and weekdays in my experience), and it's 2kb. I'd love to hear your opinion on the two different libraries and why you choose date-fns, since I'm still in the process of choosing a library.

idoshamun profile image
Ido Shamun Author

Honestly, I don't like that I have to create a custom object like in moment or dayjs (as you shown) to use the library. I prefer a set of functions that I can immediately apply on every date object.
This is exactly date-fns approach. They provide you functions not objects.

patarapolw profile image
Pacharapol Withayasakpunt • Edited

Now, I have to wonder. Is JavaScript Date object good enough?

Can it validate 2020-13-32, or is it browser dependent?

patarapolw profile image
Pacharapol Withayasakpunt

Only that there is no piping in JavaScript (I think).

Thread Thread
idoshamun profile image
Ido Shamun Author

What do you mean?

Thread Thread
patarapolw profile image
Pacharapol Withayasakpunt

|> or %>%. I know it is only for the sake of convenience, though.

pavelloz profile image
Paweł Kowalski

I use date-fns, but worth noting that there is also luxon from moment.js authors. :)

andrewbaisden profile image
Andrew Baisden

So many alternatives to moment.js now great to see so many options.

evrtrabajo profile image