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.

Usage

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.

Types

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

Options

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.

Quickrange

Quickrange

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.

Timezone

timezone

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

Style

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

Overview

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

Quickrange

Quickrange

This is the native version of the date time picker and may look different in other browsers.

Native date time picker




<div class="inputGroup dateTimePicker">
    <label class="inputGroup__label" for="dateTimePicker-date">
        Date
    </label>
    <input id="dateTimePicker-date" class="dateTimePicker__textInput" type="date" max="" value="2024-03-04">
</div>

<div class="inputGroup dateTimePicker">
    <label class="inputGroup__label" for="dateTimePicker-time">
        Time
    </label>
    <input id="dateTimePicker-time" class="dateTimePicker__textInput" type="time" value="08:00">
</div>

<hr class="showcase">

<div class="inputGroup dateTimePicker">
    <label class="inputGroup__label" for="dateTimePicker-dateTime-local">
        Date-Time local
    </label>
    <input id="dateTimePicker-dateTime-local" class="dateTimePicker__textInput" type="datetime-local" id="dateTimePicker-dateTime-local" name="meeting-time" value="2024-03-04T08:00" min="2024-03-04T00:00" max="2024-03-18T00:00" />
</div>

<hr class="showcase">

<div class="inputGroup dateTimePicker">
    <label class="inputGroup__label" for="dateTimePicker-disabled">
        Disabled
    </label>
    <input class="dateTimePicker__textInput" type="datetime-local" id="dateTimePicker-disabled" name="meeting-time" value="2024-03-04T08:00" min="2024-03-04T00:00" max="2024-03-18T00:00" disabled />
</div>

<hr class="showcase">

<div class="inputGroup dateTimePicker">
    <label class="inputGroup__label" for="dateTimePicker-readonly">
        Read only
    </label>
    <input class="dateTimePicker__textInput" type="datetime-local" id="dateTimePicker-readonly" name="meeting-time" value="2024-03-04T08:00" min="2024-03-04T00:00" max="2024-03-18T00:00" readonly />
</div>

Usage

To add the disabled or readonly state to the input field, please use the attributes disabled and readonly at the input element.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top