Jun 11, 2023

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


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


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! 😎 

Related Posts


© 2023-present Amrut Sabale. All Rights Reserved.