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 2 3 4 | npm install date-fns --save # or yarn add date-fns |
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:
1 2 3 | <span class="token keyword">import</span> format <span class="token keyword">from</span> <span class="token string">'date-fns/format'</span> <span class="token function">format</span> <span class="token punctuation">(</span> date <span class="token punctuation">,</span> format <span class="token punctuation">,</span> <span class="token punctuation">[</span> options <span class="token punctuation">]</span> <span class="token punctuation">)</span> |
Inside:
- 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:
1 2 3 4 | <span class="token keyword">const</span> dateFormat <span class="token operator">=</span> <span class="token function">format</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2014</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">11</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token string">"MM/dd/yyyy"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> dateFormat <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//=> '02/11/2014'</span> |
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:
1 2 3 | <span class="token keyword">import</span> formatDistance <span class="token keyword">from</span> <span class="token string">'date-fns/formatDistance'</span> <span class="token function">formatDistance</span> <span class="token punctuation">(</span> date <span class="token punctuation">,</span> baseDate <span class="token punctuation">,</span> <span class="token punctuation">[</span> options <span class="token punctuation">]</span> <span class="token punctuation">)</span> |
Inside:
- date, baseDate are the 2 times you want to compare
- option: other parameters (if any)
For example:
1 2 3 4 | <span class="token keyword">var</span> distanceDate <span class="token operator">=</span> <span class="token function">formatDistance</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2020</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2021</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> distanceDate <span class="token punctuation">)</span> <span class="token comment">// in aobut 1 year.</span> |
c. Other functions:
- formatDistanceToNow: distance from 1 date and time to the present:
1 2 3 | <span class="token keyword">import</span> formatDistanceToNow <span class="token keyword">from</span> <span class="token string">'date-fns/formatDistanceToNow'</span> <span class="token keyword">var</span> distanceToNow <span class="token operator">=</span> <span class="token function">formatDistanceToNow</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2014</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> addSuffix <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
2. Calculation functions:
a. Add ():
We can determine what time after 1 period (year, month, day, hour, minute) is.
- For example:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> addNewDate <span class="token operator">=</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> years <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> months <span class="token punctuation">:</span> <span class="token number">9</span> <span class="token punctuation">,</span> weeks <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> days <span class="token punctuation">:</span> <span class="token number">7</span> <span class="token punctuation">,</span> hours <span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">,</span> minutes <span class="token punctuation">:</span> <span class="token number">9</span> <span class="token punctuation">,</span> seconds <span class="token punctuation">:</span> <span class="token number">30</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> addNewDate <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Thu Jan 05 2023 03:19:15 GMT+0700 (Indochina Time)</span> |
b. Sub ():
Similarly, this function allows us to determine the time before a period of time (year, month, day, hour, minute).
- For example:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">var</span> subToday <span class="token operator">=</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> years <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> months <span class="token punctuation">:</span> <span class="token number">9</span> <span class="token punctuation">,</span> weeks <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> days <span class="token punctuation">:</span> <span class="token number">7</span> <span class="token punctuation">,</span> hours <span class="token punctuation">:</span> <span class="token number">5</span> <span class="token punctuation">,</span> minutes <span class="token punctuation">:</span> <span class="token number">9</span> <span class="token punctuation">,</span> seconds <span class="token punctuation">:</span> <span class="token number">30</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> subToday <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//Thu Jan 05 2023 03:34:47 GMT+0700 (Indochina Time)</span> |
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:
1 2 3 4 | <span class="token keyword">import</span> isAfter <span class="token keyword">from</span> <span class="token string">'date-fns/isAfter'</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">isAfter</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">1989</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">1987</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">11</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">//=> true</span> |
b. isBefore ():
Similarly it checks to see if the first time is before the second time. For example:
1 2 3 4 5 | <span class="token keyword">import</span> isBefore <span class="token keyword">from</span> <span class="token string">'date-fns/isBefore'</span> <span class="token comment">// Is 10 July 1989 before 11 February 1987?</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">isBefore</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">1989</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">1987</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">11</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">//=> false</span> |
c.isDate ():
Check to see if it is a valid time or not?
1 2 3 4 5 6 7 8 | <span class="token keyword">import</span> isDate <span class="token keyword">from</span> <span class="token string">'date-fns/isDate'</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">isDate</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">//=> true</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">isDate</span> <span class="token punctuation">(</span> <span class="token string">'2014-02-31'</span> <span class="token punctuation">)</span> <span class="token comment">//=> false</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">isDate</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token comment">//=> false</span> |
c.isFuture ():
Check to see if it is a date in the future:
1 2 3 4 | <span class="token keyword">import</span> isFuture <span class="token keyword">from</span> <span class="token string">'date-fns/isFuture'</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">isFuture</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2014</span> <span class="token punctuation">,</span> <span class="token number">11</span> <span class="token punctuation">,</span> <span class="token number">31</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">//=> false</span> |
d.isPast ():
Check if it is a date in the past:
1 2 3 4 | <span class="token keyword">import</span> isPast <span class="token keyword">from</span> <span class="token string">'date-fns/isPast'</span> <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">isPast</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token number">2014</span> <span class="token punctuation">,</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token comment">//=> true</span> |
4> i18n:
- First we have to import the format file of that language, for example with Vietnamese:
1 2 | <span class="token keyword">import</span> viLocale <span class="token keyword">from</span> <span class="token string">"date-fns/locale/vi"</span> <span class="token punctuation">;</span> |
- Example to get things in Vietnamese:
1 2 3 4 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> viLocale <span class="token punctuation">.</span> localize <span class="token punctuation">.</span> <span class="token function">day</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//Chủ nhật</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> viLocale <span class="token punctuation">.</span> localize <span class="token punctuation">.</span> <span class="token function">day</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Thứ 2 </span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> viLocale <span class="token punctuation">.</span> localize <span class="token punctuation">.</span> <span class="token function">day</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Thứ 3</span> |
- 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
1 2 3 4 5 6 7 8 9 10 11 12 | - Ví dụ ứng dụng với hàm format (ở mục 1>) ```js console.log( formatDistance( new Date(1986, 3, 4, 11, 32, 0), new Date(1986, 3, 4, 10, 32, 0), { locale: viLocale } ) ); // khoảng 1 giờ |
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