Keyboard Interaction

19 Apr 20174 minutes 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.

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

List of keyboard shortcuts, When popup is open

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.

In the HTML page, add a <input> element to configure TimePicker widget and enable keyboard interaction by setting the access key property.

HTML

<input type="text" id="time" accesskey="j"/>

JAVASCRIPT

// You can render the TimePicker control using the following code.
    $(function () {
        $('#time').ejTimePicker();
    });

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.