@progress/kendo-dateinputs-react-wrapper
Version:
Kendo UI DateInputs wrapper for React
77 lines (61 loc) • 3.47 kB
Markdown
---
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)