Preview

Anatomy

Date range picker

Guidelines

The date picker allows the user to select a date or a date range. It is commonly used with the dropdown button component.

The date picker uses the current date as default, unless configured otherwise, and the user can navigate through months and years.

Single date picker

The user can only select one specific date in the calendar. It requires a day, month, and year to be selected. The user can click on the dropdown button to choose day, month and year.

Date range picker

The user selects a dare range by choosing a start and an end date. They can select custom dates manually, or use one of the dat range presets (previous month, last 3 months, last 6 months...). The user can also use the arrows to navigate through the calendar.

Content guidelines

Ensure that the locale is properly set and the user can use it in a familiar format. Please read about allowed date formats here.

Behaviour

• Date picker is opened by clicking the dropdown button. There's no delay for the display.
• When a date range is selected, the first and last date are marked as selected, and the range between them highlighted.
• In the date range picker, the user can go trough the months by clicking on the horizontal arrow navigation, while in the single date picker they use the respective dropdown buttons.
• The date selection is applied only when the user confirms it with the "Apply" button.
• We display entire months only. This means we do not display the last days of the previous month, or the first days of the following one.

Placement

Placement below trigger

Use this placement as default.

Placement above trigger

Use this placement only used in case of lack of space below.

Do's and dont's

Variants

Single date picker

Use to select 1 day.

Date range picker

Use to select a date range.