Versions Compared

Version Old Version 47 New Version Current
Changes made by

Hasitha Jayarathne

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

States

State

Visual

 

Regular

Image RemovedTime Picker - Regular.pngImage Added

 

Hover

Image RemovedTime Picker - Hover.pngImage Added

 

Active

Image Removed		Image RemovedTime Picker - Active AM.pngImage AddedTime Picker - Active minutes and seconds only.pngImage AddedImage RemovedTime Picker - Active PM.pngImage Added

Image RemovedTime Picker - Active with seconds.pngImage Added

Disabled

Image RemovedTime Picker - Disabled.pngImage Added

 

Read-Only

Time Picker.pngImage RemovedTime Picker - Read only.pngImage Added

Error

Image RemovedTime Picker - Error.pngImage Added

 

Warning

Image RemovedTime Picker - Warning.pngImage Added

 

Focused

Image RemovedTime Picker - Focused.pngImage AddedImage RemovedTime Picker - Focused minutes.pngImage AddedImage RemovedTime Picker - Focused seconds.pngImage AddedImage RemovedTime picker - Focused AMPM.pngImage Added

Focused, Hover

Image RemovedTime Picker - Focused Hover.pngImage Added

 

Focused, Active

Image RemovedTime Picker - Focused Active.pngImage Added

 

Focused, Disabled

Image RemovedTime Picker - Focused, Disabled.pngImage 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.

...

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

  • When clicking the text, the relevant input section will be highlighted (HH, MM, or AM/PM.).
    For example:

    Image Removed

    Time Picker - Active collapsed.pngImage 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 auto-corrects to 03:08 PM.

...

Keyboard

Time picker field

Time picker menu

Image RemovedTime Picker - Focused.pngImage AddedImage RemovedTime Picker - Focused minutes.pngImage 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

...

Zeplin Link

Thumbnail

https://zpl.io/adOXdRV

Image RemovedTime picker states.pngImage Added

Code

...