Overview
DateRangePicker provides an intuitive interface for selecting date ranges. Built on react-day-picker with optional 30-minute time selection, it's ideal for scheduling availability, booking windows, and date-bound filters.
Key Features
- Two-month calendar view for easy range selection
- Optional time selection with 30-minute precision
- Smart trigger display (compact format for same-month ranges)
- Date constraints with minDate and maxDate props
- Responsive design with single/double month display
Examples
Interactive Demo
Click the input to open the calendar. Select a start and end date to create a range.
Past dates are disabled
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateRangeValue | required | Object with from and to Date properties |
onChange | (range: DateRangeValue) => void | required | Callback when date range changes |
includeTime | boolean | false | Show time pickers with 30-minute increments |
placeholder | string | "Select date range" | Text shown when no dates are selected |
minDate | Date | undefined | Earliest selectable date |
maxDate | Date | undefined | Latest selectable date |
numberOfMonths | 1 | 2 | 2 | Number of months to display (1 or 2) |
disabled | boolean | false | Disable the date picker |
Usage
import { DateRangePicker, type DateRangeValue } from '@/ui/components';
// Basic usage
const [range, setRange] = useState<DateRangeValue>({
from: undefined,
to: undefined,
});
<DateRangePicker
value={range}
onChange={setRange}
placeholder="Select date range"
/>
// With time selection (30-minute increments)
<DateRangePicker
value={range}
onChange={setRange}
includeTime
placeholder="Select date and time"
/>
// With constraints
<DateRangePicker
value={range}
onChange={setRange}
minDate={new Date()} // No past dates
maxDate={addMonths(new Date(), 6)} // Max 6 months ahead
/>
// Single month view
<DateRangePicker
value={range}
onChange={setRange}
numberOfMonths={1}
/>