react-datepicker 4.18.0

React-datepicker is a simple, reusable date picker component explicitly crafted for React. It allows developers to integrate a flexible and customizable date picker into their applications. This tool offers developers easy installation via npm or yarn and is designed to work in harmony with React and PropTypes for a fully integrated solution.

To use react-datepicker in your project, you first need to install the package using npm or yarn with the following commands: For npm, use npm install react-datepicker --save For yarn, use yarn add react-datepicker After the installation, you also need to install React and PropTypes separately, as they are not included in this package.

To use the react-datepicker in your React view, you need to import it and the associated CSS file. Here's a basic usage example:

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

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

In the example above, the DatePicker is utilizing useState to handle the selected date. When a date is selected, it triggers the onChange event handler to update the startDate.

Also, you can include a time picker by adding showTimeSelect prop as follows:

<DatePicker
  selected={date}
  onChange={handleDateChange}
  showTimeSelect
  dateFormat="Pp"
/>

The react-datepicker documentation can be found on the main repository page on GitHub. The documents provide a comprehensive list of props that can be passed to the component. Moreover, additional usage examples can be found on the main website of the react-datepicker.