Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Description

Status
colourYellow
titleOngoing

...

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.

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.

...