@cameratajs/react-date-range-input
Version:
A lightweight, customizable React Date Range Input component with popup calendar(s). Built with TypeScript and Pure CSS.
102 lines (76 loc) • 4.71 kB
Markdown
# react-date-range-input
A lightweight, customizable React **Date Range Input** component with popup calendar(s). Built with TypeScript and Pure CSS.
## Features
- Fully controlled input (you own the state)
- Popup with 1, 2 or more calendars
- Customizable highlight colors and rendering
- Headless & styled — easy to extend or override styles
## Demo
Check out the live demo of the **React Date Range Input** component in action:
[**Live Demo**](https://codesandbox.io/p/sandbox/8vyk78)
## Installation
```bash
npm i @cameratajs/react-date-range-input
# or
yarn add @cameratajs/react-date-range-input
```
## Usage
```js
import { useState } from 'react';
import { DateRangeInput } from 'date-range-input';
function App() {
const [range, setRange] = useState({
startDate: null,
endDate: null,
});
return (
<DateRangeInput
startDate={range.startDate}
endDate={range.endDate}
onChange={setRange}
calendars={2}
anchor="bottom"
color="#e11d48"
highlightColor="#333"
highlightRangeColor="#ddd"
startDatePlaceholder="Start date"
endDatePlaceholder="End date"
/>
);
}
```
## API
### Props
| Prop | Type | Description |
| ---------------------------- | --------------------------------------------------------------------- | --------------------------------------- |
| `startDate` | `Date \| null` | Selected start date |
| `endDate` | `Date \| null` | Selected end date |
| `onChange` | `(range: { startDate: Date \| null; endDate: Date \| null }) => void` | Callback when date range changes |
| `initialMonth` | `Date` | Initial visible month (default: today) |
| `isOpen` | `boolean` | Controlled visibility of the popup |
| `onToggle` | `(open: boolean) => void` | Callback when popup is toggled |
| `anchor` | `'top' \| 'bottom' \| 'left' \| 'right'` | Position of the popup (default: bottom) |
| `calendars` | `number` | Number of calendars (default: 2) |
| `highlightColor` | `string` | Color for selected dates |
| `highlightRangeColor` | `string` | Color for the date range |
| `renderDay` | `(date, isSelected, isInRange) => React.ReactNode` | Custom day rendering |
| `className` | `string` | Class name for the input wrapper |
| `popupClassName` | `string` | Class name for the popup |
| `calendarContainerClassName` | `string` | Class name for calendar container |
| `navigationButtonClassName` | `string` | Class name for navigation buttons |
| `color` | `string` | Text color for selected days |
| `startDatePlaceholder` | `string` | Placeholder for the start date input |
| `endDatePlaceholder` | `string` | Placeholder for the end date input |
## License
**react-date-range-input** is released under the **MIT** license.