Date time range picker

A date time range picker is a pattern to interact with in order to chose, change and select timestamps and date ranges.


When to use

Use the date time range picker in the following cases:

  • When working with date and time values: It can be used to provide an easy-to-use interface to select times, dates and ranges.

Use the advanced date time range picker in the following cases:

  • When a more subtle input prompt is required, for example on dashboards.
  • To quickly select and browse pre-defined or personalised time periods.


The following types of pickers are available:

Picker types

1. Time, 2. Time range, 3. Date, 4. Date time, 5. Date range, 6. Date time range

General construction

A date time range picker consists of the following elements:

General construction

Input field and subparts

The input field is made up of the following parts:

  1. Label (optional)
  2. Description (optional)
  3. Required field indicator (optional)
  4. Range indicator
  5. Date:
    • The user enters the date in the date input field.
  6. Time (optional):
    • A time can be entered in the date input field, too.

optional time

Calendar widget

The calendar widget provides an easy-to-use interface to pick times, dates and ranges. A wide range of options are available for the calendar. See section ‘options’ for more information.

  1. Year and month controls:
    • Allow the user to move forward or backward one month at a time by clicking the arrow buttons.
    • Allow the user to navigate through years or months.
  2. Today:
    • Allows the user to jump to the current day.
  3. Picking area:
    • Allows the user to pick dates.

Picking area

Year and month selection within the calendar widget

Picking area

Years and/or months can be selected via the year or month controls.

Picking areas

Working with time only
  1. Now:
    • Jump to current time.
  2. Time selection:
    • Hours, minutes and optional seconds.
  3. 12 hours format:
    • AM / PM selection


The following options are available:

Action Buttons

Action buttons

When the action buttons are enabled, the user can change the selected date multiple times before applying changes.
  • Apply:
    • Submit changes made in the calendar.
  • Cancel:
    • Dismiss calendar without applying changes.



1. Quickrange area, 2. Quickrange items

Quickranges provide a selection of often used or predefined time ranges.

Whole day

whole day

Whole day activation provides a quick way to turn a date time range field into a date range field.



It is possible to choose between Local and UTC when the time zone is enabled.


This chapter shows several date time range picker styles in the User Experience Toolkit.


Date range picker

Date range picker

Date time range picker

Date time range picker

Date time range picker with action buttons

Date time range picker with action buttons

Year or month selection

Year or month selection


Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top