Give us feedback
Reactive icon

A11y Date Picker

version 0.0.2 (Compatible with OutSystems 11)
Uploaded on 4 Mar by 
 (0 ratings)

A11y Date Picker

Accessible date picker component
Read more

Expected behavior:

An associated triggering input should activate the datepicker for touch support, focus should move into the datepicker when selecting a date using the keyboard, the arrow keys should move between calendar cells and the calendar should scroll automatically between months, PageUp/PageDown should switch between months, Alt+PageUp/PageDown should switch between years, Enter should activate the selected date, and pressing Escape or Tab should close the calendar and return focus to the triggering element.

All required ARIA attributes and focus handling are configured, in accordance with the ARIA specification.


  • When the calendar is opened, focus is set on the current date.
  • Press the Left and Right arrow keys to navigate the row by week day.
  • Press the Home and End keys to jump to the beginning or end of the current row.
  • Press the Up and Down arrow keys to navigate between weeks on the same week day.
  • Press the PageDown and PageUp keys to navigate backwards or forwards by month.
  • Press Alt+PageDown and Alt+PageUp to navigate backwards or forwards by year.
  • Press the Enter key to activate the selected date.
  • Press Escape to close the calendar without making a selection.
  • Mouse users can click the desired date buttons as usual.
Release notes (0.0.2)
  • Added SetDateState action to enable/disable dates
  • Updated demo
License (0.0.2)
Reviews (0)