UNPKG

@progress/kendo-dateinputs-react-wrapper

Version:

Kendo UI DateInputs wrapper for React

57 lines (46 loc) 2.21 kB
--- 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)