Let’s deep dive into the package date-fns to makes our lives easier than before. The package date-fns is lightweight.
Installing the package
We need to set up the project with the npm to work with a third-party package. Let’s quickly see the steps to complete our setup.
Navigate to the desired directory that you want to work in.Run the command npm init to initialize the project.Answer all the questions based on your preference.Now, install the date-fns using the below command
Create a file called dateFunctions.js
Now, we are ready to jump into the package date-fns. Let’s go and learn some essential methods from the package.
isValid
All dates are not valid. For example, there no date like 2021-02-30. How can we check whether the date is valid or not? The method isValid from the date-fns the package will help us find whether the given date is valid or not. Examine whether the following code works fine or not with the validity of the dates. If you execute the above code, then you will find 30th February 2021 is valid. Oh! It’s not. Why is it happening? JavaScript converts the extra day of February to 1st March 2021 which is a valid date. To confirm it, print new Date(“2021, 02, 30”) to the console. The package date-fns provides a method called parse to work around this problem. The method parse parses the date that you have given and returns accurate results. Have a look at the below code.
format
One of the basic usage while working with dates is formating them as we want. We format the dates in different formats using the format method from the date-fns package. Format the date as 23-01-1993, 1993-01-23 10:43:55, Tuesday, January 23rd 1993, etc.., Run the following code to get the corresponding date in the mentioned formats. You can find the complete list of formats here.
addDays
The method addDays is used to set a deadline that is after some number of days. Simply, we can add days to any date to get the date of the day after some days. It has many applications. Let’s say you have a birthday after X days and you are busy on those days. You may not remember the birthday in your busy schedule. You can simply make use of the addDays method to notify you about the birthday after X days. Have the code. Similar to the method addDays there are other methods like addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc.., You can easily guess the functionality of the methods with their names. Try them out.
formatDistance
Writing code to compare dates from scratch is a nightmare. Why do we compare dates anyway? There are many applications where you have seen date comparisons. If you take social media websites, there will a tagline mentioning 1 minute ago, 12 hours ago, 1 day ago, etc.., Here, we use date comparison from the post date and time to present date and time. The method formatDistance does the same thing. It returns the gap between the given two dates. Let’s write a program to find your age.
eachDayOfInterval
Let’s say you have to find about the next X days names and dates. The method eachDayOfInterval helps us to find the days between the start and end date. Let’s find out the next 30 days from today.
max and min
The methods max and min finds the maximum and minimum dates among the given dates respectively. The methods in the date-fns are very familiar and easy to guess the functionality of those methods. Let’s write some code.
isEqual
You can easily guess the functionality of the method isEqual. As you think the method isEqual is used to check whether two dates are equal or not. See the sample code below.
Conclusion
If we talk about every method in the date-fns package, then it takes days to complete. The best way to learn any package is to get familiar with the essential methods from it and then read the documentation for further information. Apply the same scenario for the date-fns package as well. You have learned the essential methods in this tutorial. Search the specific usage in the documentation or consider taking online courses such as JavaScript, jQuery, and JSON. Happy Coding 👨💻
