Keyboard Interaction

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
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module TimePickerComponent {
        // You can render the TimePicker control using the following code.
        $(function () {
             var timeSample = new ej.TimePicker($("#timepick"), {
        });
    });
    }

    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.