Best Libraries for Formatting Date and Time in React (2024)

Updated: January 24, 2024 By: Guest Contributor Post a comment

This article will walk you through a list of the best open-source libraries for formatting and parsing date and time in React. Without any further ado, let’s discover the things that matter and are helpful.


date-fns is a huge, comprehensive, and consistent toolset that provides more than 200 functions that can make your life much easier when dealing with date and time tasks. The package is built with pure functions and always returns a new date instance. It supports TypeScript, Flow, l18n, and many more features.


npm i date-fns


import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'Today is' eeee")
// Today is Friday

formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true })
// 3 days ago

formatRelative(subDays(new Date(), 3), new Date())
// last Tuesday at 7:26 p.m.


  • GitHub stars: 2.2k+
  • NPM weekly downloads: 8m – 10m
  • License: MIT
  • Written in: Javascript, TypeScript
  • Links: GitHub repo | NPM page

fecha is a lightweight library with zero dependencies. It supports TypeScript out-of-the-box and provides a ton of intuitive functions.


npm i fecha


import { format } from 'fecha';

type format = (date: Date, format?: string, i18n?: I18nSettings) => str;

ormat(new Date(2021, 10, 22), 'dddd MMMM Do, YYYY'); 
// 'Friday October 22th, 2021'

format(new Date(1988, 1, 2, 15, 23, 10, 350), 'YYYY-MM-DD hh:mm:ss.SSS A'); 
// '1988-01-02 03:23:10.350 PM

format(new Date(2021, 11, 10, 5, 30, 20), 'shortTime'); 
// '05:30'


moment.js used to be the most popular date-time library in the Javascript world. It’s now a legacy project and in maintenance mode, but still used by the vast majority of developers around the world.


npm i moment


import moment from 'moment';

moment().format('MMMM Do YYYY, h:mm:ss a');
// October 21st 2021, 3:11:36 pm

moment("20111031", "YYYYMMDD").fromNow();
 // 10 years ago

moment().subtract(10, 'days').calendar();
 // 10/11/2021

There are many large packages that were created to support moment.js or were inspired by this library:

  • moment-timezone: This is an add-on for moment.js that supports the IANA Time zone.
  • react-moment-prototypes: This is a React prototype validator to check if the passed prop is a moment.js construct
  • react-moment: This one brings to the table a React component for moment.js, which is very handy and intuitive.


day.js is a fast-growing, minimal library for parsing, validating, manipulating, and displaying date and time with compatible API with the legacy moment.js.


npm i dayjs


import dayjs from 'dayjs';


dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') 

dayjs().set('month', 3).month()


Luxon is a modern, powerful, and friendly library for dealing with dates and times in Javascript with many features:

  • Formatting and parsing datetimes, intervals, and durations
  • Interval support
  • Duration support
  • Internationalization of strings using the Intl API
  • Built-in handling of time zones


npm i luxon

If you want to write in TypeScript, you need to add @types/luxon:

npm i @types/luxon -D


import { DateTime } from 'luxon';

DateTime.fromObject({year: 2022, month: 5, day: 15, hour: 17, minute: 36})
// 2022-05-15T17:36:00.000-05:00{minutes: 15, seconds: 8})	
// DateTime 2022-10-21T15:55:45.660-05:00'zh').toLocaleString()	
// 2022/10/21	
// Oct 21, 2022


  • GitHub stars: 30+
  • NPM weekly downloads: 700k – 1.2m
  • License: MIT
  • Written in: Javascript, TypeScript
  • Links: GitHub repo | NPM page

date-time is a tiny library with an unpacked size is approximately 4.4 kB that can help you display dates and times in a pretty format.


npm i date-time


import dateTime from 'date-time';

dateTime({date: new Date(1979, 2, 4, 10)});
// 1979-02-04 10:00:00

dateTime({showTimeZone: true});
// 2021-10-22 10:07:05 UTC-5

dateTime({local: false, showTimeZone: true});
// 2021-10-22 10:07:05 UTC-5


We’ve gone through a list that covered the best and most-loved open-source libraries that can help you a lot when working with date and time in React. Which one will you choose for your next (or current) project? If you’d like to explore more new and interesting things about modern React, take a look at the following articles:

You can also check our React category page and React Native category page for the latest tutorials and examples.

Related Articles