How to Handle Date and Time Management in React Using Day.js
Date and time management is crucial to any application, and React is no exception. While JavaScript provides built-in date and time manipulation functions, they can be cumbersome. Fortunately, many third-party libraries can simplify date and time management in React. One such library is Day.js.
Day.js is a lightweight library for parsing, validating, manipulating, and formatting dates and times in JavaScript.
Installing Day.js
TheDay.jslibrary is a modern alternative toMoment.js, which is another library used for handling dates and times. Day.js offers a similar API with a smaller footprint and faster performance.
To use Day.js in your React application, you first need to install it. you could do this by running the following command in your terminal:
Parsing and Formatting Dates and Times
Day.js providesa simple APIfor parsing and formatting dates. you may get the date and time using thedayjs()method, but first, you need to import it from the Day.js library.
For example:
Thedayjs()method creates a new Day.js object representing a specific date and time. In the example above, thedayjs()method creates a Day.js object representing the current date and time.
In your console, the Day.js object would look like this:
Thedayjs()method accepts an optional date argument which can be a string, a number (Unix timestamp),a JavaScript Date object, or another Day.js object. The method will generate a Day.js object representing the date argument specified.
The Day.js object’s output of this code block will be similar to the previous code block but will have different property values.
To display the dates generated as Day.js objects, you need to use theformat()method. Theformat()method of the Day.js library allows you to format a Day.js object as a string according to a specific format string.
The method takes a format string as its argument. The string argument can include a combination of letters and special characters, each with a specific meaning,
Thedatevariable will display the date in this format ‘Wednesday, April 26, 2023’. The format string is‘dddd, MMMM D, YYYY’whereddddis the day of the week,MMMMis the month in words,Dis the day of the month in one or two digits, andYYYYis the year in four digits.
TheunixDatevariable is formatted as a string using the format string’MM/DD/YYYY,‘which represents the month in two digits, the day of the month in two digits, and the year in four digits.
Thetimevariable displays the current time in the specified format. The format string is‘HH:mm:ss’where theHHrepresents the hours, themmrepresents the minutes, and thessrepresents the seconds.
Manipulating Dates and Times
Day.js provides multiple methods that make it easy to manipulate dates and times. you’re able to refer to theDay.jsofficial documentation to get the complete list of available methods for manipulating dates and times.
The code block above uses theadd()method to add 7 days to the current date. Theadd()method allows you to add a specified amount of time to a Day.js object. The method takes two arguments, the amount of time to add in numbers and the unit of time to add.
With thesubtract()method, you can subtract a specified amount of time from theDay.jsobject. Thetimevariable subtracts 2 hours from the current time using thesubtract()method.
Displaying Relative Time
Day.js provides several methods includingfromNow(),toNow(),to(), andfrom()to display relative time, such as “2 hours ago” or “in 3 days”. To use these methods, import therelativeTimeplugin fromdayjs/plugin/relativeTimein your React application.
ThefromNow()function displays a relative time string representing the difference between the current time and a specified date. In this example, thefromNow()displays the difference betweendateand the current time.
ThetoNow()function is similar to thefromNow()function in that it displays a string representing the difference between a specified date and the current time. When you call thetoNow()function, it returns a relative time string to the current time.
Lastly, using thefrom()andto()functions, you can display a relative time string representing the difference between two specified dates. In this example, you get the difference betweenlastYearanddateusing thefrom()andto()functions.
Note, you could also pass in an optional boolean argument to thefromNow(),toNow(),from(), andto()methods to specify whether to include or exclude the suffix (e.g. “ago” or “in”).
Passingfalseto the argument will display the dates with the suffix.
Managing Date and Time Effectively
Managing date and time is a crucial aspect of any application, and Day.js provides an easy-to-use and flexible library for handling these operations in a React application. By incorporating Day.js into your project, you can easily format dates and times, parse strings, and manipulate durations.
Additionally, Day.js offers a range of plugins to extend its functionality and make it even more powerful. Whether you’re building a simple calendar or a complex scheduling system, Day.js is an excellent choice for managing date and time in your React application.
Go beyond JavaScript’s built-in date and time capabilities with one of these replacement libraries.
Windows is great, but adding this makes it unstoppable.
This small feature makes a massive difference.
I gripped my chair the entire time—and then kept thinking about it when the screen turned off.
Unlock a world of entertainment possibilities with this clever TV hack.
Now, I actually finish the books I start.
