react-date-range-input

A lightweight, customizable React Date Range Input component with popup calendar(s). Built with TypeScript and Pure CSS.

!React Date Range Input Demo

!NPM Version
!NPM License
!NPM Downloads
!Coverage Status

---

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

---

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 (
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

$3

| 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.