Keyboard Navigation

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

The DateTimePicker supports the following keyboard shortcuts:

ShortcutDescription
Alt+Down ArrowOpens the popup and moves the focus to the displayed date-time selector.
Alt+Up ArrowCloses the popup and moves the focus to the input element.
EscCloses the popup and moves the focus to the input element.
Alt+Right ArrowMove the focus to the time part of the date-time selector.
Alt+Left ArrowMove the focus to the date part of the date-time selector.
class App extends React.Component {
    value = new Date(2000, 2, 10);
    picker;

    componentDidMount() {
        this.picker.dateInput.element.focus();
    }
    render() {
        return(
            <div className="example-wrapper">
                <DateTimePicker
                    ref={(picker) => { this.picker = picker }}
                    defaultValue={this.value}
                />
                <p>(use Alt+<code></code> to open the calendar, <code></code> and <code></code> to navigate, <code></code> to increment and <code></code> to decrement the value)</p>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Navigation Scenarios

When the popup of the DateTimePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the Calendar or the time part.

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

 /