You don't (may not) need Moment.js
Moment.js is a fantastic time & date library with lots of great features and utilities. However, if you are working on a performance sensitive web application, it might cause a huge performance overhead because of its complex APIs and large bundle size.
Problems with Moment.js:
- It is highly based on OOP APIs, which makes it fail to work with tree-shaking, thus leading to a huge bundle size and performance issues.
- It is mutable and it causes bugs:
- Complex OOP API (which doubles mutability problem). Here is an example:
https://github.com/moment/moment/blob/develop/src/test/moment/add_subtract.js#L244-L286
Moment.js allows to use
a.subtract('ms', 50)
,a.subtract(50, 'ms')
and evena.subtract('s', '50')
.
If you are not using timezone but only a few simple functions from moment.js, this might bloat your app, and therefore is considered overkill. dayjs has a smaller core and has very similar APIs so it makes it very easy to migrate. date-fns enables tree-shaking and other benefits so that it works great with React, Sinon.js, and webpack, etc. See https://github.com/moment/moment/issues/2373 for more ideas on why and how people switch from moment.js to other solutions.
Brief Comparison
Name | Size original/gzipped | Tree-shaking | Popularity (stars) | Methods richness | Pattern | Timezone Support | Locale |
---|---|---|---|---|---|---|---|
Moment.js | 329K/69.6K | No | 43.4k | High | OO | Good (moment-timezone) | 123 |
Luxon | 59.9K/17.2K | No | 9k | High | OO | Good (Intl) | - |
date-fns | 78.4k/13.4k without tree-shaking | Yes | 21.3k | High | Functional | Good (date-fns-tz) | 64 |
dayjs | 6.5k/2.6k without plugins | No | 25.8k | High | OO | Not yet | 130 |
Voice of Developers
Removed moment.js to replace with date-fns - build output reduced by 40%
—Jared Farago from webnode project.
Good library if you’re looking to replace Moment.js for one reason or another. Immutable too.
—Dan Abramov, Author of Redux and co-author of Create React App. Building tools for humans.
—Matija Marohnić, a design-savvy frontend developer from Croatia.
—Sergey Petushkov, a javaScript developer from Moscow, Russia • Currently in Berlin, Germany.
ESLint Plugin
If you're using ESLint, you can install a plugin that will help you identify places in your codebase where you don't (may not) need Moment.js.
Install the plugin...
npm install --save-dev eslint-plugin-you-dont-need-momentjs
...then update your config
"extends" : "plugin:you-dont-need-momentjs/recommended"
Quick Links
- Millisecond/Second/Minute/Hour
- Date of Month
- Day of Week
- Day of Year
- Week of Year
- Days in Month
- Weeks in Year
- Maximum of the given dates
- Minimum of the given dates
Feature Parity
⚠️ Indicates other packages or work are needed. See individual functions above.
Native | Luxon | date-fns | dayjs | |
---|---|---|---|---|
Parse | ||||
String + Date Format | ✅ | ✅ | ✅ | ✅ |
String + Time Format | ✅ | ✅ | ✅ | ⚠️ |
String + Format + locale | ❌ | ⚠️ | ✅ | ⚠️ |
Get + Set | ||||
Millisecond/Second/Minute/Hour | ✅ | ✅ | ✅ | ✅ |
Date of Month | ✅ | ✅ | ✅ | ✅ |
Day of Week | ✅ | ✅ | ✅ | ✅ |
Day of Year | ✅ | ✅ | ✅ | ✅ |
Week of Year | ✅ | ✅ | ✅ | ⚠️ |
Days in Month | ✅ | ✅ | ✅ | ✅ |
Weeks in Year | ❌ | ❌ | ✅ | ⚠️ |
Maximum of the given dates | ✅ | ✅ | ✅ | ⚠️ |
Minimum of the given dates | ✅ | ✅ | ✅ | ⚠️ |
Manipulate | ||||
Add | ✅ | ✅ | ✅ | ✅ |
Subtract | ✅ | ✅ | ✅ | ✅ |
Start of Time | ❌ | ✅ | ✅ | ✅ |
End of Time | ✅ | ✅ | ✅ | ✅ |
Display | ||||
Format | ❌ | ✅ | ✅ | ✅ |
Time from now | ❌ | ❌ | ✅ | ⚠️ |
Time from X | ❌ | ❌ | ✅ | ⚠️ |
Difference | ✅ | ✅ | ✅ | ✅ |
Query | ||||
Is Before | ✅ | ✅ | ✅ | ✅ |
Is Same | ✅ | ✅ | ✅ | ✅ |
Is After | ✅ | ✅ | ✅ | ✅ |
Is Between | ❌ | ✅ | ✅ | ⚠️ |
Is Leap Year | ✅ | ✅ | ✅ | ⚠️ |
Is a Date | ✅ | ✅ | ✅ | ✅ |
Parse
String + Date Format
Return the date parsed from date string using the given format string.
// Moment.js;// => "1995-12-24T13:00:00.000Z" // Nativeconst datePattern = /^--$/;const month day year = datePattern;`, `;// => "1995-12-24T13:00:00.000Z" // date-fns;;// => "1995-12-24T13:00:00.000Z" // dayjs;// => "1995-12-24T13:00:00.000Z" // luxonDateTime;// => "1995-12-24T13:00:00.000Z"
String + Time Format
Return the date parsed from time string using the given format string.
// Moment.js;// => "2010-10-19T17:30:00.000Z" // Nativeconst datePattern = /^--\s:$/;const year month day rawHour min = datePattern;`--T::00`;// => "2010-10-19T17:30:00.000Z" // date-fns;;// => "2010-10-19T17:30:00.000Z" // dayjs ⚠️ requires customParseFormat plugin;dayjs;;// => "2010-10-19T17:30:00.000Z" // luxonDateTime;// => "2010-10-19T17:30:00.000Z"
String + Format + locale
Return the date parsed from string using the given format string and locale.
// Moment.js;// => "2012-02-29T13:00:00.000Z" // date-fns;;;// => "2012-02-29T13:00:00.000Z" // dayjs ⚠️ requires customParseFormat plugin;;dayjs;;// => "2012-02-29T13:00:00.000Z" // Luxon ❌ does not support Locale for node unless https://moment.github.io/luxon/docs/manual/install.html#nodeDateTime;// => "2012-02-29T13:00:00.000Z"
Get + Set
Millisecond / Second / Minute / Hour
Get the Millisecond/Second/Minute/Hour
of the given date.
// Moment.js;// => 49;// => 19 // Native;// => 49;// => 19 // date-fns;;;// => 49;// => 19 // dayjs;// => 49;// => 19 // LuxonDateTimesecond;// => 49DateTimehour;// => 19
Performance tests
Library | Time |
---|---|
Moment | 1500.703ms |
Native | 348.411ms |
DateFns | 520.670ms |
DayJs | 494.234ms |
Luxon | 1208.368ms |
Set the Millisecond/Second/Minute/Hour
of the given date.
// Moment.js;// => "2018-09-09T09:12:30.695Z";// => "2018-09-09T03:12:49.695Z" // Native;// => "2018-09-09T09:12:30.695Z";// => "2018-09-09T03:12:49.695Z" // date-fns;;;// => "2018-09-09T09:12:30.695Z";// => "2018-09-09T03:12:49.695Z" // dayjs;// => "2018-09-09T09:12:30.695Z";// => "2018-09-09T03:12:49.695Z" // luxonDateTime ;// => "2018-09-09T09:12:30.695Z"DateTime ;// => "2018-09-09T03:12:49.695Z"
Performance tests
Library | Time |
---|---|
Moment | 1689.744ms |
Native | 636.741ms |
DateFns | 714.148ms |
DayJs | 2037.603ms |
Luxon | 2897.571ms |
Date of Month
Gets or sets the day of the month.
// Moment.js;// => 9;// => "2018-09-04T09:12:49.695Z" // Native;// => 9;// => "2018-09-04T09:12:49.695Z" // date-fns;;;// => 9;// => "2018-09-04T09:12:49.695Z" // dayjs;// => 9;// => "2018-09-04T09:12:49.695Z" // luxonDateTimeday;// => 9DateTime ;// => "2018-09-04T09:12:49.695Z"
Performance tests
Library | Time |
---|---|
Moment | 1381.669ms |
Native | 397.415ms |
DateFns | 588.004ms |
DayJs | 1218.025ms |
Luxon | 2705.606ms |
Day of Week
Gets or sets the day of the week.
// Moment.js;// => 0 (Sunday);// => "2018-08-26T09:12:49.695Z" // Native;// => 0 (Sunday);// => "2018-08-26T09:12:49.695Z" // date-fns;;;// => 0 (Sunday);// => "2018-08-26T09:12:49.695Z" // dayjs;// => 0 (Sunday);// => "2018-08-26T09:12:49.695Z" // LuxonDateTimeweekday;// => 7 (Sunday)DateTime ;// => "2018-08-26T09:12:49.695Z"
Library | Time |
---|---|
Moment | 1919.404ms |
Native | 543.466ms |
DateFns | 841.436ms |
DayJs | 1229.475ms |
Luxon | 3936.282ms |
Day of Year
Gets or sets the day of the year.
// Moment.js;// => 252;// => "2018-09-13T09:12:49.695Z" // NativeMath;// => 252 // date-fns;;;// => 252;// => "2018-09-13T09:12:49.695Z" // dayjs ⚠️ requires dayOfYear plugin;dayjs;;// => 252;// => "2018-09-13T09:12:49.695Z" // LuxonDateTimeordinal;// => 252DateTime ;// => "2018-09-13T09:12:49.695Z"
Library | Time |
---|---|
Moment | 5511.172ms |
Native | 530.592ms |
DateFns | 2079.043ms |
DayJs | - |
Luxon | 3540.810ms |
Week of Year
Gets or sets the week of the year.
// Moment.js;// => 37;// => "2018-06-10T09:12:49.695Z" // date-fns;;;// => 37;// => "2018-06-10T09:12:49.695Z" // native getWeekconst day = ;const MILLISECONDS_IN_WEEK = 604800000;const firstDayOfWeek = 1; // monday as the first day (0 = sunday)const startOfYear = day 0 1;startOfYear;const dayWeek = Math + 1;// => 37 // native setWeekconst day = ;const week = 24;const MILLISECONDS_IN_WEEK = 604800000;const firstDayOfWeek = 1; // monday as the first day (0 = sunday)const startOfYear = day 0 1;startOfYear;const dayWeek = Math + 1;day;day;// => "2018-06-10T09:12:49.794Z // dayjs ⚠️ requires weekOfYear plugin;dayjs;;// => 37;// => "2018-06-10T09:12:49.695Z" // LuxonDateTimeweekNumber;// => 37DateTime ;// => "2018-06-10T09:12:49.794Z
Library | Time |
---|---|
Moment | 7147.201ms |
Native | 1371.631ms |
DateFns | 5834.815ms |
DayJs | - |
Luxon | 4514.771ms |
Days in Month
Get the number of days in the current month.
// Moment.js;// => 29 // Native2012 02 0;// => 29 // date-fns;;// => 29 // dayjs;// => 29 // LuxonDateTimedaysInMonth;// => 29
Library | Time |
---|---|
Moment | 4415.065ms |
Native | 186.196ms |
DateFns | 634.084ms |
DayJs | 1922.774ms |
Luxon | 1403.032ms |
Weeks in Year
Gets the number of weeks in the current year, according to ISO weeks.
// Moment.js;// => 52 // date-fns;;// => 52 // dayjs ⚠️ requires isoWeeksInYear plugin;dayjs;;// => 52 // Moment.jsDateTimeweeksInWeekYear;// => 52
Library | Time |
---|---|
Moment | 1065.247ms |
Native | - |
DateFns | 4954.042ms |
DayJs | - |
Luxon | 1134.483ms |
Maximum of the given dates
Returns the maximum (most distant future) of the given date.
const array = 2017 4 13 2018 2 12 2016 0 10 2016 0 9;// Moment.jsmoment;// => "2018-03-11T13:00:00.000Z" // NativeMathmax;// => "2018-03-11T13:00:00.000Z" // date-fns;;// => "2018-03-11T13:00:00.000Z" // dayjs ⚠️ requires minMax plugin;dayjs;dayjs;// => "2018-03-11T13:00:00.000Z" // LuxonDateTime;// => "2018-03-11T13:00:00.000Z"
Library | Time |
---|---|
Moment | 1780.075ms |
Native | 828.332ms |
DateFns | 980.938ms |
DayJs | - |
Luxon | 2694.702ms |
Minimum of the given dates
Returns the minimum (most distant future) of the given date.
const array = 2017 4 13 2018 2 12 2016 0 10 2016 0 9;// Moment.jsmoment;// => "2016-01-08T13:00:00.000Z" // NativeMathmin;// => "2016-01-08T13:00:00.000Z" // date-fns;;// => "2016-01-08T13:00:00.000Z" // dayjs ⚠️ requires minMax plugin;dayjs;dayjs;// => "2016-01-08T13:00:00.000Z" // LuxonDateTime;// => "2016-01-08T13:00:00.000Z"
Library | Time |
---|---|
Moment | 1744.459ms |
Native | 819.646ms |
DateFns | 841.249ms |
DayJs | - |
Luxon | 2720.462ms |
Manipulate
Add
Add the specified number of days to the given date.
// Moment.js;// => "2018-09-16T09:12:49.695Z" // Nativeconst now = ;now;// => "Sun Sep 16 2018 09:12:49" // date-fns;;// => "2018-09-16T09:12:49.695Z" // dayjs;// => "2018-09-16T09:12:49.695Z" // LuxonDateTime ;// => "2018-09-16T09:12:49.695Z"
Library | Time |
---|---|
Moment | 1309.485ms |
Native | 259.932ms |
DateFns | 385.394ms |
DayJs | 1911.881ms |
Luxon | 3919.797ms |
Subtract
Subtract the specified number of days from the given date.
// Moment.js;// => "2018-09-02T09:12:49.695Z" // Native - 1000 * 60 * 60 * 24 * 7;// => Sun Sep 09 2018 09:12:49 // date-fns;;// => "2018-09-02T09:12:49.695Z" // dayjs;// => "2018-09-02T09:12:49.695Z" // LuxonDateTime ;// => "2018-09-02T09:12:49.695Z"
Library | Time |
---|---|
Moment | 1278.384ms |
Native | 215.255ms |
DateFns | 379.057ms |
DayJs | 1772.593ms |
Luxon | 4028.866ms |
Start of Time
Return the start of a unit of time for the given date.
// Moment.js;// => "2018-08-31T14:00:00.000Z" // date-fns;;// => "2018-08-31T14:00:00.000Z" // dayjs;// => "2018-08-31T14:00:00.000Z" // LuxonDateTime;// => "2018-09-02T09:12:49.695Z"
Library | Time |
---|---|
Moment | 1078.948ms |
Native | - |
DateFns | 398.107ms |
DayJs | 765.358ms |
Luxon | 2306.765ms |
End of Time
Return the end of a unit of time for the given date.
// Moment.js;// => "2018-09-09T13:59:59.999Z" // Nativeconst end = ;end;end;// => "2018-09-09T16:59:59.999Z" // date-fns;;// => "2018-09-09T13:59:59.999Z" // dayjs;// => "2018-09-09T13:59:59.999Z" // LuxonDateTime;// => "2018-09-02T09:12:49.695Z"
Library | Time |
---|---|
Moment | 1241.304ms |
Native | 225.519ms |
DateFns | 319.773ms |
DayJs | 914.425ms |
Luxon | 9920.529ms |
Display
Format
Return the formatted date string in the given format.
// Moment.js;// => "Sunday, September 9th 2018, 7:12:49 PM";// => "Sun, 7PM" // date-fns;;// => "Sunday, September 9th 2018, 7:12:49 PM";// => "Sun, 7PM" // dayjs;// => "Sunday, September 9 2018, 7:12:49 PM";// => "Sun, 7PM"// dayjs ⚠️ requires advancedFormat plugin to support more format tokens;dayjs;;// => "Sunday, September 9th 2018, 7:12:49 PM" // LuxonDateTime;// => "Sunday, September 9 2018, 7:12:49 PM" ⚠️ not support 9thDateTime;// => "Sun, 7PM"
Time from now
Return time from now.
// Moment.js;// => "4 days ago" // date-fns;;// => "4 days ago" // dayjs ⚠️ requires relativeTime plugin;dayjs; ;// => "5 days ago" ⚠️ the rounding method of this plugin is different from moment.js and date-fns, use with care. // luxon ❌ does not support relative time
Time from x
Return time from x.
// Moment.js;// => "in 2 days" // date-fns;;// => "2 days" // dayjs ⚠️ requires relativeTime plugin;dayjs;;// => "in 2 days" // luxon ❌ does not support relative time
Difference
Get the unit of time between the given dates.
// Moment.js;// => -172800000;// => -2 // Native2007 0 27 - 2007 0 29;// => -172800000Math;// => -2 // date-fns;;// => -172800000;;// => -2 // dayjs;// => -172800000;// => -2 // luxonDateTimemilliseconds;// => -172800000DateTimedays;// => -2
Query
Is Before
Check if a date is before another date.
// Moment.js;// => true // Native2010 10 20 < 2010 10 21;// => true // date-fns;;// => true // dayjs;// => true // luxonDateTime < DateTime;// => true
Is Same
Check if a date is the same as another date.
// Moment.js;// => false;// => true;// => true // Native2010 9 20 === 2010 9 21;// => false2010 9 20 === 2010 9 20;// => true2010 9 20 === 2010 9 20;// => true2010 9 20 === 2010 9 20;// => true2010 9 20 === 2010 9 21;// => true // date-fns;;;// => false;// => true;// => true // dayjs;// => false;// => true;// => true // luxon+DateTime === +DateTime + // => false DateTime === +DateTime;// => trueDateTime;// => true
Is After
Check if a date is after another date.
// Moment.js;// => true // Native2010 9 20 > 2010 9 19;// => true // date-fns;;// => true // dayjs;// => true // luxonDateTime > DateTime;// => true
Is Between
Check if a date is between two other dates.
// Moment.js;// => true // date-fns;;// => true // dayjs ⚠️ requires isBetween plugin;dayjs;;// => true // luxonInterval;// => true
Is Leap Year
Check if a year is a leap year.
// Moment.js;// => true // Native2000 1 29 === 29;// => true // date-fns;;// => true // dayjs ⚠️ requires isLeapYear plugin;dayjs;;// => true // luxon;// => true
Is a Date
Check if a variable is a native js Date object.
// Moment.jsmoment;// => true // Native instanceof Date;// => true // date-fns;;// => true // dayjs; // luxonDateTimeisValid;// => true
License
MIT