Element: <oj-c-input-date-picker>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12197-01

DOM Interface: CInputDatePickerElement

Touch Information

Target Gesture Action
Input field (Not a Segment) Tap Sets focus to first segment. Show user assistance text.
Input field segment Tap Sets focus to segment. Show user assistance text.
Input field segment Double Tap If the date is complete, selects the entire date. Hitting backspace clears it.
Calendar icon (When the date picker is not open) Tap Opens the Date Picker and moves the focus to the first focusable element in the DatePicker.
Calendar icon (When the date picker is open) Tap Closes the Date Picker.

Keyboard Information

Target Key Action
Input field Tab In Sets focus to first segment. Show user assistance text.
Input field Ctrl + A or Command + A If the date is complete, selects the entire date. Double clicking on the field also selects the date.
Input field with date selected Backspace/Delete Backspace or delete key clears the date. The mask placeholders will be shown again and focus will be on the first segment.
Input field segment Backspace/Delete Clears the date segment. Focus remains on the date segment.
Input field segment RightArrow Moves focus to the segment on the right. If focus is on the rightmost segment, the focus does not move.
Input field segment LeftArrow Moves focus to the segment on the left. If focus is on the leftmost segment, the focus does not move.
Input field segment UpArrow/DownArrow Increments or decrements the number by one in the segment. If there is no number in the segment, it initializes it to the current date.
Input field segment End Increments the segment to the maximum number for the segment. For example, if on the month segment, this will set the number to 12. If on the year segment, this will set the number to 2100.
Input field segment Home Decrements the segment to the minimum number for the segment. For example, if on the month segment, this will set the number to 1. If on the year segment, this will set the number to 1900.
Input field segment Page Up/Page Down Increments or decrements the number by two in the month segment, by seven in the day segment, or by five in the year segment. If there is no number in the segment, it initializes it to the current date.
Date Picker Esc Closes the date picker.
Date Picker Tab Moves the focus to next element in the date picker sequence. Only one element in the calendar grid is in the Tab sequence (current day/month/year or selected day/month/year depending on scenario). If focus is on the last tabbable element inside the date picker, moves focus to the first tabbable element inside the date picker.
Date Picker Shift + Tab Moves the focus to the previous tabbable element inside the date picker. If focus is on the first tabbable element inside the date picker, moves focus to the last tabbable element inside the date picker.
Date Picker Enter/Space Selects the currently focused day or activates the button currently focused.
Calendar Grid PageUp Changes the calendar grid to the previous month. Moves focus to the closest day in the previous month.
Calendar Grid PageDown Changes the calendar grid to the next month. Moves focus to the closest day in the next month.
Calendar Grid Shift + PageUp Changes the calendar grid to the previous year. Moves focus to the closest day of the same month in the previous year.
Calendar Grid Shift + PageDown Changes the calendar grid to the next year. Moves focus to the closest day of the same month in the next year.
Calendar Grid Ctrl + Alt + T or Ctrl + Option + T Changes the calendar grid to the year and month that contains today's date. Moves focus to Today.
Calendar Grid Home Go to the first day of the current month.
Calendar Grid End Go to the last day of the current month.
Calendar Grid ArrowLeft Moves focus to the previous day. In RTL, this will move focus to the next day.
Calendar Grid ArrowRight Moves focus to the next day. In RTL, this will move focus to the previous day.
Calendar Grid ArrowUp Moves focus to the same day of the previous week.
Calendar Grid ArrowDown Moves focus to the same day of the next week.
Months Grid Enter/Space Selects the currently focused month and returns to the date picker, refreshing the display to show the selected month.
Months Grid UpArrow Moves focus to four months back from the current focused month.
Months Grid DownArrow Moves focus to four months ahead from the current focused month.
Months Grid RightArrow Moves focus to the next month. In RTL, this will move focus to the previous month.
Months Grid LeftArrow Moves focus to the previous month. In RTL, this will move focus to the next month.
Years Grid Enter/Space Selects the currently focused year and returns to the date picker, refreshing the display to show the selected month.
Years Grid PageUp Changes the year grid to the previous decade. The focus remains in the same location with respect to the current decade.
Years Grid PageDown Changes the year grid to the next decade. The focus remains in the same location with respect to the current decade.
Years Grid UpArrow Moves focus to four years back from the current focused year. If that year is not in the year grid, go back 1 decade.
Years Grid DownArrow Moves focus to four years ahead from the current focused year. If that year is not in the year grid, go ahead 1 decade.
Years Grid RightArrow Moves focus to the next year. In RTL, this will move focus to the previous year.
Years Grid LeftArrow Moves focus to the previous year. In RTL, this will move focus to the next year.