Keyboard Navigation

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

The DateInput supports the following keyboard shortcuts:

ShortcutDescription
Up ArrowIncreases the portion value of the date that contains the cursor.
Down ArrowDecreases the portion value of the date that contains the cursor.
Left ArrowMoves the cursor one position to the left.
Right ArrowMoves the cursor one position to the right.
BackspaceDeletes 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
 /