DatePicker
- Layer: Component
- Base:
@ark-ui/solid/date-picker+ custom styling
Single date
Section titled “Single date”Single
Range with presets
Section titled “Range with presets”Range · 7D / MTD / QTR / CYCLE
Anatomy
Section titled “Anatomy”| Element | Visual |
|---|---|
| Trigger | 38px row, --colors-bg-muted, mono numerals, calendar icon + caret. |
| Menu | 296px popover, --colors-bg-emphasized, 1px border. Portalled. |
| DOW header | Mono · 10px · UPPERCASE · --colors-text-muted. |
| Cell | 32px square, --colors-fg-default. Hover paints border + accent text. |
| Today | 3px muted dot under the cell number. |
| Endpoint | --colors-accent-default fill + --colors-accent-glow halo. |
| In-range | --colors-accent-dim background. |
| Preset | Pill with mono UPPERCASE label, 0.14em tracking. |
Plane 1 Constraints
Section titled “Plane 1 Constraints”Calendar popover uses border + opaque --colors-bg-emphasized — no drop shadow. The endpoint’s 8px accent-glow halo is the one sanctioned glow, matching the progress range’s affordance.
Accessibility
Section titled “Accessibility”Wraps @ark-ui/solid/date-picker. The machine manages role="dialog" on the popover, keyboard grid navigation (arrow keys within the month, PageUp/PageDown for months), aria-selected on cells, and focus trapping. The DS adds the visual layer only.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | ISO date strings (YYYY-MM-DD) — one entry for single mode, two for range. |
onValueChange | (details: ValueChangeDetails) => void | — | Fires with { value: DateValue[]; valueAsString: string[] }. Use value.map(v => v.toString()) for ISO strings. |
selectionMode | 'single' | 'range' | 'single' | Picker mode. |
presets | DatePickerPreset[] | — | Preset pills shown in the footer. 'CYCLE' is filtered out unless cycleStartMonth is also set. |
onPresetSelect | (preset: DatePickerPreset) => void | — | Fired when a preset pill is clicked. Caller computes the range for '7D', 'MTD', 'QTR'; the DS commits 'CYCLE' itself via the state machine, so this handler can ignore that case. |
cycleStartMonth | number (1–12) | — | Fiscal-year start month. When set, CYCLE renders and selects the current fiscal year on click (month N of this or last calendar year → day before next fiscal start). When omitted, CYCLE is dropped from the rendered presets. |
aria-label | string | — | Required when the trigger has no surrounding label. |