Keyboard Navigation (igDatePicker)

Topic overview

This topic explains how to use keyboard navigation so that end-users can easily and quickly navigate through inputs and interact with them.

This topic contains the following sections:

You can use the standard key combinations for functionalists such as copy, cut, paste, undo and redo and these further ones.

Press	To
`Right Arrow`	Move the caret one char to the right
`Left Arrow`	Move the caret one char to the left
`Ctrl` + `Right Arrow`	Move the caret one part of date to the right
`Ctrl` + `Left Arrow`	Move the caret one part of date to the left
`Ctrl` + `Home` or just `Home`	Move the caret to the start of the input
`Ctrl` + `End` or just `End`	Move the caret to the end of the input
`Backspace`	Delete the previous char
`Delete`	Delete the following char
`Ctrl` + `Backspace`	Delete the previous part of date
`Ctrl` + `Delete`	Delete the following chunk
`Delete` or `Backspace`	Delete the following part of date
`Up Arrow`	Increment the current part of date in the input
`Down Arrow`	Decrement the current part of date in the input

In this section you can see the key combinations that can be used to focus the editor and select part of its value or the whole one.

Press	To
`Tab` or `Shift` + `Tab`	Focus the editor
`Shift` + `Tab`	Focus the previous component
`Tab`	Focus the following component
`Shift` + `Right Arrow`	Select to current part of date end or select the following one
`Shift` + `Left Arrow`	Select to current part of date start or select the previous one
`Ctrl` + `Shift` + `Right Arrow`	Select to current chunk end or select one chunk to the right
`Ctrl` + `Shift` + `Left Arrow`	Select to current chunk start or select one chunk to the left
`Ctrl` + `Shift` + `Home` or `Shift` + `Home`	Select value in the input till start
`Ctrl` + `Shift` + `End` or `Shift` + `End`	Select value in the input till end
`Ctrl` + `A`	Select the whole value in the input

Press	To
`Alt` + `Down Arrow`	Open the dropdown, when the focus is in the input
`Alt` + `Up Arrow`	Close the dropdown, when the focus is in the input
`Down Arrow`	Spin down the current part of date depending on the position of the mouse indicator
`Up Arrow`	Spin up the current part of date depending on the position of the mouse indicator
`Ctrl` + `Right Arrow`	Move to the next item in the calendar for the current part of date.
`Ctrl` + `Left Arrow`	Move to the previous item in the calendar for the current part of date.
`Ctrl` + `Down Arrow`	Move from month to date, when the focus is in the month OR move to the below row of dates, if the focus is on a date.
`Ctrl` + `Up Arrow`	Move from date to month, when the focus is on the date at the top row of the calendar OR to move to the above row, when the focus is on date in a row different than the top one of the calendar.
`Enter`	Confirm focused item as selected
`Enter` or `Alt` + `Up Arrow`	Reject focused item and keep old selection

View on GitHub