Versions Compared

Version Old Version 48 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

Time Picker - Error.png

 

Warning

Time Picker - Warning.png

 

Focused

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

Focused, Hover

Time Picker.pngImage RemovedTime Picker - Focused Hover.pngImage Added

 

Focused, Active

Time Picker - Focused, Active.pngImage 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.

...

Keyboard

Time picker field

Time picker menu

Time Picker - Focused.pngImage 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

...