JavaScript’s built-in support for date handling is useful, but it can be awkward to use. Complex operations such as timezone conversion and date formatting are often challenging.
Fortunately, there are several packages available that make working with dates and times in JavaScript less stressful. Here, you will learn about some of these packages and how you can start working on these packages.
1. Moment.JS
Native JavaScript Date objects have limited functionality when it comes to working with dates and times.
Moment.js, a JavaScript library, introduced several features missing in the original Date object. As a result, it has become the go-to library for working with dates and times.
To install Moment.js with NPM, run the following commands from your project directory.
This code snippet imports the Moment.js library and creates a Moment object using the current date and time with the moment() function. It then demonstrates how to format the created Date object as a string with the format() method, which takes a date/time format as its argument.
The program logs the two variables in different formats to the console. The first, AddTenMinutes, holds the result of adding 10 minutes to the current date and time. The second, subtracted two days, is the current date and time value from which two days have been subtracted.
Moment.js can do other things like checking for leap years and converting from one date format to another.
It is important to note that Moment.js is no longer maintained by its core developer team. The developers recommend using an alternative like Luxon.js.
2. Luxon.js
Luxon.js is a more robust and more modern JavaScript library for working with dates. An alternative to Moment.js, it addresses the limitations of the older library such as mutation.
This code creates a new DateTime object representing the current date and time using the now() method. It then accesses the components of that date using the year, minute, and other properties.
A major difference between Luxon.js and Moment.js is its immutable character. All DateTime objects in Luxon are immutable, meaning that you cannot modify DateTime properties. Instead, you can create new DateTime instances from existing ones.
This code now creates a new DateTime object called yesterday based on the object, passing it the value of 1 day as an argument, using the plus method. The plus method creates a new DateTime object with the specified number of days added to the original object.
Another advantage of Luxon.js is its reliable timezone support, which is essential for working with dates and times in modern web applications. The library uses the Internationalization API in modern browsers to provide accurate timezone support.
However, one of the drawbacks of Luxon.js is its limited community resources.
3. date-fns
date-fns is a very lightweight JavaScript library designed for working with dates and times. It builds on the native JavaScript object.
date-fns uses functional programming techniques and includes an immutable feature, which makes working with dates easier and reduces the potential for bugs in your code.
date-fns is modular. It contains a lot of functions that you can access by destroying the package, as shown in the code block above. The code only imports the format and addDates function from the date-fns library.
This program demonstrates using the date-fns library in JavaScript to format and manipulate dates.
It creates a new Date object representing the current date. Formats the current date using the format function from the date-fns library.
It uses the addDate function to create a new date object representing yesterday’s date, formats it using the format function, and outputs the current date and yesterday’s date to the console in the format “yyyy-MM-dd”. logs both.
The downside of using date-fns is that it does not provide timezone support. Instead, it uses a separate library for working with time zones using helper functions.