DatePicker
A calendar date field (ISO yyyy-mm-dd).
Group: Inputs · Kind: native · in the lite catalog
Preview
Section titled “Preview”example
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
label |
string |
– | – | The field label. |
name |
string |
yes | – | The field’s key in the submitted data. |
value |
date |
– | yes | The chosen day as yyyy-mm-dd, or empty. |
min |
date |
– | – | The earliest allowed day. |
max |
date |
– | – | The latest allowed day. |
placeholder |
string |
– | – | Shown while empty. |
firstDayOfWeek |
number |
– | – | 0 (Sunday) to 6; else the locale’s. |
Events
Section titled “Events”on.change: runs an action
None.
Children
Section titled “Children”none
A2UI basic mapping
Section titled “A2UI basic mapping”The basic catalog’s DateTimeInput renders as DatePicker.
Built from
Section titled “Built from”A native component: every renderer paints it directly.
Accessibility
Section titled “Accessibility”Role: combobox
combobox opening a dialog with a grid of days
| Keys | Action |
|---|---|
Enter Space ArrowDown |
open on the selected (else today’s) day |
Arrow keys |
± 1 day / ± 1 week |
PageUp PageDown |
previous/next month (Shift: year) |
Home End |
start/end of the week (locale week start) |
Enter Space |
choose; Escape: close |
Theming
Section titled “Theming”Recipe parts: DatePicker/root DatePicker/label DatePicker/trigger DatePicker/calendar DatePicker/day
Keyed by: :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Form · FieldGroup · FormActions · Input · Textarea · NumberField · Checkbox · Radio