@progress/kendo-dateinputs-react-wrapper/docs/dateinput/keyboard-navigation.md

Kendo UI DateInputs wrapper for React

---
title: Keyboard Navigation
page_title: Keyboard Navigation - DateInput - Kendo UI Wrappers for React
description: "Use the Kendo UI DateInput wrapper keyboard navigation in React projects."
slug: keyboard_navigation_dateinput
position: 2
---

# 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.                       |
| `Space`                             | Highlights the same part from the next day.                       |
| `Delete` or `Backspace`             | Clears the current date part.                                     |
| Mouse wheel rotated up              | Increases the portion value of the date that contains the cursor. |
| Mouse wheel rotated down            | Decreases the portion value of the date that contains the cursor. |

```jsx-preview

    class LayoutsContainer extends React.Component {
      constructor(props) {
        super(props);
        this.date = props.date
      }

      render() {
        return (
        <div class="example-wrapper">
            <p>Enter a date:</p>
            <DateInput
               value = {this.date}
            />
            <p>(use ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer date = {new Date()} />,
      document.querySelector('my-app')
    );
```

## Suggested Links

* [Kendo UI DateInput for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/dateinput/overview)
* [API Reference of the DateInput Widget](http://docs.telerik.com/kendo-ui/api/javascript/ui/dateinput)