New to Telerik UI for Blazor? Download Free 30-day trial

DatePicker - Keyboard Navigation

  • Keyboard-navigation.razor
Loading the demo source code...please wait.

Focus

  • Alt + W focuses the first component in the example

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

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.
Reload