Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

CalendarPicker

A full-featured date picker component with a calendar dropdown, keyboard navigation, and accessibility support.

Usage

Date format: YYYY-MM-DD.

<section is="root-calendar-picker" aria-label="Date of birth">
  <input type="text" aria-label="Date" />
  <span calendar-picker-hint sr-only>Date format: YYYY-MM-DD.</span>
</section>

Attributes

Attribute	Type	Default	Description
`value`	`string` (ISO date)	-	The selected date
`min`	`string` (ISO date)	-	Minimum selectable date
`max`	`string` (ISO date)	-	Maximum selectable date
`locale`	`string`	`navigator.language`	Locale for formatting
`aria-label`	`string`	-	Accessible label

Events

Event	Detail	Description
`root-calendar-picker.date-select`	`{ date }` (ISO string)	Fired when a date is selected
`root-calendar-picker.open`	-	Fired when the dropdown opens
`root-calendar-picker.close`	-	Fired when the dropdown closes

Methods

Method	Description
`open()`	Open the calendar dropdown
`close(returnFocus?)`	Close the dropdown
`toggle()`	Toggle the dropdown

Key	Action
`Arrow keys`	Navigate between days
`Home / End`	First / last day of week
`PageUp / PageDown`	Previous / next month
`Shift + PageUp/Down`	Previous / next year
`Enter / Space`	Select date
`Escape`	Close dropdown

Extends

HTMLElement - use with <section is="root-calendar-picker">.