DatePicker / DateRangePicker

Two components: DatePicker for a single date and DateRangePicker for a start-end range. Both wrap the corresponding React Aria primitives with full keyboard and screen reader support.

Add via CLI

npx @a2ra/cli add date-picker

Single date

Date range

Example JSON

Single date:

{
  "type": "DatePicker",
  "props": {
    "label": "Appointment date",
    "name": "date",
    "minValue": "2025-01-01",
    "maxValue": "2025-12-31"
  }
}

Date range:

{
  "type": "DateRangePicker",
  "props": {
    "label": "Stay dates",
    "startName": "check_in",
    "endName": "check_out",
    "minValue": "2025-06-01"
  }
}

DatePicker props

Prop	Type	Description
`label`	`string`	Visible label
`name`	`string`	Form field name
`value`	`string`	Controlled date (ISO 8601: `YYYY-MM-DD`)
`defaultValue`	`string`	Uncontrolled default
`minValue`	`string`	Earliest selectable date
`maxValue`	`string`	Latest selectable date
`granularity`	`day` default `hour` `minute` `second`	Time granularity shown
`firstDayOfWeek`	`sun` `mon` `tue` `wed` `thu` `fri` `sat`	First day of the week (defaults to locale)
`isOpen`	`boolean`	Controlled calendar open state
`defaultOpen`	`true` `false` default	Opens calendar on mount
`isDisabled`	`true` `false` default	Disables the picker
`isRequired`	`true` `false` default	Marks as required
`isInvalid`	`true` `false` default	Shows error styling
`isReadOnly`	`true` `false` default	Prevents editing
`autoFocus`	`true` `false` default	Focuses on mount
`validationBehavior`	`aria` default `native`	Validation strategy
`description`	`string`	Helper text
`errorMessage`	`string`	Error text when `isInvalid` is true

DateRangePicker additional props

All DatePicker props apply, plus:

Prop	Type	Description
`startName`	`string`	Form field name for the start date
`endName`	`string`	Form field name for the end date
`allowsNonContiguousRanges`	`true` `false` default	Allow ranges with disabled dates in the middle
`value`	`{ start: string, end: string }`	Controlled range (ISO dates)
`defaultValue`	`{ start: string, end: string }`	Uncontrolled default range

Notes

Date values are plain ISO 8601 strings (YYYY-MM-DD). When granularity is "hour" or finer, include a time component.
The calendar popup is keyboard-navigable with arrow keys; Enter selects a date.