Keyboard Navigation

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

The DateRangePicker supports the following keyboard shortcuts:

Shortcut Description
Alt+Down Arrow Opens the popup.
Tab Moves the focus from the start input to the end input, or from the end input to the calendar element.
Esc Closes the popup and moves the focus to the start or to an empty input element.
class App extends React.Component {
    value = new Date(2000, 2, 10);
    picker;

    componentDidMount() {
        if(this.picker.calendar && this.picker.calendar.element){
            this.picker.calendar.element.focus();
        }
    }
    render() {
        return(
            <div className="example-wrapper">
                <div className="example-config">
                    <p>(use Alt+<code>↓</code> to open the calendar, Esc to close the calendar, <code>←</code> and <code>→</code> to navigate, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
                </div>
                <DateRangePicker
                    ref={(picker) => { this.picker = picker }}
                    defaultShow={true}
                    defaultValue={this.value}
                />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Navigation Scenarios

When the popup of the DateRangePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the MultiViewCalendar.

When the inputs of the DateRangePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the DateInput.

In this article