Keyboard Navigation

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

The DatePicker supports the following keyboard shortcuts:

ShortcutDescription
Alt+Down ArrowOpens the popup and moves the focus to the displayed calendar.
Alt+Up ArrowCloses the popup and moves the focus to the input element.
EscCloses the popup and moves the focus to the input element.
class App extends React.Component {
    value = new Date(2000, 2, 10);
    picker;

    componentDidMount() {
        this.picker.dateInput.element.focus();
    }
    render() {
        return(
            <div className="example-wrapper">
                <DatePicker
                    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 DatePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the Calendar.

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

 /