Description

...

• Date input field. The date can be directly edited here, in the required format. If there is no default date, the input will show a hint text indicating the desired format (for example, dd/mm/yyyy).

• Date picker button. A calendar Icon Button which opens the calendar drop-down.

• Calendar drop-down, which consists of:

  • Month calendar, which allows the user to pick a specific date using touch, mouse , or keyboard input.

  • Month and Year pickersdrop down menus, which allow the user to directly select a specific month or year. 

  • Left and Right arrows, which allow the user to navigate backward or forward one month at a time.

...

• Clicking on the calendar Icon Button will open the calendar drop-down.

• The calendar drop-down will be closed either:

  • when a date is selected, or

  • by clicking outside the calendar drop-down.

• Clicking the left and right arrows on the calendar moves backwards and forwards between the months.

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 which shows the required date format. This will help to prevent input errors.

...