The Best MomentJS Alternatives

When it comes to working with dates in JavaScript applications, nobody wants to mess with the Date object and looks for some ready-made libraries that allow easy handling of dates.

One of the most popular libraries is MomentJS - a JavaScript date library for parsing, validating, manipulating and formatting dates.

I used it for a long time without considering alternatives until I found out that it was too heavy for simple projects.

MomentJS Overview

MomentJS is by far the most popular library for dealing with dates, but it has a lot of drawbacks compared to the newer libraries designed to work with dates.

Even the project team considers it a completed project and would not provide new features.

We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.

Moment's main drawbacks:

• Mutability

  The Moment object in MomentJS is mutable, meaning that operations such as add, subtract, or set change the original Moment object:

const now = moment(); 
const tomorrow = now.add(1, "day"); 

// Prints "2021-01-11T11:01:09+01:00"
console.log(now.format());

// Prints "2021-01-11T11:01:09+01:00"
console.log(tomorrow.format());

To avoid such situations, you must remember to clone an object before doing anything with it:

const now = moment();
const tomorrow = now.clone().add(1, "day"); 

// Prints "2021-01-10T11:02:59+01:00"
console.log(now.format());

// Prints "2021-01-11T11:02:59+01:00"
console.log(tomorrow.format());

• Size

  MomentJS does not work well with tree shaking algorithms and gets very large, especially if you need full internationalization support.

  According to Budnlephobia - a tool that shows the performance impact of including the npm package, moment@2.29.1 takes 228.4Kb minified and 71.2Kb minified + gzipped:

If you scroll down Bundlephobia, you will see that it suggests some lightweight alternatives, like luxon, day-js, date-fns:

Let's go through them quickly and look at some sample code.

Npm Trends Overview

According to the npm trends, the most popular library for handling dates is still MomentJS, date-fns, dayjs and luxon are in the next places accordingly:

If we look at the Stats section, we can see that dayjs is the youngest, lightest and highest rated alternative:

Dayjs

Immutable

Dayjs is a minimalist JavaScript library that parses, validates, manipulates, and displays date and time information for modern browsers using a largely MomentJS-compatible API.

If you are used to working with MomentJS and want to get out quickly, dayjs may be the best option to start with.

Example of adding a day to today's date:

import dayjs from "dayjs";

const now = dayjs();
const tomorrow = now.add("1", "day");

// Prints "2021-01-10T11:28:17+01:00"
console.log(now.format());

// Prints "2021-01-11T11:28:17+01:00"
console.log(tomorrow.format())

By default, dayjs is shipped with the English locale only.

If other locales are needed, they can be loaded on-demand:

import "dayjs/locale/de";

Once imported, it becomes an active locale and you can switch to it or back to the default:

// Switch to "de"
dayjs.locale("de");

// Switch back to "en"
dayjs.locale("en");

Important note: Changing the locale does not affect existing instances.

Date-fns

Immutable

Date-fns is a library that provides the most comprehensive yet simple and consistent toolset
for manipulating JavaScript dates in a browser & Node.js. Read the "Why date-fns" section available here.

Example of adding a day to today's date:

import { addDays, formatISO } from "date-fns";

const now = new Date(2020, 0, 10);
const tomorrow = addDays(now, 1);

// Prints "2020-01-10T00:00:00+01:00"
console.log(formatISO(now));

// Prints "2020-01-11T00:00:00+01:00"
console.log(formatISO(tomorrow));

Date-fns supports the most common locales by default. The full list can be found here.

To use the locale, you must require it:

import { de } from "date-fns/locale";

And then pass an option to the function:

// "Januar"
format(now, "MMMM", { locale: de });

// "Januar"
format(tomorrow, "MMMM", { locale: de });

Luxon

Immutable

Luxon is a library for working with dates and times in JavaScript, created by one of the MomentJS maintainers. The full story behind the creation of this library is available here.

Example of adding a day to today's date:

import { DateTime } from "luxon";

const now = DateTime.local();
const tomorrow = now.plus({ days: 1 });

// Prints "2021-01-10T11:23:30.305+01:00"
console.log(now.toISO());

// Prints "2021-01-11T11:23:30.305+01:00"
console.log(tomorrow.toISO());

Luxon uses the native Intl API to provide easy-to-use internationalization.

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.

const dateTime = DateTime.local()
  .setLocale("de")
  .toLocaleString(DateTime.DATE_FULL);
  
// Prints "10. Januar 2021"
console.log(dateTime);

Refer to the installation guide for instructions on how to ensure that your platform has access to the Intl APIs and ICU data to power it.

This is especially important for Node, which does not ship with ICU data by default.

To learn how locales work in luxon, see the official documentation.

Summary

In this article, we have reviewed some of the most popular MomentJS alternatives, such as luxon, dayjs and date-fns.

There are other lesser-used libraries for handling dates, but some of them do not fully ship with the necessary functionality, and others are no longer updated.

Always make sure to consider alternative date handling libraries before installing MomentJS, and your project will definitely benefit from that.