Description
ONGOING
Date and time pickers allow users to select a single or a range of dates and times.
A date picker is a combination of:
Input - 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 date picker can have a preceding label, or not (see example below).
The label should be clear and short (limited to a single line).
Internal Logic
When From/To (Start/End) pickers ares used to select a start date and an end date and the end date is not limited, use "Never", as shown below:
States
Add warning
Interaction
Open the calendar with one click on the picker field.
Close the calendar either by choosing a date (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:
Validation and Errors
Please refer to Field validation page for more information.
A date field with a warning will have an orange border and a warning icon, as displayed below:
A date 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.
Typing the date is the most basic option for date input, yet in many cases it is the most efficient one, especially when the date is further away in the past (e.g., birthdate) or future. We recommend that you allow users to type the date even if other input methods are available
Design
Zeplin Link | Thumbnail |
|---|---|
 |
Current appearances in our products
WFM Calendar:
Calendar Group Adherence:
