...

...

The time picker can have an initial value, which the user can edit at any time.
When clicking the text, the relevant input section will be highlighted (HH, MM, or AM/PM.).
For example:
Image Removed
Image Added
- When HH or MM are highlighted, only numerical value inputs will be permitted.
When AM/PM is clicked on, it will toggle between the two options.
Once an input section has been filled, the highlight will move to the next section.
On Apply, the time picker field will lose focus (nothing is highlighted).
The user should be allowed to enter times in loose formats, where possible. These should be automatically corrected when the field loses focus. For example:
- 5 should be auto-corrected to 05.
- when the time format is set to 12 hours, 15:08 auto-corrects to 03:08 PM.

...

Keyboard	Time picker field	Time picker menu
	Image RemovedImage Added
Tab	Navigates to the next input section. When on the last input section, navigates to the next component.	Navigates between the different sections in a cyclical order: Hours. Minutes. AM/PM.
Shift + Tab	Navigates to the previous input section. When on the first input section, navigates to the previous component.	Reverses the order of navigation described for Tab.
Space	Opens the time picker menu.	Hours - N/A Minutes - N/A AM/PM - toggles between the values.
Enter	Applies the time.	Applies the time. Closes the menu.
Esc	N/A	Closes the menu and returns the focus to the field, without applying any changes.
Arrows	Up - Increases the highlighted value. Down - Decreases the highlighted value. Holding down the up/down keys will scroll continuously. Right/Left - Moves the input highlight accordingly.	Up - Increases the highlighted value for the focused section. Down - Decreases the highlighted value for the focused section. Holding down the up/down keys will scroll continuously. Right/Left - Moves the focused section accordingly. Up/Down changes between AM/PM

...

Zeplin Link	Thumbnail
https://zpl.io/adOXdRV	Image RemovedImage Added

Code

...

Content Comparison