Time Pickers
This graphical user interface widget allows the user to select a time from a time range.
A time picker visually displays the time portion of a date in hours and minutes.
Types
Guidelines
Time pickers should be used when showing users past, present, or future times.
Anatomy
- Field label - The label of an input area is often positioned to the left. The label specifies the sort of information needed.
- Time format - A text input field where the user types the hours and minutes of the desired time.
- Time field - Selecting this field brings up a drop-down menu with possible times for the given day. When a time is chosen, the option will be displayed in the text input.
- Icon - clock icon
- Time dropdown - The times available for selection are contained in this dropdown.
Specifications
These specifications should be followed by developers and designers when creating time pickers.
Do
- Use to schedule a time from common increments, such as in 30-minute blocks.
Don't
- Use when it may be appropriate for historical exact times, like time of birth.