...
Clicking on the clock Icon Button will open the picker drop-down.
Clicking the hours or minutes will change them into a Text Field, where the user can directly type the required value. When the input field loses focus, the time will be updated in the top input field accordingly.
Clicking outside the picker drop-down or hitting Enter will close it with updated input.
Clicking on the up and down arrows will increase or decrease the hours or minutes accordingly.
Alternatively, the user can use the mouse wheel to increase or decrease the values, as long as the corresponding control is in focusselected.The iteration is cyclical:
When the hours are set to 12 (in 12 hour time format) and the up arrow is clicked, the value loops back to 1.
When the hours are set to 23 (in 24 hour time format) and the up arrow is clicked, the value loops back to 0.
When the minutes are set to 00 and the down arrow is clicked, the value changes to 59.
Clicking the AM/PM icon toggles between the 2 options.
Changing values in the drop-down will also update the values in the top input field accordingly.
...