| Table of Contents |
|---|
...
The current day and the selected date are highlighted.
The calendar may contain dates which the user cannot select. Those dates should be disabled.
Days from the previous or next month, seen in the first or last weeks, should be greyed out (with the cursor still shown as a hand).
State | Visual | |
|---|---|---|
General |   | |
Regular (x2 in size) |   | |
Hover (x2 in size) |   | |
Active (x2 in size) |   | |
Selected (x2 in size) |   | |
Disabled / Greyed out (x2 in size) |   | In case of greyed out the cursor will still be shown as a hand. |
Today (x2 in size) |   |
Internal logic
...
Clicking on the calendar Icon Button or any blank space will open the date picker menu.
The date picker menu will be closed:
when a date is selected, or
by clicking outside the date picker menu.
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:
...
Transitions
A slide down transition is used when the menu opens.
A swipe transition is used when pressing the left and right arrows to navigate between the months.
...