# Keyboard Navigation

## Managing the Focus

The initial focus is on the selected date.

Focus is trapped in the picker's popup. Meaning that once the popup is opened, Tab key will go only through its content.

## Keyboard Shortcuts

### Actions applied to the DateInput

The DateInput part of the component implements the specification for the DateInput component:

[DateInput  specification](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/keyboard-navigation)

In addition to that it also features the following shortcuts:

| Shortcut              | Behavior                                                                                                  |
| --------------------- | --------------------------------------------------------------------------------------------------------- |
| `Esc`                 | Discards the selection and closes the popup.                                                              |
| `Enter`               | Enters in time edit if calendar is the target. Otherwise, accepts the selected time and closes the popup. |
| `Alt/Opt(Mac) + Down` | Opens the dropdown and moves the focus to the displayed calendar.                                         |
| `Alt/Opt(Mac) + Up`   | Closes the dropdown and moves the focus to the input element.                                             |

### Actions applied to the calendar part of the Popup

Calendar navigation is handled following the Calendar component specification:

[Calendar  specification](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/keyboard-navigation)

### Actions applied to the time part of the Popup

TimePicker navigation is handled following the TimePicker component specification:

[TimePicker  specification](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/keyboard-navigation)

## Resources

[ARIA Authoring Practices: Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/datetimepicker/keyboard/func/source.txt)

## Navigation Scenarios

When the popup of the DateTimePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/keyboard-navigation) or the `time` part.

When the input of the DateTimePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [DateInput](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/keyboard-navigation).

## See Also

* [Learn about KendoReact Free.](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)
* [API Reference of the DateTimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepicker)
* [Accessibility](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/accessibility/wai-aria-support)
* [Accessibility in KendoReact](https://www.telerik.com/kendo-react-ui/components/accessibility)
* [Accessibility Compliance and Keyboard Support in KendoReact](https://www.telerik.com/kendo-react-ui/components/accessibility/accessibility-compliance)
* [React Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs)