Usage
DateInput from @prepared911/ui/date-input wraps a text field in a Popover that opens a Calendar 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 Calendar'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.
DateInput because the calendar should stay hidden until requested: see chatroom/CommunicationsList/ArchiveSearchFilters/DateFilters.tsx.mode: Range, cta: true, onApply, and onReset to match the deferred-apply pattern used in dispatch today.DaysAgo mode gives operators a stable "look back" shortcut without computing the anchor externally.Calendar inline instead.AdvancedDateRangePicker for Before / After / Between.RecurrenceField.@prepared911/ui Input with label, placeholder, and an optional tailIconButton. The field owns the visible formatted value.Popover / PopoverContent / PopoverTrigger around the field; opens on focus and closes on outside click or Escape.Calendar; Apply / Reset render when confirm is true.showTooltip is true (default), hovering the field surfaces the full formatted value: useful when the field is narrow and truncates.confirm + onApply, typing in the field updates the draft but does not emit onValueChange to the parent until Apply fires. onReset clears or reverts draft state.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 Dialog) needs to coordinate focus.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.mode: Range with confirm + onApply + onReset in filter bars so operators can adjust both endpoints before dispatching a query.label (or pair with an external Label via id): placeholder text alone is not an accessible name.onOpenChange with parent overlays (Dialog, Drawer) to manage focus return correctly.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).DateInput inside another focus-stealing overlay without verifying focus returns to the field on close.@prepared911/ui Input with readonly semantics or swap for rendered text.DateInput when the calendar should always be visible; Calendar inline is clearer in that case.DateInput is an Input + Popover + Calendar. 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.