How to Add Date Picker in React JS using react-datepicker

A date picker is a crucial component in many web applications, enabling users to select dates conveniently. React, a popular JavaScript library, offers several libraries and packages to implement date pickers.

One of the most commonly used date picker libraries for React is react-datepicker. In this article, we will walk you through the process of adding a date picker to your React application using react-datepicker.

 

Before we begin, make sure you have a basic understanding of React and have a React project set up. If you haven't already, you can create a new React application using the Create React App.

 

To get started, you need to install the react-datepicker package. You can do this using npm or yarn, depending on your package manager preference. Open your terminal and run one of the following commands:

Using npm:

npm install react-datepicker --save

Using yarn:

yarn add react-datepicker

 

Once you've installed react-datepicker, you can import it into your React component.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css'; // Import CSS

 

Now that you have imported react-datepicker, you can use it in your component. Here's an example of how to create a simple date picker.

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="App">
      <h1>Date Picker Example</h1>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        dateFormat="MM/dd/yyyy"
      />
    </div>
  );
}

export default App;

In this example, we:

1. Import DatePicker from react-datepicker.
2. Create a state variable selectedDate to hold the selected date.
3. Use the <DatePicker /> component and set its selected prop to the selectedDate state.
4. Define an onChange event handler to update the selectedDate state when the user selects a date.
5. Use the dateFormat prop to specify the format in which the date should be displayed.

 

react-datepicker provides a wide range of customization options. You can customize the appearance, date format, and behavior according to your requirements. Here are a few common customizations.

Date Format

You can change the date format by modifying the dateFormat prop.

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  dateFormat="yyyy/MM/dd"
/>

 

Custom CSS

You can apply custom styles to the date picker by wrapping it in a container with a specific class name and then defining CSS rules for that class.

<div className="custom-datepicker">
  <DatePicker
    selected={selectedDate}
    onChange={(date) => setSelectedDate(date)}
  />
</div>

In your CSS file.

.custom-datepicker {
  /* Custom styles here */
}

 

Min and Max Dates

You can restrict date selection by setting the minDate and maxDate props.

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  minDate={new Date()}
  maxDate={new Date('2023-12-31')}
/>

 

In this article, we've covered the basics of adding a date picker to your React application using the react-datepicker library. You learned how to install and import the library, create a simple date picker, and customize it to suit your needs. With this knowledge, you can now enhance the date selection experience in your React projects with ease

 

---

You might also like:

• Read Also: 10 Powerful React Native Tools for 2024
• Read Also: How to Manage Time Zones in React.js Applications
• Read Also: Laravel 9 React JS CRUD Operation Example
• Read Also: How To Get Current Date And Time In React JS