Keyboard Interaction in ASP.NET MVC TimePicker

7 Jul 20221 minute to read

You can use Keyboard shortcut keys as an alternative to the mouse on using TimePicker widget. TimePicker widget allows you to perform all kinds of actions using keyboard shortcuts. For enabling the keyboard navigation, we need to set the access key to TimePicker control by using HtmlAttributes property. The HtmlAttributes receives the IDictionary object. The IDictionary represents a generic collection of key/value pairs.

The various keyboard shortcuts available within the TimePicker widget are discussed in the following table.

List of keyboard shortcuts

Shortcut Key	Description
Access key  + j	Focuses into Timepicker widget
Alt + Down	Opens/Hides the popup
Right/Left	Moves to adjacent part
Up	Increments the value
Down	Decrements the value

When popup is open

List of keyboard shortcuts

Shortcut Key	Description
Up	Selects the previous time
Down	Selects the next time.
Home/End	Moves to the first / last item
Esc	Closes the popup

Configure Keyboard Interaction

The following steps explains you on how to enable keyboard interaction for the TimePicker widget with access key as “j”. We can set the any other key as access key in TimePicker control.

1. Add the following code to the corresponding view page to render the TimePicker.

    @*Add the following code example to the corresponding CSHTML page to render TimePicker widget*@
   
    @{IDictionary<string, object> parameters = new Dictionary<string, object>();
   
        parameters.Add("accesskey", "j");
   
    }
   
    @Html.EJ().TimePicker("time").HtmlAttributes(parameters)

2. Run the code sample, press Access key + J to focus in the TimePicker widget that enables it and you can navigate using arrow keys and Esc key to close the popup.

TimePicker focused with keyboard shortcut