Prepared Docs

DateInput from @prepared911/ui-calendar wraps an Input-style trigger that opens a DatePicker inside a Popover. It supports DatePickerMode.Single, Range, and DaysAgo, or a generic mode where you supply children and optional displayValue for bespoke triggers. Optional Apply/Reset flows (cta) work with onApply and onReset.

Props (discriminated by `mode`)

Shared across picker-backed modes:

Name	Type	Description
`id`	`string`	Required stable id for labels and inputs.
`label`	`string`	Optional field label.
`placeholder`	`string`	Input placeholder.
`disabled`	`boolean`	Disables the trigger and picker.
`open` / `onOpenChange`	`boolean` / handler	Controlled popover open state.
`showTooltip`	`boolean`	Show value tooltip on hover (default true).
`hideMonthYearSelect`	`boolean`	Hide month/year dropdowns in the embedded picker.
`disableFuture`	`boolean`	Prevent selecting dates after today.
`minSelectableDate` / `maxSelectableDate`	`Date`	Inclusive bounds.
`cta`	`boolean`	Show Apply/Reset in the picker footer.
`onApply`	`(value: Date \| { start: Date; end: Date }) => void`	When `cta` is used.
`onReset`	`() => void`	When `cta` is used.

mode: Single—value?: Date, onChange?: (Date) => void.

mode: Range—value?: { start: Date; end: Date }, matching onChange.

mode: DaysAgo—daysAgo: number plus single-date value / onChange for relative presets.

Generic—children, optional displayValue, optional tailIconButton; no embedded DatePicker mode enum on the generic branch.

Import

Single date

Date Input / Usage

Date Input / Accessibility

Props (discriminated by mode)

Props (discriminated by `mode`)

Shared across picker-backed modes:

Name	Type	Description
`id`	`string`	Required stable id for labels and inputs.
`label`	`string`	Optional field label.
`placeholder`	`string`	Input placeholder.
`disabled`	`boolean`	Disables the trigger and picker.
`open` / `onOpenChange`	`boolean` / handler	Controlled popover open state.
`showTooltip`	`boolean`	Show value tooltip on hover (default true).
`hideMonthYearSelect`	`boolean`	Hide month/year dropdowns in the embedded picker.
`disableFuture`	`boolean`	Prevent selecting dates after today.
`minSelectableDate` / `maxSelectableDate`	`Date`	Inclusive bounds.
`cta`	`boolean`	Show Apply/Reset in the picker footer.
`onApply`	`(value: Date \| { start: Date; end: Date }) => void`	When `cta` is used.
`onReset`	`() => void`	When `cta` is used.

mode: Single—value?: Date, onChange?: (Date) => void.

mode: Range—value?: { start: Date; end: Date }, matching onChange.

mode: DaysAgo—daysAgo: number plus single-date value / onChange for relative presets.

Generic—children, optional displayValue, optional tailIconButton; no embedded DatePicker mode enum on the generic branch.

Import

Single date

Date Input / Usage

Date Input / Accessibility

Props (discriminated by mode)

Import

Single date