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

Websolutionstuff | Sep-11-2023 | Categories : React JS

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.

 

Prerequisites

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.

 

Installing react-datepicker

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

 

Importing 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

 

Using react-datepicker

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.

 

Customizing react-datepicker

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')}
/>

 

Conclusion

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:

Recommended Post
Featured Post
How To Integrate Razorpay Payment Gateway In Laravel 9
How To Integrate Razorpay Paym...

In this article, we see how to integrate razorpay payment gateway in laravel 9. As you all know if you are developi...

Read More

Apr-11-2022

How To Login With Magic Link In Laravel 9
How To Login With Magic Link I...

In this article, we will see how to login with magic link in laravel 9. Here, we will learn passwordless login with...

Read More

Feb-01-2023

Laravel 8 Image Upload Example
Laravel 8 Image Upload Example

In this article, we will see the laravel 8 image upload example. Image or file upload is the most common task...

Read More

Oct-06-2020

How To Reset Modal Form In jQuery
How To Reset Modal Form In jQu...

Have you ever seen those pop-up boxes on websites? They're called modal forms, and they make it easier to do things...

Read More

Jan-04-2023