Description

A time picker allows Time pickers allow the user to either enter a time manually or set hours and minutes using up and down buttons.

...

• Time input field. The time can be directly edited here.

• Time picker button. An A clock Icon Button which opens the time picker drop-down.

• Time picker drop-down, which consists of:

  • Hours and minutes fields. Can be directly edited when selected.

  • Up and Down arrows. Clicking those arrows increases or decreases the hours and minutes in increments of 1.

  • AM/PM label. Appears when the user’s time format is set to 12 hours. Clicking this toggles between AM and PM.

...

• The time picker can have an initial value, which the user can edit at any time.

• Clicking on the clock icon button will open the picker drop-down.

• Clicking outside the picker drop-down will close it.

• Allow the user to enter dates times in loose formats, which should be automatically corrected when the field loses focus.

  • 5:08 becomes 05:08

  • 508 becomes 05:08

  • When the user’s time format is set to 12 hours, 15:08 becomes 03:08 PM.

...

Time picker drop-down

• Clicking on the clock Icon Button will open the picker drop-down.

• Clicking outside the picker drop-down will close it.

• Clicking on the Up and Down arrows will increase or decrease the hours or minutes accordingly.

• 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 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.

• 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 looses focus, the time will be updated in the top input field accordingly.

...

A time field with an error will have a red border and an error icon, as displayed below:

Best practices

Use when:

• You want the user to select a time or set a time.

• You want the user to select a time range. In this case, one time picker can be used to set the start time and a second one to set the end time.

...