DatePicker - Keyboard Navigation

Focus

• Alt + W focuses the first component in the example

Supported keys and user actions

Date Input

• Alt + Down arrow opens the popup with the calendar.
• Alt + Up arrow or Esc closes the popup with the calendar.

• Up arrow increases the value of the date portion that contains the cursor. Takes the corresponding Step into account.
• Down arrow decreases the value of the date portion that contains the cursor. Takes the corresponding Step into account.
• Left arrow moves the cursor one position to the left.
• Right arrow moves the cursor one position to the right.

Calendar

• Up arrow moves focus to the upward cell, or navigates the view if the currently focused date is at the top row of the current view period.
• Down arrow moves focus to the downward cell, or navigates the view if the currently focused date is in the last row of the current view period.
• Left arrow moves focus to the previous cell.
• Right arrow moves focus to the next cell.
• Enter toggles the current date selection.
• Ctrl + Up Arrow navigates to the upper view (e.g., from current month days, to the year).
• Ctrl + Down Arrow navigates to the lower view (e.g., from the months in the year to the days of the month).
• Ctrl + Right Arrow navigates to the next period.
• Ctrl + Left Arrow navigates to the previous period.
• Tab moves focus between the different navigation elements - view selection, previous/next buttons, today button, and the grid with dates/months/years. When
• Shift is pressed, goes backwards through these focusable elements, like regular tab order.