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

Output - How to implement a date picker in React - Clue Mediator

Steps to implement a date picker in React

Project structure
Package dependencies
Implementation
Output

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:

npm i react-datepicker

You will find the version of the following packages in React application.

react

^18.2.0

react-datepicker

^4.24.0

3. Implementation

Now, in your React component, import the date picker and set it up. Refer to the following files for implementation.

App.jsx

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 onchange="{(date)" ==""> setSelectedDate(date)}
        placeholderText="Select a date"
        className='dp-style'
        dateFormat="MMMM d, yyyy"
      />
      <h4>Date: {selectedDate?.toLocaleDateString("en-US") || '-'}</h4>
    </datepicker></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 named selectedDate, 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 the selectedDate 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..!!

Demo & Source Code

GitHub Repository StackBlitz Project