DatePickerPopover
Markdown for agentsDate field with a Calendar panel, ISO strings, min/max and keyboard selection.
npx @slipstream-ui/cli@latest add date-picker-popoverBooking date
Business-local date
Value posted by a form: 2026-11-13
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Selected day as `YYYY-MM-DD`. |
| onValueChange | (value: string) => void | — | Fired with the ISO key. |
| min / max | string | — | Selectable bounds, inclusive. |
| side | 'top' | 'right' | 'bottom' | 'left' | bottom | Preferred side; flips when it cannot fit. |
| placeholder | string | Pick a date | Trigger text before a date is chosen. |
| name / required | string / boolean | — | Hidden input for native forms. |
| disabled | boolean | — | Disables the trigger. |
Accessibility
- The trigger is a button with aria-haspopup="dialog" and aria-expanded.
- Enter or Space opens the panel; the selected day receives focus.
- Escape closes the panel; choosing a day returns focus to the trigger.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.