Date picker

The date picker allows the user to select a date or a range of dates, in the past, present, and future.



Date picker




Date range picker

Anatomy date picker




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.



  • 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 below trigger

Use this placement as default.

Placement date picker bottom


Placement above trigger

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

Placement date picker top


Do's and dont's

  • Use the current date as default, unless specified otherwise.
  • Define a pre-selected date range whenever it is functionally necessary, eg. in analytics in order to display statistics.
  • Don't position the date picker next to the dropdown button (left or right)



Single date picker

Use to select 1 day.

Single date variant


Date range picker

Use to select a date range.

Date range variant