Prepared Docs

Overview

DateInput from @prepared911/ui-calendar wraps a text field in a Popover that opens a DatePicker on focus or click. The visible value is locale-formatted via formatShortDate; the popover hosts the calendar grid so operators can type a date they remember or pick one from the grid when they can't. Use it in filter bars and forms where a calendar is secondary to the surrounding chrome.

DateInput mirrors DatePicker's modes (Single, Range, DaysAgo) and adds a GenericDateInputProps variant that lets you render arbitrary popover content when a shape outside the standard modes is needed.

Incident start

When to use

Filter bars and dense forms. Chatroom archive search, analytics filters, and scheduling forms all use DateInput because the calendar should stay hidden until requested: see chatroom/CommunicationsList/ArchiveSearchFilters/DateFilters.tsx.
Committed ranges in the chatroom filter bar. Pair mode: Range, cta: true, onApply, and onReset to match the deferred-apply pattern used in dispatch today.
"Last N days" shortcuts. DaysAgo mode gives operators a stable "look back" shortcut without computing the anchor externally.

When not to use

Always-visible calendars. If the grid should stay open alongside the form (scheduling panels, side-by-side comparisons), use DatePicker inline instead.
Inequality semantics. Use AdvancedDateRangePicker for Before / After / Between.
Repeating rules. Use EventRecurrencePicker.

Composition

Field. An @prepared911/ui-core Input with label, placeholder, and an optional tailIconButton. The field owns the visible formatted value.
Popover. Standard Popover / PopoverContent / PopoverTrigger around the field; opens on focus and closes on outside click or Escape.
Calendar body. The mode-matched DatePicker; Apply / Reset render when cta is true.
Optional tooltip. When showTooltip is true (default), hovering the field surfaces the full formatted value: useful when the field is narrow and truncates.

Behavior and states

Deferred commits. With cta + onApply, typing in the field updates the draft but does not emit onChange to the parent until Apply fires. onReset clears or reverts draft state.
Open on focus. The Popover opens when the field receives focus and closes on outside click or Escape. Control the open state via open / onOpenChange when the surrounding surface (a Drawer, a Modal) needs to coordinate focus.
Range display. Range mode shows the formatted start / end values separated by an en-dash in the field.
Tooltip vs label. When showTooltip is enabled, the hover tooltip mirrors the formatted value; do not rely on it as the only label: always pair with label or an external Label tied to id.

Best practices

Use mode: Range with cta + onApply + onReset in filter bars so operators can adjust both endpoints before dispatching a query.
Always pass label (or pair with an external Label via id): placeholder text alone is not an accessible name.
Coordinate onOpenChange with parent overlays (Modal, Drawer) to manage focus return correctly.
Pass tailIconButton for a clear affordance when the mouse target on the input isn't obvious (e.g. a clear-x when a value is set).

Don't

Don't nest DateInput inside another focus-stealing overlay without verifying focus returns to the field on close.
Don't disable the field as a readonly workaround: use @prepared911/ui-core Input with readonly semantics or swap for rendered text.
Don't use DateInput when the calendar should always be visible; DatePicker inline is clearer in that case.

Accessibility

DateInput is an Input + Popover + DatePicker. The component keeps field, trigger, and popover wired up, but the app owns the visible label, tooltip copy brevity, and announcing any Apply / Reset outcome. See the Accessibility page for the full contract.

Date Picker: the underlying grid; use inline when the calendar should always show.
Date Time Picker: add time-of-day to the selection.
Advanced Date Range Picker: Before / After / Between semantics.

Virtualized List / Accessibility

Date Input / API and Development

Overview

Incident start

When to use

Filter bars and dense forms. Chatroom archive search, analytics filters, and scheduling forms all use DateInput because the calendar should stay hidden until requested: see chatroom/CommunicationsList/ArchiveSearchFilters/DateFilters.tsx.
Committed ranges in the chatroom filter bar. Pair mode: Range, cta: true, onApply, and onReset to match the deferred-apply pattern used in dispatch today.
"Last N days" shortcuts. DaysAgo mode gives operators a stable "look back" shortcut without computing the anchor externally.

When not to use

Always-visible calendars. If the grid should stay open alongside the form (scheduling panels, side-by-side comparisons), use DatePicker inline instead.
Inequality semantics. Use AdvancedDateRangePicker for Before / After / Between.
Repeating rules. Use EventRecurrencePicker.

Composition

Field. An @prepared911/ui-core Input with label, placeholder, and an optional tailIconButton. The field owns the visible formatted value.
Popover. Standard Popover / PopoverContent / PopoverTrigger around the field; opens on focus and closes on outside click or Escape.
Calendar body. The mode-matched DatePicker; Apply / Reset render when cta is true.
Optional tooltip. When showTooltip is true (default), hovering the field surfaces the full formatted value: useful when the field is narrow and truncates.

Behavior and states

Deferred commits. With cta + onApply, typing in the field updates the draft but does not emit onChange to the parent until Apply fires. onReset clears or reverts draft state.
Open on focus. The Popover opens when the field receives focus and closes on outside click or Escape. Control the open state via open / onOpenChange when the surrounding surface (a Drawer, a Modal) needs to coordinate focus.
Range display. Range mode shows the formatted start / end values separated by an en-dash in the field.
Tooltip vs label. When showTooltip is enabled, the hover tooltip mirrors the formatted value; do not rely on it as the only label: always pair with label or an external Label tied to id.

Best practices

Use mode: Range with cta + onApply + onReset in filter bars so operators can adjust both endpoints before dispatching a query.
Always pass label (or pair with an external Label via id): placeholder text alone is not an accessible name.
Coordinate onOpenChange with parent overlays (Modal, Drawer) to manage focus return correctly.
Pass tailIconButton for a clear affordance when the mouse target on the input isn't obvious (e.g. a clear-x when a value is set).

Don't

Don't nest DateInput inside another focus-stealing overlay without verifying focus returns to the field on close.
Don't disable the field as a readonly workaround: use @prepared911/ui-core Input with readonly semantics or swap for rendered text.
Don't use DateInput when the calendar should always be visible; DatePicker inline is clearer in that case.

Accessibility

Date Picker: the underlying grid; use inline when the calendar should always show.
Date Time Picker: add time-of-day to the selection.
Advanced Date Range Picker: Before / After / Between semantics.