Skip to main content

Date Picker

The componentโ€‹

The date picker allows you to select any date range, which is used in other components for filtering data sets.

The component has two main features:

  • Quick and easy navigation
  • Selection of any kind of time range

Date picker

Depending on the theme, you will see different colors but they use the same scheme:

  • The darkest colors indicate the start and end time of the selected date range
  • The lightest colors indicate the time inside the selected date ranges
  • The darker color indicates 'today'

Date navigationโ€‹

Looking at the image above, this date picker shows one calendar month. Browsing to another month can be done in two ways:

  • The shift icons (the arrows next to the month and year) will go to the previous and next calendar month
  • The quick pickers allow you to navigate to the month and/or year directly

There are two quick pickers in this component. By clicking either on month...

Event editor details

... or year...

Event editor details

... you can easily browse for the date period you are interested in.

Selecting a date rangeโ€‹

In the date picker you always have to select a start date and an end date. This may be one day but it will always be a range. There are two ways in which you can select a date range.

Date selectionโ€‹

Click on a day you are interested in, then move your mouse (without holding the mouse button) to the last day of the range and then click on the day. You will notice the custom range is automatically and immediately applied to all the planning boards.

Before you confirm the date range (by clicking on the second date), a tooltip will tell you the duration of the date range you are about to confirm:

Event editor details

Note that is perfectly possible to select a range spanning multiple months. Clicking the shift icons won't result in a loss of focus of the start date selection:

Event editor details

As mentioned earlier, it is possible to select a range of just one day. You'd just have to click the same day twice.

Week selectionโ€‹

The first column in the date picker component shows the week number. These aren't just informational, because they allow a quick selection of the week as a range:

Event editor details