Learn how to handle date and time with the date-fns library.

Tram Ho

I> Introduction:

Today I learned about how to handle dates in javascript with a library of date-fns. The reason for understanding is that the moment of listening to the analysis of the brothers is sticking to some phosphates such as:

  • Its processing speed is slow in some cases (like parsing on ISO8601 standard)
  • Sometimes returning uncontrollable errors.

People can find out here: why dont use momentjs . I looked at this link and found that date-fns seems to be handled instead of momentjs. It has a high rate of views, is introduced how lodash works similar to handling date and time with more than 140 commonly used functions. Let’s try to find out everyone.

II> Common functions to handle date and time:

First we need to install it into the project:

1> Date format functions:

a. Format:

With javascript, when initializing Date (), it will format with lots of information in it. We can get the information we want to get with the format () function:


  • The date we initialized with new Date ()
  • format is the string format you want to get (for example: MM / dd / yyyy HH: MM: corresponding to month / day / year Hour: Minutes in 24-hour format)
  • option: other options available (for example, frequently used as locale)

For example:

b. formatDistance:

If you want to know the distance between two intervals 1 relatively in the form of everyday words (3/2/2020 3/2/2020 days is 3 days) you can use this function:


  • date, baseDate are the 2 times you want to compare
  • option: other parameters (if any)

For example:

c. Other functions:

  • formatDistanceToNow: distance from 1 date and time to the present:

2. Calculation functions:

a. Add ():

We can determine what time after 1 period (year, month, day, hour, minute) is.

  • For example:

b. Sub ():

Similarly, this function allows us to determine the time before a period of time (year, month, day, hour, minute).

  • For example:

There are also other functions: addMilliseconds, subMilliseconds, differenceInMilliseconds, addSeconds …

3> The test function:

a. isAfter ()

Check if the first time is after the 2nd time. For example:

b. isBefore ():

Similarly it checks to see if the first time is before the second time. For example:

c.isDate ():

Check to see if it is a valid time or not?

c.isFuture ():

Check to see if it is a date in the future:

d.isPast ():

Check if it is a date in the past:

4> i18n:

  • First we have to import the format file of that language, for example with Vietnamese:

  • Example to get things in Vietnamese:

  • Similarly get the month in Vietnamese: –`js console.log (viLocale.localize.month (0)); // January console.log (viLocale.localize.month (1)); // February console.log (viLocale.localize.month (2)); // Th

However, support for i18n from date-fns is still under development and development. It still doesn’t support the number of languages ​​like the moment (long time ago).

III> Conclusion:

Date-fns can be a library to use because it is trusted by many people, it supports most cases dealing with date and time problems (note: with IE 9 versions, please Be careful not to use it @@ It does not support as well as moment).

Reference: https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js https://date-fns.org/v2.11.0/ https://github.com/you- dont-need / You-Dont-Need-Momentjs

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo