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