Keyboard Navigation

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

The DateInput supports the following keyboard shortcuts:

Shortcut Description
Up Arrow Increases the portion value of the date that contains the cursor.
Down Arrow Decreases the portion value of the date that contains the cursor.
Left Arrow Moves the cursor one position to the left.
Right Arrow Moves the cursor one position to the right.
Backspace Deletes the portion value of the date that contains the cursor.
class App extends React.Component {
    state = { value: new Date() };

    render() {
        return (
            <div>
               <DateInput
                    value={this.state.value}
                    onChange={this.changeDate}
                />
            </div>
        );
    }

    changeDate = (event) => {
        this.setState({ value: event.value });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article