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

---

Installation

npm i @cameratajs/react-date-range-input
# or
yarn add @cameratajs/react-date-range-input

---

Usage

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.