How to implement a date picker in React
Have you ever wondered how to make your React application more interactive and user-friendly when it comes to date selection? Well, you’re in luck! In this guide, we’ll explore a hassle-free way to implement a date picker using the react-datepicker
library. Whether you’re working on a project that requires scheduling, booking, or any form of date-related input, this library can add a touch of elegance to your application.
Getting started is a breeze! We’ll walk through each step, from installing the library to customizing it according to your project’s needs. By the end of this tutorial, you’ll have a functional and stylish date picker ready to enhance the user experience in your React app. Let’s dive in and make date selection a joy for your users!
Demo Application
Steps to implement a date picker in React
1. Project structure
- datepicker-react-app
- node_modules
- public
- index.html
- src
- App.jsx
- index.css
- main.jsx
- package-lock.json
- package.json
- README.md
2. Package dependencies
To set up the react-datepicker npm package, simply execute the following command in your terminal:
1 | npm i react-datepicker |
You will find the version of the following packages in React application.
3. Implementation
Now, in your React component, import the date picker and set it up. Refer to the following files for implementation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { useState } from 'react' import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; function App() { const [selectedDate, setSelectedDate] = useState(null); return ( <div> <h2>How to implement a date picker in React - <a href="https://www.cluemediator.com" target='_blank' rel="noopener">Clue Mediator</a></h2> <DatePicker selected={selectedDate} onChange={(date) => setSelectedDate(date)} placeholderText="Select a date" className='dp-style' dateFormat="MMMM d, yyyy" /> <h4>Date: {selectedDate?.toLocaleDateString("en-US") || '-'}</h4> </div> ) } export default App |
Let’s break down this code:
selected={selectedDate}
: This prop determines the currently selected date. It’s linked to a state variable namedselectedDate
, indicating the date that the date picker will display.onChange={(date) => setSelectedDate(date)}
: This prop specifies the function to be executed when a user selects a date. In this case, it updates theselectedDate
state with the chosen date.placeholderText="Select a date"
: This sets the text that appears in the date picker when no date is selected. It serves as a prompt for the user.className='dp-style'
: This prop assigns a custom CSS class, in this case,dp-style
, to the date picker. You can use this class to apply your own styling and make the date picker match your application’s design.dateFormat="MMMM d, yyyy"
: This prop determines the format in which the selected date will be displayed. In this example, the format is set to show the full month name, followed by the day of the month and the year.
4. Output
Run your application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!