Date Range Picker
FormsA date range picker component for selecting a start and end date. Perfect for booking systems, reports, and filtering.
Import
import { DateRangePicker } from "@/components/ui/date-range-picker";Usage
Basic Date Range Picker
Select a start and end date
With Constraints
Limit selection to a specific range
With Error
Display validation errors
End date must be after start date
Disabled
Disabled state
API Reference
valueundefined{ start: Date; end: Date }Controlled date range value
defaultValueundefined{ start: Date; end: Date }Default date range for uncontrolled usage
onValueChangeundefined(range: DateRange) => voidCallback when the date range changes
labelundefinedstringLabel text displayed above the picker
placeholder"Select date range"stringPlaceholder text when no range is selected
minDateundefinedDateMinimum selectable date
maxDateundefinedDateMaximum selectable date
errorundefinedstringError message to display
disabledfalsebooleanWhether the picker is disabled
| Prop | Type | Default | Description |
|---|---|---|---|
value | { start: Date; end: Date } | undefined | Controlled date range value |
defaultValue | { start: Date; end: Date } | undefined | Default date range for uncontrolled usage |
onValueChange | (range: DateRange) => void | undefined | Callback when the date range changes |
label | string | undefined | Label text displayed above the picker |
placeholder | string | "Select date range" | Placeholder text when no range is selected |
minDate | Date | undefined | Minimum selectable date |
maxDate | Date | undefined | Maximum selectable date |
error | string | undefined | Error message to display |
disabled | boolean | false | Whether the picker is disabled |