Skip to end of banner
Go to start of banner

Time Picker

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 40 Next »

Description

Time pickers allow the user to either enter a time manually or set hours and minutes using up 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

  • The user’s time format (24 hours or 12 hours) can be set by the user (in the preferences of the local application).

Structure

Time pickers consist of:

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

  • Time picker button. A clock Icon Button which opens the time 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 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.

Default

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

States

State

Visual

Regular

Hover

Active

Disabled

Error

Warning

Focused

Focused, Hover

Focused, Active

Focused, Disabled

Interaction

The time can be set either via direct input or by using the controls in the time picker drop-down.

Direct input

  • Allow the user to enter times in loose formats, which should be automatically corrected when the field is out of 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.

  • If the drop-down is opened, hitting Enter will close it.

Using the controls

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

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

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 when:

  • You want the user to select 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.

Don’t use:

  • For any input other than time.

Accessibility Compliance

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

Design

Zeplin Link

Thumbnail

https://zpl.io/adOXdRV

Code



  • No labels