Keyboard Navigation

By default, the keyboard navigation of the TimePicker is enabled.

The TimePicker supports the following keyboard shortcuts:

ShortcutDescription
Alt+Down ArrowOpens the popup and moves the focus to the displayed time selector.
Alt+Up ArrowCloses the popup and moves the focus to the input element.
EscCloses the popup.
TabMoves focus to the next time section in the popup.
EnterAccepts the current value change.
class App extends React.Component {
    value = new Date(2000, 2, 10);
    picker;

    componentDidMount() {
        this.picker.dateInput.element.focus();
    }
    render() {
        return(
            <div className="example-wrapper">
                <TimePicker
                    ref={(picker) => { this.picker = picker }}
                    defaultValue={this.value}
                />
                <p>(use Alt+<code></code> to open the time list, Tab to move to the next time section in the popup, <code></code> to increment and <code></code> to decrement the value)</p>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Navigation Scenarios

When the input of the TimePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the DateInput.

When the popup of the TimePicker is opened, the hours become focused and the following shortcuts become available:

ShortcutDescription
Up ArrowIncrements the value of the focused time section.
Down ArrowDecrements the value of the focused time section.
TabMoves the focus to the next time section in the popup.
Shift+TabMoves the focus backwards.
EnterAccepts the current value change.
 /