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

DatePicker - Keyboard Navigation

Selected Date

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

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

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.

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.