# React Datepicker — Reusable Date and Time Picker for React

> A flexible and accessible datepicker component for React with support for date ranges, time selection, localization, and custom styling.

## Install

Save as a script file and run:

# React Datepicker — Reusable Date and Time Picker for React

## Quick Use
```bash
npm install react-datepicker
```
```jsx
import { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

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

## Introduction
React Datepicker is one of the most widely used date-picking components in the React ecosystem. It provides a calendar popup with support for single dates, date ranges, time selection, and month or year views. The component is built on top of date-fns for date manipulation and localization.

## What React Datepicker Does
- Renders an input field with a calendar dropdown for date selection
- Supports date range picking with start and end dates
- Includes time selection with configurable intervals
- Provides month picker and year picker views
- Allows inline calendar rendering without the input field

## Architecture Overview
The component manages its open/closed state internally and positions the calendar dropdown relative to the input field using a portal or inline rendering. Date calculations and formatting rely on date-fns, which keeps the bundle modular since only the required date-fns functions are imported. The calendar renders a grid of day cells for the active month, with navigation arrows to change months. Locale support is handled by registering date-fns locale objects.

## Installation & Configuration
- Install via npm: `npm install react-datepicker`
- Import the default CSS for base styling
- Pass a selected date and onChange handler as required props
- Enable time selection with showTimeSelect and set timeIntervals for granularity
- Register date-fns locales for internationalization via the locale prop

## Key Features
- Date range selection with startDate, endDate, and selectsRange props
- Time picker with configurable 15, 30, or 60-minute intervals
- Inline calendar mode that renders without a text input
- Min and max date constraints with individual day filtering via filterDate
- Keyboard navigation and ARIA attributes for accessibility

## Comparison with Similar Tools
- **@mui/x-date-pickers** — Material UI styled; requires the MUI ecosystem
- **react-day-picker** — headless date picker with no default UI; more setup required
- **Ant Design DatePicker** — full-featured but tied to the Ant Design framework
- **flatpickr** — vanilla JS library with a React wrapper; not React-native
- **react-dates** — Airbnb library; no longer actively maintained

## FAQ
**Q: How do I set minimum and maximum selectable dates?**
A: Use the minDate and maxDate props with JavaScript Date objects to constrain the range.

**Q: Can I customize the appearance?**
A: Yes. Override the default CSS classes or use the calendarClassName and dayClassName callback props for conditional styling.

**Q: Does it support multiple date selection?**
A: Date range selection (two dates) is built in. For selecting arbitrary multiple dates, use the onChange handler to manage an array in your own state.

**Q: How do I localize the calendar for non-English languages?**
A: Import a locale from date-fns/locale, register it with registerLocale, and pass the locale name to the locale prop.

## Sources
- https://github.com/Hacker0x01/react-datepicker
- https://reactdatepicker.com

---
Source: https://tokrepo.com/en/workflows/asset-fda530bd
Author: Script Depot