WIP: This component is still looking for more testers and some feedback.
A date picker with accessibility baked in.
- Manages ARIA roles, labels, and attributes.
- Manages focus ring and traps focus within calendar.
- Provides keyboard navigation support (see below).
- Supports passing in min and max date props.
|Enter/Spacebar||Select the currently focused date and hide the calendar.|
|Right||Move to next day.|
|Left||Move to previous day.|
|Down||Move to next week.|
|Up||Move to previous week.|
|Home||Move to beginning of week.|
|End||Move to beginning of week.|
|PageUp||Move to previous month.|
|Shift + PageUp||Move to previous year.|
|PageDown||Move to next month.|
|Shift + PageDown||Move to next year.|
|Esc||Hide the calendar without selecting a date.|
NOTE: I would probably recommend using the browser's built in date picker (
<input type="date">) because it's simpler, consistent across website, and it's less code. However, it does not support custom styling.