---
title: Keyboard Navigation
page_title: Keyboard Navigation - DatePicker - Kendo UI Wrappers for React
description: "Use the Kendo UI DatePicker wrapper keyboard navigation in React projects."
slug: keyboard_navigation_datepicker
position: 3
---

# Keyboard Navigation

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

When the popup of the DatePicker is closed, it supports the following keyboard shortcuts:

| Shortcut                            | Description         |
|:---                                 |:---                 |
| `Alt` & `Down Arrow`                | Opens the popup.    |
| `Alt` & `Up Arrow`                  | Closes the popup.   |
| `Esc`                               | Closes the popup.   |
| `Enter`                             | Triggers `change` event. |

When the popup of the DatePicker is in the `date` view and its popup is opened, the DatePicker supports the following keyboard shortcuts:

| Shortcut                            | Description         |
|:---                                 |:---                 |
| `Left Arrow`                        | Highlights the previous day.                            |
| `Right Arrow`                       | Highlights the next day.                                |
| `Up Arrow`                          | Highlights the same day from the previous week.         |
| `Down Arrow`                        | Highlights the same day from the next week.             |
| `Ctrl` & `Left Arrow`               | Navigates to the previous month.                        |
| `Ctrl` & `Right Arrow`              | Navigates to the next month.                            |
| `Ctrl` & `Up Arrow`                 | Navigates to the previous view.                         |
| `Ctrl` & `Down Arrow`               | Navigates to the next view.                             |
| `Home`                              | Highlights the first day of the month.                  |
| `End`                               | Highlights the last day of the month.                   |
| `Enter` or `Space`                  | If the DatePicker is in the `month` view, selects the highlighted day. In other views, navigates to the lower view. |

{% meta height:380 %}
```jsx-preview

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

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

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

## Navigation Scenarios

When the popup of the DatePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [Calendar]({% slug keyboard_navigation_calendar %}).

When the input of the DatePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [DateInput]({% slug keyboard_navigation_dateinput %}).

## Suggested Links

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