Date Range Picker

Forms

A 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";

Select a start and end date

Select Date Range

Limit selection to a specific range

Booking Period

Display validation errors

Report Period

End date must be after start date

Disabled state

Period

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