| Table of Contents |
|---|
Description
...
| Table of Contents |
|---|
Description
| Status | ||||
|---|---|---|---|---|
|
Date picker allows users to select or enter a single date at a required format.
...
Input
The date picker can have an initial value that the user can overwrite at any time.
Open the calendar with one click on the picker button.
Calendar
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.
...
Clicking the down arrow near the month and year header will open another popover which allows 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.
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.
Provide a help text that gives the user an idea of the required date format is a way of preventing input errors.
Do not prevent the user from inserting other separators than slashes (dots, for example). Replace those to slashes when the user finishes entering the date.
Design
Zeplin Link | Thumbnail |
|---|---|
 |
...