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. 

A date picker is a combination of:

...

Table of Contents

Description

Status
colourYellow
titleOngoing
 

Date picker allows users to select or enter a single date. 

...

Usage & Behavior

General guidelines

Structure

A date picker is a combination of:

  • Input - In the input field, the user can enter a date directly or select it using the date picker. The system validates the entry and provides the user with feedbackdate picker.

  • Date picker icon - clicking the icon opens the calendar

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

...

Usage & Behavior

General guidelines

A date picker can have a preceding label, or not (see example below).

The label should be clear and short (limited to a single line).

...

Internal Logic

When From/To (Start/End) pickers ares used to select a start date and an end date and the end date is not limited, use "Never", as shown below:

...

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

...

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.

The current day is colored blue and the selected date are highlighted with a grey background and a blue border:

...


Clicking the down arrow near the month and year header will open another window popover which will allow 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.  

  • Calendar pickers are especially useful for selecting a date range.

  • 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

...

Zeplin Link

Thumbnail

https://zpl.io/aNXBPk2

Image RemovedImage Added


Current appearances in our products

...