DayJS: A Minimal yet Powerful Date Handling Experience!
Overview
Let’s face it, almost all web applications have some requirement for date-time handling, and choosing a library that caters to all our requirements yet is very lightweight is always a chore. MomentJS has always been the solid offering for extensive date-time management options but it is currently in maintenance mode & can become bulky (whopping 4.21Mb unpacked size!) at times, especially when you are concerned about that extra 5Kb affecting your website load times!
One of the popular lean options that come up is date-fns (our review of it can be found here) but the APIs are quite different from ones offered by MomentJS and it might take some time to learn if you come from a MomentJS background.
DayJS aims to provide a solution for the need for extensive date-time management APIs and lean package sizes by offering an API structure and pattern similar to MomentJS yet being just 2Kb (587Kb unpacked) in size for the core package. It achieves this by having a need-based plugins approach, requiring loading individual packages for a specific feature set.
Highlights
We can get started with DayJS very easily, by running the npm install dayjs command and requiring it in your project:
/* NodeJS or requireJs */
var dayjs = require('dayjs');/* CDN */
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>/* Babel or ES6 */
import dayjs from 'dayjs';
The package already comes with type declarations making it easy to use with TypeScript and installing the package only adds the bare minimum functions.
Any extra functionality required, say German locale support requires us to load the localData plugin and the data for the respective locale. Though this might look tedious, only the plugins imported will be used when building the app, thereby helping keep the package bundle size in check!
The instance of DayJS is by default immutable as opposed to MomentJs’s mutable instance, making it a lot easier to use without the worry of the initial value being modified and it also supports method chaining.
Since the API’s and the overall structure/patterns are very similar to that of MomentJS’s, please feel free to check out our extensive overview of MomentJS and the package’s API reference pages for getting to know the package better.
Let’s look at some examples of the common operations we would do in applications:
Parsing and Formatting
/* Getting an instance */const currentDate = dayjs();/* Parsing ISO date */const parsedDate = dayjs('2021-02-07T18:00:00.000Z');/* Parsing custom formats in a specific timezone & formatting */Parsing custom formats and timezones consistently requires us to use 'CustomParseFormat' and timezone plugin!import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import advancedFormat from 'dayjs/plugin/advancedFormat';dayjs.extend(timezone);
dayjs.extend(utc);
dayjs.extend(advancedFormat);const dateTime = dayjs.tz("13-12-1996 13:30", "DD-MM-YYYY HH:mm", "Asia/Calcutta").format("D MMM h:mm A");console.log(dateTime); // prints "13 Dec 1:30 PM"
Internationalization
/* Setting locale as German(DE) globally and getting months of the year */const dayJs = require('dayjs');
require('dayjs/locale/de');
dayjs.locale('de');const localeData = require('dayjs/plugin/localeData');
dayJs.extend(localeData);console.log(dayJs.months());//prints
[
'Januar', 'Februar',
'März', 'April',
'Mai', 'Juni',
'Juli', 'August',
'September', 'Oktober',
'November', 'Dezember'
]
Customization
/* Creating a new locale */
// Object confirming to DayJS's locale definition structure
const myLocaleDefn = {...};
dayjs.locale('myLocale', myLocaleDefn);/* Updating an existing locale */
require('dayjs/plugin/updateLocale');
dayjs.extend(updateLocale) // Requires the update locale plugin
dayjs.updateLocale('en', { monthsShort: [ "M-1", "M-2", "M-3", "M-4", "M-5", "M-6", "M-7", "M-8", "M-9", "M-10", "M-11", "M-12"] });
Evaluation Metrics
Check out the package and some reading materials
- https://day.js.org/en/
- https://www.npmjs.com/package/dayjs
- https://date-fns.org/
- https://momentjs.com/docs/#/-project-status/
Conclusion
DayJS seems to be a very powerful and easy to use library with a lot of customization/extension options. It is also a really good replacement for MomentJS and is very close to it making the learning curve minimal if you come from a MomentJS background (it is also among the alternatives recommended by MomentJS!).
The lean size, native immutability, extensive date manipulation and operation options, timezone and locale support, similarities so close to becoming a drop-in replacement of MomentJS and customization options while being backed by multiple sponsors and averaging ~ 4M weekly downloads make this a very good option to be considered for use in your application!
