How to Add DatePicker to React JS Application

In this article, I will explain how we can use DatePicker in your React Application.

React Form UI

1. You can learn to create the React Form UI here.
2. To add JSX to React From, visit here.

DatePicker

A date picker, also known as a popup calendar, date and time picker, or time picker, is a graphical user interface widget that allows the user to select a date from a calendar and/or a time from a time range. The standard practise is to provide a text box field that, when clicked to enter a date, pops up a calendar next to or below the field, allowing the user to populate the field with an appropriate date, or to provide a text box with a calendar icon that, when clicked on, the calendar (or time field) appears, or to show a calendar widget directly (inline).

Some of the DatePicker features include:

1. allowing the user to add a date by simply clicking on a date in the pop-up calendar rather to having to remove their hand from the mouse to type in a date
2. Date validation is accomplished by restricting date ranges, such as only after today and for two weeks later, or only for dates in the past.
3. A date range can be supplied such that for a set of “from-to” date fields, if the “from” field is filled, the “to” field cannot be set to a date earlier than the “from” field, and vice versa if the “to” field is filled, the “from” field cannot be set to a date later than the “to” field.
4. can contain a “today” button that allows you to choose the day of the week the week begins on
5. Only lawful dates can be input; for example, February 29, 2100 and June 31 cannot be typed.
6. Confusion about date format is avoided, for example, is 7/4/10 July 4, 2010, April 7, 2010, or April 10, 2007?
7. It is not possible to input an incorrect time (25:18, 4:61).
8. Cannot choose an out-of-range time (6:00 p.m. for a business that allows clients to choose their own appointments but closes at 5:30 p.m.) or during unattended periods (like lunch).
9. It is not possible to pick an invalid range (can restrict selected time to the nearest 5, 10 or 15 minutes or any range, e.g. 2:30 or 2:45 is okay, but 2:37 is not.)

Install the React Datepicker using the following command

npm install react-datepicker --save

The above command will save ‘react-datepicker’ as a dependency in ‘package.json’

App.js

Make the following changes to app.js file.

Add the import statements

import DatePicker from "react-datepicker";
import setHours from 'date-fns/setHours';
import setMinutes from 'date-fns/setMinutes';

1. DatePicker is imported to use the datepicker element
2. setHours is imported to use the setHours method
3. setMinutes is imported to use the setMinutes method

const [date, setDate] = useState(setHours(setMinutes(new Date(), 30), 17))

We add a state variable to manage the value when we select a particular date.

setDate(new Date())

We need to add the above command under resetButton() function, to reset the value to the current date.

Add the following code under return() to render the DatePicker element.

<div className="mb-3">
   <label htmlFor="exampleFormControlInput1" className="form-label">Date</label>
   <DatePicker selected={date} onChange={(date) =>
   setDate(date)} id="exampleFormControlInput1"
   name="date" className="form-control" dateFormat="MMMM d, yyyy h:mm aa" withPortal 
   showTimeSelect minTime={setHours(setMinutes(new Date(), 0), 17)}
   maxTime={setHours(setMinutes(new Date(), 30), 20)}/>
</div>

In the above code, we have created a label “Date”.

After which we added DatePicker with the following attributes:

1. selected={date}, to set the value of the input based on the value selected.
2. onChange={(date) =>setDate(date)} is used to change the value of the state variable based on the value selected from the DatePicker window.
3. id="exampleFormControlInput1" is used to tell compiler to bind label to this element.
4. name="date" is used to name the element for the JSX.
5. className="form-control" is used to apply Bootstrap class.
6. dateFormat="MMMM d, yyyy h:mm aa" is used to set up the date time format of the output to be shown on the React form UI
7. withPortal is used to result a pop up containing the DatePicker UI
8. showTimeSelect output the time selection UI.
9. minTime={setHours(setMinutes(new Date(), 0), 17)} is used to set the minimum selectable time to 5 PM.
10. maxTime={setHours(setMinutes(new Date(), 30), 20)} is used to set the maximum selectable time to 8:30 PM.

Note: To learn about other attributes you can visit Official Website.

After making all the above-mentioned changes, execute the following command

npm start

After which you will get the following UI, in which you can enter your details.

When we click on the Date, we will get the following popup, from which you can choose the date and time.

Conclusion

Thanks for reading, hope you got answers to some of your questions and learned how to create a simple Form UI in React.

Visit Let’s React to learn more about React.