Date Range Picker Keyboard Navigation

  • Example
  • View Source
  • Change Theme
    Default Theme

Focus

To focus the first component in the example, press Alt + W

Supported keys and user actions

When the input is focused, there are actions available in addition to the standard DateInput actions.

When the calendar popup is opened, it behaves like a calendar (for example, Enter selects a date).

Date Input

  • Alt + Down arrow opens the popup with the calendar.
  • Alt + Up arrow or Esc closes the popup with the calendar.
  • Enter moves the focus from the Start input to the End input. If the focus is in the End input, confirms the range selection and closes the calendar.
  • Tab moves the focus between the elements of the picker - first through the inputs, then focuses the calendar.
  • Up arrow increases the value of the date portion that contains the cursor.
  • Down arrow decreases the value of the date portion that contains the cursor.
  • 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.
Loading the demo source code...please wait.