Description

...

• Time input field - In the input field, the user can enter a time directly.

• Time picker button - clicking the picker opens the time picker dropdown.

• UP/Down arrows - Clicking those arrows increases/decreases the hours/minutes accordingly.

• AM/PM label - Clicking this toggles between AM/PM.

States

Add warning

...

Interaction

• Input

  • The time picker can have an initial value that the user can overwrite at any time.

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

  • Close the picker dropdown by clicking outside the frame.

• Popover

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

...

• 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 time and a second one to set the end time.

questions (http://mytechtipdemo.appspot.com/timepicker/):

• do we only suggest 12 hour format (meridian selection)? or also 24 hour (removing AM/PM)?

• should we add an option to cancel?

Design

Current appearances in our products

...