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

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

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.

In the Date-Time popup, there are a few keys that perform the general actions. The sections below provide more specific datails.

Tab and Shift + Tab moves the focus in the popup between buttons (such as the Now button, the Set button and the Date and Time switchers) and the time carousels (in the time portion).
Enter activates the focused buttons in the popup and selects a date in the calendar portion.

Right arrow moves focus to the next carousel (time portion selector) in the time popup.
Left arrow moves focus to the previous carousel (time portion selector) in the time popup.
Up arrow selects the previous time in the current carousel (time portion selector) in the time popup.
Down arrow selects the next time in the current carousel (time portion selector) in the time popup.

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.