In this tutorial, you will learn how to use React datepicker in your React project. You will learn from a basic example to a specific use case by creating a hotel booking component using React-Datepicker.
React-datepicker is a simple and reusable component for React. This component currently has around 314 contributors with more than 600.000 weekly downloads which makes this component become one of the most popular libraries for React projects.
Prequisities
In this tutorial, you will need a configured computer and also basic Javascript & React knowledge. Make sure you have node
and npm
installed on your computer. The first step of the configuration step is to install create-react-app
globally.
After the create-react-app
is installed, we will need to create a new project with this library. To do that, you can use:
Then after successfully creating the project, go to the project folder, install the required package and start the project.
Basic Implementation: Default
Before starting anything, you will need to put the CSS file into your project. Insert the following code into your project. Basically, you can put this anywhere inside your project, but in this tutorial, we will only use the App.js
file, so put this on our code:
Then we can start to implement this by importing the DatePicker component from react-datepicker
. The mandatory props that we need for this component are only selected
and onChange
.
The selected
props take a date-format value to represent the value of this component, while onChange
will act as a handler function to change the selected
value. The onChange
function takes a date as an argument and the only thing we need to do on this function is to change the value of the selected
date. See the example below for implementation on our App.js
file:
Basic Implementation: Time Picker
We can use this component as a time-picker by using showTimeSelect
props. Times will be displayed at a 30-minute interval by default. We can format how the date will be displayed by using the dateFormat
props. In this case, because we want to display the time inside the component, let’s use dateFormat="Pp"
. To implement this on our project, change our App.js
to looks like this:
Month & Year Picker
Besides date & time, the ability to pick a month & year is an important thing to have here. This component also has the feature to select month & year. Just make sure we use the correct format of dateFormat
to optimize the features. Change our App.js
with the following code:
Advanced Example: Booking Hotel Date-Picker
Now, let’s go to the next level. We are going to create a booking hotel date-picker component using react-datepicker
. The goal is to build two react-datepicker
components, make both connected as check-in and check-out date, and then display the selected dates.
NOTE: In this tutorial, we are only using the single *App.js*
file and the code examples below will explain section by section. By the end of this tutorial, you will get the complete code of the whole page and an additional styling file.
First, all we need to do is to create a basic component for check-in and check-out. We don’t really need to use a lot of props here, besides the necessary one, we will only use the minDate
props to put a minimum date limit for the user. Also, put some element wrapper and label just to make sure the UI looks neat. Place this code inside your App.js
file at the return section:
How the above code defines the minDate
value? For the check-in component, it’s simply using the current date as a minDate
, the user cannot pick a date before today. And for the check-out component, we can use the checkInDate
value, which means, the user cannot pick a date before the check-in date.
The next step will be defining how we are going to save the value on our state, and how each handle change function works. For this, the main idea is to simply create a state for each checkInDate
and checkOutDate
value and save the date there. The only difference is because the minDate
of the check-out component will depend on the checkInDate
value, we will need to reset the checkOutDate
value anytime the checkInDate
value changed. So, here is the code you need to add to your App.js
file:
The last part is we need to display the summary of the booking. It will only be displayed when both check-in and check-out date have the value. For this case, we will use moment.js
to format the date. Here is the code, add this to your App.js
file below the input component:
The complete code will of your App.js
will be something like this:
Here is some of App.css
file for styling purpose:
Conclusion
Now we know how to use a react-datepicker
on our project. After following the basic and advanced tutorial, we will be able to use this great component for our next project. I hope you understand every step in this tutorial, if you have any questions or suggestions, please let us know in the comment section below.