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

date-fns: a moment.js alternative

idoshamun profile image Ido Shamun Originally published at daily.dev ・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.

P.S
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

Posted on by:

idoshamun profile

Ido Shamun

@idoshamun

Co-Founder of daily.dev and a passionate software developer

Discussion

pic
Editor guide
 

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.

 

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.

 

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

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

stackoverflow.com/questions/744532...

 

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

What do you mean?

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

 

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

 

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