Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# 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:

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:

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.

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.

Year and month selection within the calendar widget

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

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

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

1. Quickrange area, 2. Quickrange items

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

#### Whole day

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

#### 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 time range picker

Date time range picker with action buttons

Year or month selection

Quickrange

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

## Native date time picker

Date
Time

Date-Time local

Disabled

Read only

    <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.

- Form and form elements

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