Skip to content



DatePicker is a component used to input or select a specific date or date range. It is available in four types:

  • Date picker (for selecting a single day)
  • Date range picker (for selecting a range of days/weeks)
  • Month picker (for selecting a single month)
  • Month range picker (for selecting a range of months)


Trigger is built on the Input component.


Use the en dash to indicate range of dates. Don’t add a space on either side of the en dash.

Date picker trigger's states and cases
State or caseAppearance example
PlaceholderTrigger with "MM/DD/YYYY" placeholder text inside
DayTrigger with "Mar 14, 2023" date inside
Range of days in one monthTrigger with "Mar 10, 2023-Mar 13, 2023" date range inside
Range of days in one yearTrigger with "Mar 21, 2023-Apr 13, 2023" date range inside
Range of days in different yearsTrigger with "Mar 8, 2022-Feb 13, 2023" date range inside
MonthTrigger with "Sep, 2022" month inside
Range of months in one yearTrigger with "Sep, 2023-Dec, 2023" month range inside
Range of months in different yearsTrigger with "Sep, 2022-Dec, 2023" month range inside

"Apply" button

"Apply" button allows users to submit their selected date(s). The selected date can be submitted by clicking on the date itself or by clicking the "Apply" button (if available).

"Apply" button is typically added to dropdowns when users need to select a range of dates or when selecting a date affects interface limitations. If necessary, the "Apply" button can be added to any type of date picker.


Date picker selects a single day. Once the day is selected, the dropdown closes and the date in the trigger updates.


If date has disabled state, then nothing should happen after user clicks it.

Grid margins

DatePicker and "Today" button

You can include a "Today" button that selects the current date. Upon clicking the button, the present date is selected, and the calendar automatically scrolls up to the current month (if it wasn't already displayed).

DatePicker with TimePicker

You can place TimePicker inside the dropdown.

And you can show 12-hour or 24-hour format of time for TimePicker, depending on the selected region (for example, user account settings).

DatePicker with custom cell elements

You can add custom elements inside cells: for example, a small progressbar under the date to show the progress of the metrics you need to show.


selects only one month. Once the month is selected, the dropdown closes, and the value in the trigger updates.

While a calendar with two month blocks can be displayed, it is more commonly used for range selection (see below).

Grid margins


Date range picker typically displays two month blocks in the calendar by default. To update the value in the trigger, user must click the "Apply" button after selecting the desired date range.

You can add presets for date ranges. Presets and their names may be customized. The selected preset gets active status.

You also can add the "Reset" button for deselecting the selected values. In this case the trigger changes its value to the placeholder.

Week picker

Week picker selects a single week and is similar to a regular date range picker, but with only one month block displayed in the dropdown.


Month range picker selects a range of several weeks and typically displays two month blocks in the dropdown by default. To update the value in the trigger, user must click the "Apply" button after selecting the desired month range.

You can also add the presets of date ranges for such picker.


You can compare two date ranges with DateRangeComparator. The ranges can either intersect or not intersect.

Each range in the DateRangeComparator.Trigger has an addon with a color: the first range uses the --date-picker-cell-active token, and the second range uses the --date-picker-cell-comparison-active token.


Interaction states for Date range comparator
DescriptionAppearance example
In the default state, the second period, which is activated by toggling the "Compare to" checkbox, is in a disabled state.
When enabling the comparison period, the focus shifts to the input field for selecting the second period. The preset set with periods changes to the one defined for the second period.
The selected date is immediately displayed in the input field.
The selected periods are applied after clicking the "Apply" button.

Released under the MIT License.

Released under the MIT License.