DateRangePicker
Markdown for agentsStart/end date range with ISO strings and quick presets.
npx @slipstream-ui/cli@latest add date-range-pickerRolling period
2026-01-01 to 2026-03-31
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | DateRange | — | Controlled range with ISO start/end strings. |
| defaultValue | DateRange | — | Initial range when uncontrolled. |
| onValueChange | (range: DateRange) => void | — | Fires with the next ISO range. |
| startLabel | string | 'From' | Accessible label for the start field. |
| endLabel | string | 'To' | Accessible label for the end field. |
| presets | DateRangePreset[] | — | Preset buttons. Defaults to 7/30/90 days and YTD. |
| showPresets | boolean | true | Show the preset row. |
| disabled | boolean | — | Disable presets and both fields. |
Accessibility
- Both native date inputs have visible associated labels.
- The end cannot precede the start; the range stays ordered.
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.