| Table of Contents |
|---|
Description
| Status | ||||
|---|---|---|---|---|
|
Date and time pickers allow picker allows users to select or enter a single or a range of dates and timesdate.
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
...
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
...
Zeplin Link | Thumbnail |
|---|---|
  |
Current appearances in our products
...