Description

...

• Input - In the input field, the user can enter a date directly or select it using the date picker.

• Date picker icon - clicking the icon opens the calendar

• Calendar Picker -The date picker calendar lets users pick a 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:

...

...

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.

...

States

Add warning

...

Interaction

• 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.

...