Description

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

...

and down buttons.

Two time pickers can be used, for start and end times, to allow the user to enter a time range.

...

Usage & Behavior

General guidelines

• Note: the user The user’s time format (24 hours or 12 hours with AM/PM indicator) can be set on by the user (in the preferences windowof the local application).

Structure

A time picker is a combination Time pickers consist of:

• Time input field - In the input field, the user can enter a time directly. The time can be directly edited here.

• Time picker button - clicking the picker . A clock Icon Button which opens the time picker dropdown.UP/Down arrows - picker drop-down.

• Time picker drop-down, which consists of:

  • Hours and minutes fields.

  • Up and Down arrows. Clicking those arrows increases

  /

  • or decreases the hours

  /minutes accordinglyAM/PM label -

  • and minutes in increments of 1.

• Hours/Miutes input fields - the labels holding the hours/minutes becomes an input field when the user selects the hours/minutes in the menu in order to change them.

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

  /PM

  • and PM.

Default

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

States

...

State	Visual
Regular

Image Removed

Image Added
Hover

Image Removed

Image Added
Active

Image Removed

Image AddedImage Added	Image Added	Image Added
Disabled

Image Removed

	Image Added
Read-Only	Image Added
Error	Image Added

Image Removed

Warning	Image Added

Image Removed

Focused

Image Removed

	Image Added	Image Added	Image Added	Image Added
Focused, Hover

Image Removed

Image Added
Focused, Active

Image Removed

Image Added
Focused, Disabled

Image Removed

Interaction

Image Added

Interaction

The time can be set either via direct input or by using the controls in the time picker menu. Additional keyboard interactions can be found under the Focus management section below.

Direct input

• The time picker can have an initial value

  that

  , which the user can

  overwrite

  edit at any time.

• Open the picker dropdown with one click on the picker button.

• Close the picker dropdown by clicking outside the frame.

• Allow the user the insert dates in loose formats

• “5:08“ becomes “05:08“

• “508” becomes “05:08”

When the user’s

When clicking the text, the relevant input section will be highlighted (HH, MM, or AM/PM.).
For example:
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” becomes “03

    15:08 auto-corrects to 03:08

    PM“

    PM.

• Menu

  • Click the up/down arrows to move between the hours/minutes accordingly.

  • The iteration is cyclic. For example:

    • hours - when you are set on “12” hours and click to “up” arrow, you start from “1”.

    • minutes - when you are set on “00” and press the “down” arrow you get “59”.

  • Clicking AM/PM label toggles between the 2 options.

  • Changing values in the popover, updates the input respectively.

  • Clicking the hours/minutes changes the label into an input field in which the user can type the required value. When the input looses focus, the input field showing the time, is updated accordingly.

...

Time picker menu

• Clicking on the clock Icon Button or any blank space will open the time picker menu.

• The time picker menu will be closed:

  • when a time is applied, or

  • by clicking outside of the time picker menu.

• The time inputs are cyclical:

  • When the hour is set to 12 (in 12 hour time format), the up arrow loops the value back to 01.

  • When the hour is set to 23 (in 24 hour time format), the up arrow loops the value back to 00.

  • When the minutes are set to 00, the down arrow changes the value to 59.

  • When the minutes are set to 59, the up arrow changes the value to 00.

• For AM/PM, the arrows are not cyclical. Up arrow will change to PM and Down arrow to AM.

• Changing the time in the menu should immediately sync the direct input displayed time

Validation and Errors

Please refer to Field validation page for more information.

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

...

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

...

Best practices

Use a time picker 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 starting start time and a second one to set the end time.

Don’t use:

• For any input other than time.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...

Focus management

Zeplin Link	Thumbnail
https://zpl.io/adOXdRV	Image Removed

New LUX design 

...

...

Keyboard	Time picker field	Time picker menu
	Image Added	Image 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

Design

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

Code

...