Stop using Moment.js for Dates and Time in JavaScript

Luxon.js is the modern replacement of Moment.js

Anurag Kanoria
Oct 21 · 5 min read

Anyone who has worked with JavaScript’s native Date method knows the limitations and the frustration it comes with. Anything beyond basic formatting and operations is cumbersome with the native Date object.

Therefore, most developers prefer other libraries for Date and Time operations. One such widely used library is Moment.js however, there is a better library that not many of us know or use.

Luxon.js is a JavaScript library built by one of the Moment.js developers to overcome the drawbacks of the Moment.js package. Since it is built by the same developers, you may find a lot of similarities between the two.

Although I won’t be diving deep since this article is geared towards the installation and usage of Luxon with vanilla JavaScript, some perks of using Luxon over Moment are listed below:-

  1. Luxon is Immutable(can’t be mutated or changed)
  2. Better timezone support
  3. Explicit API

Installing Luxon.js is very straightforward. There are mainly 3 ways to install and get started with Luxon.js:

  1. Load manually- You can install download full Luxon.js from here and just include the Luxon.js script tag like this <script src=”luxon.js”></script> .
  2. NPM- Luxon.js supports Node 6+ and by running npm install — save luxon you can quickly install it. You have to refer to it by const { DateTime } = require(“luxon”); in your JavaScript file.
  3. CDN- This is the method that I would be using in this article. You can grab the latest CDN from here and simply paste the HTML in between the head tags of your main index.html file.

It is worth noting that to support IE 10 or 11, you need to add the following lines to your HTML head section as well:

As I have stated before, I will use CDN to install Luxon.js. Therefore, I need to add the following lines to my HTML file:

That’s really all we need to get started.

We can now use all the functions and tools that Luxon offers. To keep things simple, I would not be using an external JS file instead I will write the code in our HTML files itself.

Basic DateTime object

DateTime.local takes any number of arguments, all the way out to milliseconds. Underneath, this is just a Javascript Date object.

Here is what our HTML file looks like right now:

Formatting DateTime

Luxon offers lots of tools for making date and time human-readable, but two of them are most important. If you want to format a human-readable string, use toLocaleString:

This works well across different locales by letting the browser figure out what order the different parts go in and how to punctuate them.

However, if you want the string read by another program or if you want to store it in a database, you may want to use toISO:

Custom formats are also supported. Official documents provide details on further formatting.

Luxon makes it very easy to perform math operations on date and time. Deducting or adding days and hours are some of the operations that Luxon.js supports.

Below is a code snippet that demonstrates the addition and minus operations.

As you can see, the methods minus andplus need a JSON object as an argument.

One of the main areas where Luxon shines is its support for Intl capabilities. Some of the most important ones are in formatting:

Luxon’s Info class can be used to list date and time from various locales:

Durations

Many times we need to store the duration of a session or a story. Luxon provides a Duration class that can be used to represent time in a very accessible manner. You create them like this:

Additionally, you can use these duration objects to add or subtract from DateTime objects as well as shown below.

Luxon provides various getters by default. This makes it very easy to access the data stored in these Duration objects. Some of the getters are listed below:

I have stated some of the major and most commonly used functions. You can find all the resources and much more on this topic in their official Duration API docs.

Calendars

Luxon has fabulous support for non-standard calendars as well.

As per their official documentation, Luxon has full support for Gregorian and ISO Week calendars. In layman’s term, Luxon can parse dates specified in those calendars, format dates into strings using those calendars, transform dates using the units of those calendars, and much more.

For instance, here is Luxon working directly with an ISO calendar:

Although, it is worth mentioning that using non-stand calendars is a pretty rare scenario but it is still nice to know that Luxon has support for wide standards of the calendar.

Time zones

Luxon supports different time zones. As usual, the official documentation has a whole big section about it. Users can access your data from anywhere around the globe, thus it becomes imperative to show the time in their local time zone for enhanced user experience.

You can create DateTimes in specific zones and change their zones:

Luxon also supports UTC directly:

One of my favorite features of Luxon is its ability to validate Date and time. It is very common to get inputs like “September 45th” while using calendars. However, Luxon acknowledges these errors and marks them accordingly.

It provides a isValid method to check if the date is valid or not.

Converting an invalid DateTime object returns a clear error ‘Invalid DateTime’ which can come quite handy while showing error logs to users.

Luxon.js is an exciting yet simple DateTime library. It surely overcomes every drawback of the native DateTime object of JavaScript while providing vital support for common and everyday use cases such as TimeZones and Durations.

Luxon.js can be rightfully considered as a modern, sleek replacement for Moment.js. It borrows a lot of ideas and concepts from Moment.js and builds on it.

However, although one would find many similarities between the two packages, Luxon has some subtle differences such as Luxon methods often take option objects as their last parameter. You can find the full list of differences on their official site.

As for future support, the developers have claimed to support it indefinitely. But even the current version of Luxon is a fully-fledged alternative to Moment.js.

It is definitely worth using Luxon over Moment.js in your next project.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store