DateRangePicker nativelite

A two-date range field with one calendar (ISO dates).

Children: none

Preview

Loading the renderer…

label

namerequired

start

end

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": "DateRangePicker",
          "label": "Sprint",
          "name": "sprint",
          "start": "2026-10-07",
          "end": "2026-10-21"
        }
      ]
    }
  }
]

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

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

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

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

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

View exponential-ui-date-range-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 (`{start, end}`).
`start`bind	`date`	–	The first day as yyyy-mm-dd, or empty.
`end`bind	`date`	–	The last 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: as DatePicker; the second choice ends the range

Keys	Action
–	As DatePicker; the first Enter sets the start, the second the end

Theming

Recipe parts: DateRangePicker/rootDateRangePicker/labelDateRangePicker/triggerDateRangePicker/calendarDateRangePicker/dayDateRangePicker/range
Keyed by: :hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme