| Table of Contents |
|---|
...
Calendar
The current day and the selected date are highlighted as follows:
Disabled dates - The calendar may contain dates which the user cannot select. Those dates will be disabled.
A month may start/end at the beginning/end of the week but not necessarily. This means that slots from previous or next months will be shown using a different color.
State | Visual | |
|---|---|---|
General (x2) |  | |
Regular (x2) |  | |
Hover (x2) |  | |
Active (x2) |  | |
Selected (x2) |  | |
Disabled (x2) |  | |
Today (x2) |  |
...
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.
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
Provide a help text that gives the user an idea of the required date format is a way of preventing input errors.
Use a loose format - If the user enters a different date format in the input field (for example - “12.03.20“) the system will switch to the standard format when the field loses focus.
...