Introduction
In this article we will learn how to use React datepicker in React application. Learn from basic to 1 case of swearing is a hotel booking component using React-Datepicker.
React-datepicker is the most popular library for React projects, which currently has over 700,000 donwloads.
Prequisities
In this tutorial you will need to know basic Javascript & React. The first step of the installation configuration steps create-React-app globally .
|
1 2 |
npm i -g create-react-app |
After create-react-app is installed, we will need to create new app with library. You can use the following cmd:
|
1 2 |
npx create-react-app datepicker-app |
Then, after creating the application successfully, go to the project directory, install the required package and start the project.
|
1 2 3 4 5 6 7 8 9 10 |
// go to the project folder cd datepicker-app // install the required package npm i --save react-datepicker npm i --save moment // start the project npm start |
Basic Implementation: Default
Before we start we need to put the CSS file in the application. Insert the following code into your application. You can basically put it anywhere in the app. In this application we will put in the app.js file
|
1 2 3 |
// import required react-datepicker styling file import "react-datepicker/dist/react-datepicker.css"; |
Then we import the DatePicker component from the react-datepicker . The events we will need are selected & onchange selected to denote the component value. While the onchange is working is a function that handles the selected value change. onChange function takes a value and we need to mistakenly change the value of the selected date. Update the App.js file as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// import React and DatePicker import React, { useState } from "react"; import DatePicker from "react-datepicker"; // import required css from library import "react-datepicker/dist/react-datepicker.css"; // main implementation. using selected and onChange as main props to get and change the selected date value const App = () => { const [startDate, setStartDate] = useState(new Date()); return ( <DatePicker selected={startDate} onChange={date => setStartDate(date)} /> ); }; export default App; |
Basic Implementation: Time Picker
We can use the component time-picker by showTimeSelect props. Times will show about 30 minutes by default. We can we can specify how the date should show up according to dateFormat props. In this case we want to display in the component. Let’s use dateFormat="Pp" . We’re going to change App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// import React and DatePicker import React, { useState } from "react"; import DatePicker from "react-datepicker"; // import required css from library import "react-datepicker/dist/react-datepicker.css"; // time-picker component. using showTimeSelect as a main props and works with basic functionality on react-datepicker that explained above const App = () => { const [startDate, setStartDate] = useState(new Date()); return ( <DatePicker selected={date} onChange={handleDateChange} showTimeSelect dateFormat="Pp" /> ); }; export default App; |
Month & Year Picker
Aside from date & time, the ability to choose a month & year is important here. This component also has the option to choose month & year. Just make sure we use the correct dateFormat ddeerr format optimizing the App.js change features like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// import React and DatePicker import React, { useState } from "react"; import DatePicker from "react-datepicker"; // import required css from library import "react-datepicker/dist/react-datepicker.css"; // time-picker component. using showTimeSelect as a main props and works with basic functionality on react-datepicker that explained above const App = () => { const [startDate, setStartDate] = useState(new Date()); return ( <> // month picker implementation. using showMonthYearPicker as a main props <DatePicker selected={date} onChange={handleDateChange} showMonthYearPicker dateFormat="MM/yyyy" /> // month picker implementation. using showYearPicker as a main props <DatePicker selected={date} onChange={handleDateChange} showYearPicker dateFormat="yyyy" /> </> ); }; |
Advanced Example: Booking Hotel Date-Picker
We will create a date picker that sets the booking hotel date-picker component using react-datepicker. The goal is to build 2 react-datepicker components that get both connected as check-out dates, then display the selected dates. First all we need to do is create a component for check-in and check-out. We’ll use minDate props to set a minimum date limit for the user. Place this code inside your App.js file at the return section:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// import React import React, { useState } from "react"; ... ... return ( <div className="input-container"> <div> <label>Check-in</label> <DatePicker selected={checkInDate} minDate={new Date()} onChange={handleCheckInDate} /> </div> <div> <label>Check-out</label> <DatePicker selected={checkOutDate} minDate={checkInDate} onChange={handleCheckOutDate} /> </div> </div> ) ... |
The way the code snippet above determines the minDate . For check-in component it simply uses current data as minDate , User cannot select date before today. And for the billing component, we can use it. checkInDate value, which means user cannot select 1 day prior to check-in date.
The next step will be to define how we will store the value in our state, and how each function’s behavior changes. For this, the main idea is to simply create a state for each checkInDate and checkOutDate value and store the date there. The only difference is minDate of check-out component will depend on checkInDate value, we need to re checkOutDate whenever checkIndate change. So you need to update App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// import React import React, { useState } from "react"; ... const App = () => { // define check-in and check-out state const [checkInDate, setCheckInDate] = useState(null); const [checkOutDate, setCheckOutDate] = useState(null); // define handler change function on check-in date const handleCheckInDate = (date) => { setCheckInDate(date); setCheckOutDate(null); }; // define handler change function on check-out date const handleCheckOutDate = (date) => { setCheckOutDate(date); }; ... |
The final part is that we need to display the summary of the reservation. It will only be displayed when both check-in and check-out dates are valid. For this case we use moment.js to format the date. Update the App.js file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// import React import React, { useState } from "react"; ... return( ... // summary secton {checkInDate && checkOutDate && ( <div className="summary"> <p> You book a hotel from {moment(checkInDate).format("LL")} to{" "} {moment(checkOutDate).format("LL")}. </p> </div> )} ... ) ... |
The complete code App.js file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import React, { useState } from "react"; import DatePicker from "react-datepicker"; import moment from "moment"; import "./App.css"; import "react-datepicker/dist/react-datepicker.css"; function App() { const [checkInDate, setCheckInDate] = useState(null); const [checkOutDate, setCheckOutDate] = useState(null); const handleCheckInDate = (date) => { setCheckInDate(date); setCheckOutDate(null); }; const handleCheckOutDate = (date) => { setCheckOutDate(date); }; return ( <div className="App"> <div className="input-container"> <div> <label>Check-in</label> <DatePicker selected={checkInDate} minDate={new Date()} onChange={handleCheckInDate} /> </div> <div> <label>Check-out</label> <DatePicker selected={checkOutDate} minDate={checkInDate} onChange={handleCheckOutDate} /> </div> </div> {checkInDate && checkOutDate && ( <div className="summary"> <p> You book a hotel from {moment(checkInDate).format("LL")} to{" "} {moment(checkOutDate).format("LL")}. </p> </div> )} </div> ); } export default App; |
App.css styles file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.App { text-align: center; height: 100vh; flex: 1; justify-content: center; align-items: center; padding: 40px; } .input-container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .input-container .react-datepicker-wrapper { margin: 12px 0; width: 100%; } .input-container .react-datepicker-wrapper input { padding: 4px 12px; } .summary { font-size: 18px; } |
Conclusion
Now we know how to use react-datepicker in our apps. After following the instructions in this article we can re-build it for further projects.
References
https://www.npmjs.com/package/react-datepicker
https://codesource.io/complete-react-datepicker-tutorial-with-examples/