Date picker (presets)

A popover date picker combining a preset Select (Today, Tomorrow, +3 days, +1 week) with a Calendar.

import DatePickerWithPresets from '@rtorcato/shadcn-ui/components/ui-extended/date-picker-with-presets'

Open in Storybook ↗

Usage

Uncontrolled (manages its own state):

<DatePickerWithPresets defaultValue={new Date()} onChange={(date) => console.log(date)} />

Controlled:

const [date, setDate] = useState<Date>()
<DatePickerWithPresets value={date} onChange={setDate} />

Custom presets (offsets in days from today):

<DatePickerWithPresets
	presets={[
		{ label: 'Today', days: 0 },
		{ label: 'In 2 weeks', days: 14 },
	]}
/>

Props

Prop	Type	Default	Description
value	Date	—	Controlled selected date. Omit for uncontrolled usage.
onChange	(date?: Date) => void	—	Called when the date changes via a preset or the calendar.
defaultValue	Date	—	Initial date when uncontrolled.
presets	{ label: string; days: number }[]	Today / Tomorrow / +3 days / +1 week	Preset options, relative to today.
className	string	—	Class applied to the trigger button.