Description
...
Date and time Time pickers allow users to select a single or a range of dates and timestime.
A date time picker is a combination of:
Input Time input field - In the input field, the user can enter a date directly or select it using the date picker. The system validates the entry and provides the user with feedback.
Picker -The date picker lets users pick a localized date using touch, mouse, or keyboard input. The control also allows users to navigate directly from one month or year to another.
The current day and the selected date are highlighted as follows:
...
Usage & Behavior
General guidelines
A time picker can have a preceding label, or not (see example below).
The label should be clear and short (limited to a single line).
...
States
Add warning
...
Interaction
Open the calendar with one click on the picker field.
...
time directly.
Time picker button - clicking the picker opens the time picker dropdown.
Usage & Behavior
General guidelines
States
Add warning
...
Interaction
The time picker can have an initial value which the user can overwrite at any time.
Open the picker dropdown with one click on the picker button.
Close the picker dropdown either by choosing a time(clicking on it), or clicking outside the frame.Clicking the left and right arrows on the calendar moves between the months, respectively.
The current day is colored blue and the selected date are highlighted with a grey background and a blue border:
...
Clicking the down arrow will open another window which will allow the user to choose a specific month or year:
...
selected time will be marked with a blue V sign to the left of the selcted value, as shown below:
...
Validation and Errors
Please refer to Field validation page for more information.
...
A time field with an error will have a red border and an error icon, as displayed below:
...
Best practices
...
Calendar pickers should be used for events close to the present time. For users who choose dates far in advance because they require too much navigation to get to the desired input; for these users, it would be faster to simply type the year.
...
Calendar pickers are especially useful for selecting a date range.
...
Use a time picker when:
You want the user to select 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.
You want the user to select a detailed duration, such as 1 minute and 30 seconds.
Design
Zeplin Link | Thumbnail |
|---|---|
 |
...