Powerful Date Libraries for React and Javascript

Recently I've worked on my client's web applications which have built-in React and Node.js. There I got a chance to work with modern powerful date libraries date-fns and luxon 🚀.

1. date-fns

⁠ Install,

npm i date-fns

This library is built using pure functions and always returns a new date instance instead of changing the passed one. so it's immutable.

It provides a lot of useful date methods.

⁠import {
  subDays,
  addDays,
  addHours,
  addMinutes,
  format,
  getMinutes,
  isSameDay,
  startOfDay,
  startOfHour } from 'date-fns';

const myDate = new Date();
addDays(myDate, 1); // tomorrow's date
format(myDate, "MMM dd, yyyy, h:mm a"); //Jun 08, 2023, 9:49 PM 
startOfDay(myDate); //Thu Jun 08 2023 00:00:00 GMT+0530 (India Standard Time)
startOfHour(myDate);//Thu Jun 08 2023 21:00:00 GMT+0530 (India Standard Time)
isSameDay(myDate,myDate); // true

It has time zone support. we need to install additional package date-fns-tz ,

npm i date-fns-tz

import { formatInTimeZone } from "date-fns-tz";

const myDate = new Date();
const timezoneDate = formatInTimeZone(
    myDate,
    "America/Chicago",
    "yyyy-MM-dd HH:mm:ss a zzz"
  );
console.log(timezoneDate);//2023-06-11 05:25:35 AM GMT-5

This is just an overview of some of the features. You can explore more in the date-fns official documentation.

2. Luxon

Install,

npm i luxon

Luxon is also immutable similar to date-fns . Remember date-fns always returns a plain JS Date but When we create a date with Luxon, It provides its own date-time classes.

const dt=DateTime.local();  
console.log(dt);
//output:
/*
DateTime {
c: {year: 2023, month: 6, day: 11, hour: 13, minute: 36, …}
invalid: null,
isLuxonDateTime: true,
loc: Locale {locale: 'en-GB', numberingSystem: null,..},
o: 330
ts: 1686470799317,
weekData: null,
_zone: SystemZone {},
...
}
*/

Sometimes Time zones become a pain in the ass. But Luxon has handled it properly when we want to deal with time zones.

By default, a date created in Luxon is in the local time zone of the machine it's running on.

⁠const defaultTimezonedDt=DateTime.local();  
console.log(defaultTimezonedDt.zone);//Asia/Calcutta const timezoneDt = DateTime.local().setZone('America/Chicago').setLocale('en-US');
console.log(timezoneDt.zone); //America/Chicago

It also provides add, subtract, format, and parse functionalities with date.

import { DateTime } from 'luxon';

const myDate = new Date();
const dt=DateTime.fromMillis(myDate.getTime());
console.log(dt.toFormat('yyyy-MM-dd hh:mm:ss a'));//2023-06-11 12:55:35 PM 

const asOf=DateTime.local();  
asOf.year     //=> 2017
asOf.month    //=> 6
asOf.day      //=> 11
asOf.hour   //=> 13
asOf.minute   //=> 13
asOf.second   //=> 13
asOf.weekday  //=> 7

const newDt = asOf.plus({years:1,days: 1,months:1,hours:1});  
const newDate=new Date(newDt.toMillis());
console.log(newDate);// Fri Jul 12 2024 14:09:07 GMT+0530 (India Standard Time)

Luxon provides date difference utilities,

⁠const end = DateTime.fromISO('2023-06-11T07:44:05.581Z');
const start = DateTime.fromISO('2022-06-11T07:44:05.581Z');

const diffInYears = end.diff(start, 'years').toObject();
console.log(diffInYears);//{years: 1}

const diffInMonths = end.diff(start, 'months').toObject();
console.log(diffInMonths);//{months: 12}

const diff = end.diff(start,['hours', 'minutes']).toObject();
console.log(diff,);//{hours: 8760, minutes: 0}

Here I have just listed some of the features. You can explore more in the Luxon official documentation.

Both libraries are compatible with Typescript. So, I would definitely recommend trying these 2 modern powerful libraries for your next React or Javascript Projects. Thanks! 😎

Powerful Date Libraries for React and Javascript

1. date-fns

2. Luxon

Related Posts

Categories