react-date-range-picker

A React date range picker component with two-month calendar view, hover preview, and preset ranges.

Usage

Copy src/DateRangePicker.jsx and src/DateRangePicker.css into your project, then import:

import { DateRangePicker } from './DateRangePicker';

function App() {
  return (
    <DateRangePicker
      onChange={({ startDate, endDate }) => console.log(startDate, endDate)}
      onCancel={() => {}}
    />
  );
}

Props

Prop	Type	Description
onChange	({ startDate, endDate }) => void	Called when the Update button is clicked with a confirmed range
onCancel	() => void	Called when the Cancel button is clicked. Omit to hide the button
startDate	Date | null	Initial start date
endDate	Date | null	Initial end date

Features

• Two-month calendar view (current and previous month by default)
• Click to set start date, click again to set end date
• Hover preview shows the potential range before confirming
• Built-in presets: Last 7 Days, Last 30 Days, Last 60 Days, Last Quarter, Last Year, All Time
• Cancel / Update buttons
• No external date library dependencies

Development

npm install
npm start   # dev server at http://localhost:3000
npm run build