DatePicker nativelite

A calendar date field (ISO yyyy-mm-dd).

A2UI basic: DateTimeInput
Children: none

Preview

Loading the renderer…

label

namerequired

value

min

max

placeholder

firstDayOfWeek

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "DatePicker",
          "label": "Due",
          "name": "due",
          "value": "2026-10-14"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

DatePicker rendered by the React renderer on Web — **Web** React

DatePicker rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

DatePicker rendered by the Compose renderer on Android — **Android** Compose

DatePicker rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-date-picker, painted by each native renderer.

Props

Prop	Type	Default	Description
`label`	`string`	–	The field label.
`name`required	`string`	–	The field's key in the submitted data.
`value`bind	`date`	–	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 and slots

Name	Kind
`on.change`	event: runs an action

Accessibility

Role: combobox
Semantics: combobox opening a dialog with a grid of days

Keys	Action
`EnterSpaceArrowDown`	open on the selected (else today's) day
`Arrow keys`	± 1 day / ± 1 week
`PageUpPageDown`	previous/next month (Shift: year)
`HomeEnd`	start/end of the week (locale week start)
`EnterSpace`	choose; Escape: close

Theming

Recipe parts: DatePicker/rootDatePicker/labelDatePicker/triggerDatePicker/calendarDatePicker/day
Keyed by: :hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Date picker

The ONE date picker.

Popover + Calendar was inlined three times — the properties panel, the editor chips, the mobile tray — and each copy converted between a Date and the wire's YYYY-MM-DD its own way, two of them through new Date(value), which the spec parses as UTC and which therefore shows the PREVIOUS day west of Greenwich. This one speaks the wire format on both sides and converts in exactly one place. A due date is a DATE, never an instant (REV2-49), so there is no time arm; the trigger is a Pill showing the short form, and Clear is a row under the grid rather than a second control beside it.

Webok

DatePickerpackages/ui/src/date-picker.tsx

parseDateValue / formatDateLabel are the only place the wire date becomes a Date

iOSok

DueDateSheetapps/ios/Exponential/UI/Issue/Sheets/DueDateSheet.swift

CreateIssueView keeps a second unfoldable form, UI/Issue/DueDatePicker.swift

Androidok

DueDateSheetapps/android/app/src/main/java/com/exponential/app/ui/issue/DueDateSheet.kt

the grid itself is IssueDatePickerDialog.kt

Desktopok

pickers::due_date_popoverapps/desktop/crates/ui/src/pickers.rs