@progress/kendo-dateinputs-react-wrapper
Version:
Kendo UI DateInputs wrapper for React
65 lines (49 loc) • 2.27 kB
Markdown
title: Keyboard Navigation
page_title: Keyboard Navigation - TimePicker - Kendo UI Wrappers for React
description: "Use the Kendo UI TimePicker wrapper keyboard navigation in React projects."
slug: keyboard_navigation_timepicker
position: 3
# Keyboard Navigation
By default, the keyboard navigation of the TimePicker is enabled.
When the popup of the TimePicker 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 the `change` event. |
When the popup of the TimePicker is in the `date` view and its popup is opened, the TimePicker supports the following keyboard shortcuts:
| Shortcut | Description |
|:--- |:--- |
| `Up Arrow` | Selects the previous available time portion. |
| `Down Arrow` | Selects the next available time portion. |
```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>
<TimePicker
value={this.date}
/>
<p>(use Alt+↓ to open the popup, ↑ to increment and ↓ to decrement the value)</p>
</div>
);
}
}
ReactDOM.render(
<LayoutsContainer date = {new Date()} />,
document.querySelector('my-app')
);
```
## Navigation Scenarios
When the input of the TimePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [DateInput]({% slug keyboard_navigation_dateinput %}).
## Suggested Links
* [Kendo UI TimePicker for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)
* [API Reference of the TimePicker Widget](http://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)