Keyboard Interaction

12 Jun 20231 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.

    /*ej-Tag Helper code to render 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");

 }

  <ej-time-picker id="time" html-attributes="parameters"></ej-time-picker>
  • CSHTML
    • /*Razor code to render TimePicker*/

	@{Html.EJ().TimePicker("time").HtmlAttributes(parameters).Render(); }

    NOTE

    To render the TimePicker Control you can use either Razor or Tag helper code as given in the above code snippet.

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