top JavaScript Date libraries

Best 5+ top JavaScript date libraries.

It might be difficult to work with dates and times with JavaScript. User-friendly APIs and handy utilities are provided by JavaScript date libraries, which reduce some of the agonies.

Get rid of the hardship of obtaining locale and timezone support for your online application. We’ll look at the advantages and disadvantages of some best different JavaScript libraries for formatting dates and times in this lesson.

But how can you choose the best option when there are so many? We’ll look into the realm of JavaScript date libraries in this post to assist you to decide.

JavaScript date libraries

List of top JavaScript date libraries.

Instead of reinventing the wheel, it is highly recommended that you use existing JavaScript date libraries that meet your demands. Let’s take a closer look at the fundamentals of the following JavaScript libraries, as well as the distinctions between them:

  • Datejs
  • Moment.js
  • Luxon
  • Dayjs
  • Date-fns
  • Spacetime

DateJS

Datejs is a JavaScript Date Library that allows you to parse, format, and handle DateTime objects. It’s a more powerful wrapper for the built-in JavaScript Date Constructor function.

It is still a robust library for formatting date and time, despite the fact that the last official release was quite some time ago and has not been updated since.

The library is appropriate for individuals who are just getting started with web programming. You should be able to implement it as long as you have a basic understanding of HTML and JavaScript.

The DateJS syntax overview

Here are some examples of DateJS syntax, however you can visit complete details on GitHub to get information about the parsing, chaining, Comparison, Converting to String, and much more.

// top JavaScript date libraries
Date.today()                    // Returns today's date, with time set to 00:00 (start of day).
Date.today().next().friday()    // Returns the date of the next Friday.
Date.today().last().monday()    // Returns the date of the previous Monday.
new Date().next().march()       // Returns the date of the next March.
new Date().last().week()        // Returns the date one week ago. 
Date.today().is().friday()      // Returns true|false if the day-of-week matches.
Date.today().is().fri()         // Abbreviated day names. 
Date.today().is().november()    // Month names.
Date.today().is().nov()         // Abbreviated month names.
Date.today().is().weekday()     // Is today a weekday?
Date.today().addDays(1)         // Add one day (+1).
Date.today().addMonths(-3)      // Subtract three months (-3).
Date.today().add(1).day()       // Add one (+1) day. Supports all date parts (year, month, day, hour, minute, second, millisecond, and weeks)
Date.today().add(-3).months()   // Subtract three (-3) months.
(1).day().fromNow()             // One (1) day from now. 
(3).months().ago()              // Three (3) months ago.
var n = 6;
n.months().fromNow()            // Six (6) months from now.
Date.monday()                   // Returns Monday of the current week.
Date.mon()                      // Abbreviated version of Date.monday()
Date.march()                    // Returns March 1st of this year.
Date.mar()                      // Abbreviated version of Date.march()
Date.today().first().thursday() // Returns the first Thursday of the current month.
Date.today().second().thursday()// Returns the second Thursday of the current month.
Date.march().third().thursday() // Returns the third Thursday in March of the current year.
Date.october().fourth().sunday()// Returns the fourth Sunday in October.
Date.today().fifth().sunday()   // Returns the fifth Sunday in the current month, or throws a RangeError exception if there are not 5 Sundays in the current month.
Date.october().final().sunday() // Returns the final Sunday in October.
Date.january().first().monday() // Returns the first Monday of the current year.
Date.december().final().friday()// Returns the last Friday of the current year.
Date.today().at("6:15pm");      // Returns todays date at 6:15pm.
var time = {hour:18, minute:15};
Date.today().at(time);          // Set time with a config object.
var birthDayParty = {month: 1, day: 20, hour: 20, minute: 30};
Date.today().set(birthDayParty);// Set date and time with a config object.
//

Moment.js

Moment.js is a small JavaScript date library that allows you to parse, validate, manipulate, and format dates.

It is widely used in the community, receives frequent updates, and comes with extensive instructions on how to use it.

How to install moment.js?

There are several ways to install a moment.js. You can use npm or yarn to get it.

# top JavaScript date libraries
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
##

The Syntax overview for moment.js

Format Dates

// best JavaScript date libraries list
moment().format('MMMM Do YYYY, h:mm:ss a'); // March 16th 2022, 8:08:58 pm
moment().format('dddd');                    // Wednesday
moment().format("MMM Do YY");               // Mar 16th 22
moment().format('YYYY [escaped] YYYY');     // 2022 escaped 2022
moment().format();                         
//

Relative Time

// list of JavaScript date libraries
moment("20111031", "YYYYMMDD").fromNow(); // 10 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 10 years ago
moment().startOf('day').fromNow();        // 20 hours ago
moment().endOf('day').fromNow();          // in 4 hours
moment().startOf('hour').fromNow();      
//

Calendar Time

// the list of top JavaScript date libraries
moment().subtract(10, 'days').calendar(); // 03/06/2022
moment().subtract(6, 'days').calendar();  // Last Thursday at 8:10 PM
moment().subtract(3, 'days').calendar();  // Last Sunday at 8:10 PM
moment().subtract(1, 'days').calendar();  // Yesterday at 8:10 PM
moment().calendar();                      // Today at 8:10 PM
moment().add(1, 'days').calendar();       // Tomorrow at 8:10 PM
moment().add(3, 'days').calendar();       // Saturday at 8:10 PM
moment().add(10, 'days').calendar();     
//

Multiple Locale Support

// examples and list: JavaScript date libraries
moment.locale();         // en
moment().format('LT');   // 8:10 PM
moment().format('LTS');  // 8:10:55 PM
moment().format('L');    // 03/16/2022
moment().format('l');    // 3/16/2022
moment().format('LL');   // March 16, 2022
moment().format('ll');   // Mar 16, 2022
moment().format('LLL');  // March 16, 2022 8:10 PM
moment().format('lll');  // Mar 16, 2022 8:10 PM
moment().format('LLLL'); // Wednesday, March 16, 2022 8:10 PM
moment().format('llll');
//

Luxon

If time zones are a major concern, Luxon is the way to go. It’s never fun to deal with time zones, so it’s good to have a library that just works.

Because adding a time zone database is complicated and adds a lot of weight to the final size, most date libraries don’t have it built-in.

To get around this, Luxon exploits JavaScript’s Intl API, which is supported by the majority of browsers.

It’s the only JavaScript date library we looked at that uses its own DateTime class rather than extending Date. Working with time zones becomes less bug-prone as a result of this, in our experience.

Best Features of Luxon

  • Types include DateTime, Duration, and Interval.
  • API that is immutable, chainable, and unambiguous.
  • Formatting and parsing for both standard and bespoke formats.
  • Intl support and native time zone (no locale or tz files).

How to install Luxon?

Luxon offers a variety of builds for various JS environments. A link to the correct one, as well as instructions on how to utilize it, is provided here.

Some Luxon Code examples

// the JavaScript date libraries
Info.features()	//=>	{"relative":true}
DateTime.now()	//=>	[ DateTime 2022-03-16T20:21:18.952+05:00 ]
DateTime.local(2017, 5, 15, 17, 36)	//=>	[ DateTime 2017-05-15T17:36:00.000+05:00 ]
DateTime.utc(2017, 5, 15, 17, 36)	//=>	[ DateTime 2017-05-15T17:36:00.000Z ]
DateTime.now().toUTC()	//=>	[ DateTime 2022-03-16T15:21:18.971Z ]
DateTime.utc(2017, 5, 15, 17, 36).toLocal()	//=>	[ DateTime 2017-05-15T22:36:00.000+05:00 ]
DateTime.now().toObject()	//=>	{"year":2022,"month":3,"day":16,"hour":20,"minute":21,"second":18,"millisecond":971}
DateTime.fromObject({year: 2017, month: 5, day: 15, hour: 17, minute: 36})	//=>	[ DateTime 2017-05-15T17:36:00.000+05:00 ]
DateTime.fromObject({year: 2017, month: 5, day: 15, hour: 17, minute: 36 }, { zone: 'America/New_York' })	//=>	[ DateTime 2017-05-15T17:36:00.000-04:00 ]
DateTime.fromObject({year: 2017, month: 5, day: 15, hour: 17, minute: 36 }, { zone: 'Asia/Singapore' })	//=>	[ DateTime 2017-05-15T17:36:00.000+08:00 ]
DateTime.now().plus({minutes: 15, seconds: 8})	//=>	[ DateTime 2022-03-16T20:36:26.974+05:00 ]
DateTime.now().plus({days: 6})	//=>	[ DateTime 2022-03-22T20:21:18.975+05:00 ] //
DateTime.now().minus({days: 6})	//=>	[ DateTime 2022-03-10T20:21:18.975+05:00 ] //
DateTime.now().diff(DateTime.local(1982, 5, 25)).milliseconds	  //=>	1256329278976
DateTime.now().diff(DateTime.local(1982, 5, 25), 'days').days	   //=>	14540.848136296296
DateTime.now().diff(DateTime.local(1982, 5, 25), ['days', 'hours'])	//=>	[ Duration {"days":14540,"hours":20.355271388888887} ]
DateTime.now().toLocaleString()	//=>	"16/03/2022"
DateTime.now().setLocale('zh').toLocaleString()	//=>	"2022/3/16"
DateTime.now().toLocaleString(DateTime.DATE_MED)	//=>	"16 Mar 2022"
DateTime.now().setLocale('zh').toLocaleString(DateTime.DATE_MED)	//=>	"2022年3月16日"
DateTime.now().setLocale('fr').toLocaleString(DateTime.DATE_FULL)	//=>	"16 mars 2022"
DateTime.fromISO('2017-05-15')	//=>	[ DateTime 2017-05-15T00:00:00.000+05:00 ]
DateTime.fromISO('2017-05-15T17:36')	//=>	[ DateTime 2017-05-15T17:36:00.000+05:00 ]
DateTime.fromISO('2017-W33-4')	//=>	[ DateTime 2017-08-17T00:00:00.000+05:00 ]
DateTime.fromISO('2017-W33-4T04:45:32.343')	//=>	[ DateTime 2017-08-17T04:45:32.343+05:00 ]
DateTime.fromFormat('12-16-2017', 'MM-dd-yyyy')	//=>	[ DateTime 2017-12-16T00:00:00.000+05:00 ]
DateTime.now().toFormat('MM-dd-yyyy')	//=>	"03-16-2022"
DateTime.now().toFormat('MMMM dd, yyyy')	//=>	"March 16, 2022"
DateTime.now().setLocale('fr').toFormat('MMMM dd, yyyy')	//=>	"mars 16, 2022"
DateTime.fromFormat('May 25, 1982', 'MMMM dd, yyyy')	//=>	[ DateTime 1982-05-25T00:00:00.000+05:00 ]
DateTime.fromFormat('mai 25, 1982', 'MMMM dd, yyyy', { locale: 'fr' })	//=>	[ DateTime 1982-05-25T00:00:00.000+05:00 ]
DateTime.now().plus({ days: 1 }).toRelativeCalendar()	//=>	"tomorrow"
DateTime.now().plus({ days: -1 }).toRelativeCalendar()	//=>	"yesterday"
DateTime.now().plus({ months: 1 }).toRelativeCalendar()	//=>	"next month"
DateTime.now().setLocale('fr').plus({ days: 1 }).toRelativeCalendar()	//=>	"demain"
DateTime.now().setLocale('fr').plus({ days: -1 }).toRelativeCalendar()	//=>	"hier"
DateTime.now().setLocale('fr').plus({ months: 1 }).toRelativeCalendar()	//=>	"le mois prochain"
//

Day.js

Day.js is a tiny JavaScript package for parsing, validating, manipulating, and displaying dates and times.

It works with the majority of modern browsers and has a comparable API to Moment.js. Day.js, on the other hand, has certain additional benefits, as detailed in its documentation.

It’s immutable, it’s a small library (max 2 KB), it’s slightly faster, and locales are only included in your build if you use it.

How to install Day.js?

To use Day.js in your Node.js project, just use NPM to add the Day.js.
npm install dayjs
If you want to use the CDN then Day.js can be included by way of a CDN provider like cdnjs.comunpkg, and jsDelivr.
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>

You can get the details on GitHub or official documentation here.

Day.js API overview

// JavaScript date libraries
dayjs('2018-08-08') // parse
dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // display
dayjs().set('month', 3).month() // get & set
dayjs().add(1, 'year') // manipulate
dayjs().isBefore(dayjs()) // query
//

Date-fns

Date-fns is an amazing Date library that supports over 70 locales and provides a simple way to manipulate JavaScript dates in your web application. Its official Docs can be found here.

Best Features of Date-fns

  • It contains over 200 functionalities for a variety of uses.
  • Choose what you need from a modular system. Supports tree-shaking and works with webpack, Browserify, or Rollup.
  • Native dates: Makes use of the native type that already exists. For the purpose of safety, it does not extend core objects.
  • Built using pure functions and always returns a new date instance, this class is immutable and pure.
  • I18n: Dozens of locations TypeScript & Flow: Supports both Flow and TypeScript Only include what you require.
How to install Date-fns?

It is available to install with NPM and Yarn.
npm i date-fns
# or
npm install date-fns --save
# or
yarn add date-fns

Syntax overview of Date-fns


// amazing JavaScript date libraries list

import { format, compareAsc } from 'date-fns'
format(new Date(2014, 1, 11), 'MM/dd/yyyy')
//=> '02/11/2014'
const dates = [
  new Date(1995, 6, 2),
  new Date(1987, 1, 11),
  new Date(1989, 6, 10),
]
dates.sort(compareAsc)
//=> [
//   Wed Feb 11 1987 00:00:00,
//   Mon Jul 10 1989 00:00:00,
//   Sun Jul 02 1995 00:00:00
// ]
//

AdBlocker Message

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.