Description

...

Usage & Behavior

General guidelines

• Note: the user time format (24 hours or 12 hours with AM/PM indicator) can be set on the preferences window.

Structure

A time picker is a combination of:

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

• Hours/Miutes input fields - the labels holding the hours/minutes becomes an input field when the user selects the hours/minutes in the menu in order to change them.

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

...

• 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 on the picker button.

  • Close the picker dropdown by clicking outside the frame.

  • Allow the user the insert dates in loose formats

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

• Menu

  • 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.values in the popover, updates the input respectively.

  • Clicking the hours/minutes changes the label into an input field in which the user can type the required value. When the input looses focus, the input field showing the time, is updated accordingly.

    Image Added

Validation and Errors

Please refer to Field validation page for more information.

...

• 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

...