Let's talk about Moment.js

Moment.js has been my go-to for many years. When I started learning and building websites, jQuery and moment.js were a god-send but over the years moment.js has gotten difficult to ship in my newer projects.

Now, don't get me wrong. It's a great library but it has a huge problem. JavaScript's native Date class offers very little to what I need in terms of functionality and so I relied on momentjs for all this time.

The problem is momentjs has been deprecated for a while. I didn't know about this until I stumbled upon it while searching for API reference in the documentation.

Now, let's talk alternatives - we have many including ones recommended by Moment.js

My answer?

I started using date-fns for smaller projects. I know its not a "drop-in" replacement but the learning curve isn't that bad in my opinion*.*

..there was one more!

As recommended by Momentjs, for a brief time I gave another library a shot - Luxon. Check out Luxon project's website for more details.

It is authored by Isaac Cambron, a long-time contributor to Moment.

--
Moment.js docs

Just like moment.js, it shares a similar drawback - higher bundle size. There is an open issue (as of writing) on project's repo (link) which has some solutions but I didn't want to meddle with that.

I just want to build my app!!! I wanted something that's lightweight and flexible. In the end, I started using date-fns in more projects.

Speaking of bundle size, date-fns has a webpack section in their docs to reduce the build size (if you're interested).

date-fns - Quick Start

Let's get cracking with date-fns.

Note: I am using date-fns v3.0.0 on the snippets below.

// helloworld.js

import { format, compareAsc } from "date-fns";

const formattedDate = format(new Date(), 'dd-MM-yyyy');
console.log(formattedDate);
// Output: '18-12-2023'

// difference in days
import { differenceInDays } from "date-fns";

const date = new Date();

// Did you know Month starts with 0 in JS's `Date`?
const dateDec1 = new Date(2023, 11, 1);
const diffDays = differenceInDays(date, dateDec1);

console.log(diffDays);
// Output: 17

There are other handy helper functions like differenceInBusinessDays , differenceInHours, etc. Be sure to check the documentation for more info.

The future?

If you're wondering why are we still thinking of third-party libraries for such an important feature, I have some good news!

Temporal is a work-in-progress specification started 2 years ago and can be considered a much needed enhancement over Date .

It was originally drafted in 2017 and has received Stage 3 status back in 2021.

Since it is only stage 3, it is considered experimental and not recommended for production usage just yet.

If you'd like to report bugs, feel free to give it a try!
GitHub Link: https://github.com/tc39/proposal-temporal

Temporal - Quick Start

Let's create an NPM project. You will need Node.JS v14 or later.

# Setup a folder to try the APIs
$ mkdir temporal-research
$ cd temporal-research
$ npm init -y

# Install the polyfill (requires Node v14 or later)
$ npm install @js-temporal/polyfill

Let's print the current date and time in ISO format.

// index.js 
// running on Node v18

// Import Temporal
const { Temporal } = require("@js-temporal/polyfill");
// Get current time/date.
const now = Temporal.Now.instant().toString();
console.log('Temporal: ' + now);
// Output: "Temporal: 2023-09-29T13:47:49.625269601Z"

// I got curious comparing it with `Date` so here you go :)
console.log('Date: ' + new Date().toISOString());
// Output: "Date: 2023-09-29T13:47:49.630Z"

Conclusion

I hope you've learned something new here.

If you've liked this post, show your support by using the emojis on the right. It pleases the algorithm :^)

You can also @ me on Mastodon here.

Bye for now.

Let's talk about Moment.js

Comments (1)

More from this blog

GitRaven: April 2026 updates

sleep-stopper: A simple GTK4 app to stop Linux from sleeping.

GitRaven: How to setup Monaco Editor for QWebEngine

GitRaven: How to draw custom widgets on QTreeView rows

GitRaven: How to use QTreeView with a custom model class

My answer?

..there was one more!

date-fns - Quick Start

The future?

Temporal - Quick Start

Conclusion

Command Palette

Comments (1)

More from this blog

My answer?

..there was one more!

date-fns - Quick Start

The future?

Temporal - Quick Start

Conclusion