Keyboard Use of Datepicker Control


This article explains how to use the TeamDynamix Client Portal datepicker control with a keyboard.

Client Portal Datepicker Control

The datepicker control can be reached by standard keyboard navigation methods. When navigating by tabbing there may be a help block immediately before the datepicker control. By default, the help text will outline the purpose of the date being selected. The help text will vary as it is specific to the input field. Following the help text, screen reader users will be informed of the required format for the datepicker. The required format is MM/DD/YYYY.

 TeamDynamix datepicker with calendar control revealed

When the datepicker receives focus, the calendar portion of the control will appear. Using the calendar portion of the control is optional but can be done with the keyboard alone. To use the calendar control hold Ctrl and use the arrow keys to navigate through the calendar. The starting point will be today's date. Pressing the Enter key will submit the currently selected date. When doing this each of the following keys will have a specific response:

  • Ctrl + Left Arrow moves back one day
  • Ctrl + Up Arrow moves back one week
  • Ctrl + Right Arrow moves forward one day
  • Ctrl + Down Arrow moves forward one week

Note: Screen readers may override the functionality outlined above. Using the calendar portion of the datepicker control is not the easiest method for users of assistive technology. Screen reader users are advised that the datepicker will be satisfied with a typed date in the MM/DD/YYYY format. The user can then navigate using standard methods to move onto the next form field or to submit the form.

TeamDynamix Datetimepicker Control

Some datepickers also allow a time entry, and these controls are referred to as datetimepicker controls. Just as is the case with a datepicker control, screen reader users will also be informed of the required format for the datetimepicker control. The required format for the datetimepicker control is MM/DD/YYYY HH:MM AM/PM.

TeamDynamix datetimepicker

In addition to the keyboard shortcuts that are supported by the datepicker control, the datetimepicker control also supports the following shortcuts for time selection:

  • Ctrl + [ moves back one hour
  • Ctrl + ] moves forward one hour
  • Ctrl + , moves back one minute
  • Ctrl + . moves forward one minute


Print Article


Article ID: 1983
Wed 11/16/22 3:04 PM
Thu 9/21/23 2:07 PM