Date select
SheetDateSelect is the mobile date picker. A floating popover fights the thumb on touch, so the month grid opens in a BottomSheet and the day cells grow to a 44px touch target. Single choice commits and closes on tap; range picks a start then an end. Naming and value shapes mirror the desktop DateSelect.
// Single day<SheetDateSelect aria-label="Start date" value={day} onValueChange={setDay} placeholder="Pick a start date"/>
// Range<SheetDateSelect aria-label="Sprint window" mode="range" value={range} onValueChange={setRange} placeholder="Pick a date range"/>Live
In the form skeleton, tap Start date for a single day or Sprint window for a range. Range picks a start on the first tap and closes on the second.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
mode | 'single' | 'range' | 'single' | Switches the value between Date and DateRange. |
value / defaultValue | Date | DateRange | null | — | Controlled or uncontrolled selection. |
onValueChange | (value) => void | — | Date | null (single) or DateRange | null (range). |
presets | { label, value() }[] | — | One-tap shortcuts shown above the grid. |
weekStartsOn | 0 | 1 | 1 | First column: 0 = Sunday, 1 = Monday. |
locale | string | 'en-GB' | BCP 47 locale for month, weekday and date formatting. |
placeholder | string | — | Shown on the trigger when empty. |
aria-label | string | — | Required — names the trigger and grid. |