About the Date Picker Widget

How to use the Datepicker widget:

The datepicker can be implemented as an inline datepicker or as a popup datepicker.

Inline datepickers have a separate tab stop for each control, and a single tab stop for the date grid itself. The grid can be navigated using the following shortcuts:

  • Arrow Keys: Move up, down, left or right in the grid. If the beginning or end of the month is reached, the grid will automatically change to the next or previous motnh
  • Enter Key: Select the currently focused day
  • Home: Move focus to first day of the month
  • End: Move focus to last day of the month
  • Page Up: Switch to previous month
  • Page Down: Switch to next month
  • Alt + Page Up: Switch to previous year
  • Alt + Page Down: Switch to next year

Popup date pickers have the same shortcuts as inline datepickers, plus the following shotcuts:

  • Down or Up Arrow key (when text field has focus): Move focus into the expanded date grid
  • Escape key (when text field has focus): Collapse the expanded date grid
  • Enter (when date grid has focus): Select currently focused date, collapse the date grid and move focus back to the text field
  • Escape (when date grid has focus): Collapse the date grid without making a selection and move focus back to the text field

Accessibility Changes Made to the Datepicker:

  • ARIA Implementation
  • Keyboard & Focus Handling

Demo: Sample Datepickers

Popup Version:

Inline Version: