Date picker (range)

A popover two-month date range picker.

import DatePickerWithRange from '@rtorcato/shadcn-ui/components/ui-extended/date-picker-with-range'

Open in Storybook ↗

Usage

Uncontrolled (manages its own state):

<DatePickerWithRange onChange={(range) => console.log(range)} />

Controlled:

const [range, setRange] = useState<DateRange>()
<DatePickerWithRange value={range} onChange={setRange} />

Props

Prop	Type	Default	Description
value	DateRange	—	Controlled selected range. Omit for uncontrolled usage.
onChange	(range?: DateRange) => void	—	Called when the selected range changes.
defaultValue	DateRange	—	Initial range when uncontrolled.
className	string	—	Wrapper class.