Time Picker
Search the component library

Time Picker

v1.0.0

This component defines the standard interactions for the time picker component.

Usage Guidelines

Every instance of time selection should come from this component.

Features

  • Single and double input field interactions (single time vs. start/end times)
  • Manual time entry

Single Time Input

This type of time picker is used for picking a single time (ex. assignment due time).

Default State

The single time picker consists of a specialized input field (including a time icon) and a dropdown component.

By default the dropdown is hidden until the user interacts with the time input field.

In the field label, provide formatting example (hh:mm am/pm).

Focus State (w/o selected time)

Upon focus:

  • A cursor appears within the field
  • The dropdown appears. Note, the size of the input isn’t tied to the width of the dropdown.
  • No time is selected by default

The dropdown closes when:

  • The user makes a selection from the dropdown
  • The user begins to manually type in the field
  • Focus is lost from field or dropdown

If the user closes the dropdown without making a selection, it reverts back to Default State.

Focus State (w/selected time)

Upon focus:

  • The dropdown appears and shows the selected time
  • The text in the field is highlighted

The dropdown closes when:

  • The user makes a selection from the dropdown
  • The user begins to manually type in the field
  • Focus is lost from field or dropdown

Note that for the first and second points, focus remains on the field until the user clicks elsewhere.

Selected Date (no focus)

  • If the user has made a selection and removed focus from the dropdown or field, then the time field shows the numeric time and period.
  • If a field with a previously selected time regains focus, the field and dropdown switch to Focus State (w/ selected time).

Range Input

This type of time picker is to be used for choosing a range with specific start and end times (ex. course beginning and end).

Default State

The default state of the first time input (start) initially behaves the same way as a single time input field.

Default state of double input field time picker (start/end).

Start Time Focus w/o Selection

When the user interacts with the start time input field, it gains focus and the dropdown appears.

Double input field start time focus state

Start Time Focus w/ Selection

End Time Focus w/o Selection

Note that once the user has made a start time selection, focus should automatically switch to the end time and the dropdown for the end time should open. Time selected in the start time and prior will not be in the dropdown.

The time list can be customized to show shorter or longer increments (ex. 50 minutes class sessions).

End Time Focus and Highlight w/ Selection

Reopening the Start Time After Selecting Both Start and End Times

If the user refocuses on the start time after having selected both a start and end time:

  • The time picker appears with the start time selected
  • The time text in the field is highlighted
  • No disabled times are shown

Making a selection will cause focus to automatically shift once again to the end time picker and field.

If the user chooses a new start time before the previously chosen end time, the end time selection will be retained and the user will be automatically moved to the end time input field to confirm their selection.

If the user chooses a new start time after the previously chosen end time, the end time selection will clear and the user will be automatically moved moved to the end time input field to make a new end time selection.

Manual Entry

This section pertains to manual entry of times directly into the input field.

Default State

Focus State (w/o selected time)

Focus State with Manual Entry

  • The time picker closes
  • User can enter any characters
  • Localization could cause time format to change

Manual Entry Completed

User completes manual entry by clicking off the input field, pressing the “Enter/Return” key, or pressing the “Tab” key.

Error Messages

Default State

Error text below the field.

Reopening the date picker

  • Dropdown list appears below the error text.
  • The text in the field is highlighted.
  • No time is selected in the dropdown list.

Redlines

Input type
  • Basic with icon
  • Minimum 150px width
Dropdown type
  • Select option
  • Minimum 220px width
Icon
  • clock-18
  • Medium Gray
  • Padding-left 14px
  • Padding-right 14px

Changelog

1.0.0

Initial version