Date Range Picker

Forms

Two native date inputs for picking a start and end date.

A lightweight range picker built from two native date inputs, joined by an arrow. Each end reports its value independently, so validation and storage stay simple.

npx shadcn@latest add date-range-picker

Basic usage

Pick a start and end date; both values are reported via separate callbacks.

Preview

Live

Pick a range

tsx

1const [start, setStart] = useState("")
2const [end, setEnd] = useState("")
3
4<DateRangePicker
5  start={start}
6  end={end}
7  onStartChange={setStart}
8  onEndChange={setEnd}
9/>

Form integration

Pass distinct names so the values submit as separate form fields.

Preview

Live

tsx

1<DateRangePicker startName="start" endName="end" />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
start	string	The start date in YYYY-MM-DD format.
end	string	The end date in YYYY-MM-DD format.
onStartChange	(value: string) => void	Called when the start date changes.
onEndChange	(value: string) => void	Called when the end date changes.
startName	string	The name of the start input for form submission.
disabled	boolean= false	Disables both inputs.