Keyboard Interaction
13 Sep 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.
<div align="center">
<input type="text" id="time" accesskey="j" ej-timepicker/>
</div>import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html'
})
export class DefaultComponent {
}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.
