Date

WIP: This component is still looking for more testers and some feedback.

A date picker with accessibility baked in.

Features:

  • 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.

Keyboard navigation:

KeyAction
Enter/SpacebarSelect the currently focused date and hide the calendar.
RightMove to next day.
LeftMove to previous day.
DownMove to next week.
UpMove to previous week.
HomeMove to beginning of week.
EndMove to beginning of week.
PageUpMove to previous month.
Shift + PageUpMove to previous year.
PageDownMove to next month.
Shift + PageDownMove to next year.
EscHide the calendar without selecting a date.

NOTE: I would probably recommend using the browser's built in date pickeropen in new window (<input type="date">) because it's simpler, consistent across website, and it's less code. However, it does not support custom styling.

Default Example

v-model

Custom Toggle

Min and Max

Localization