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

The date time range picker is used when working with date and time values. It can be used to provide an easy-to-use interface for picking times, dates and ranges.

Types

There are the following types:

Usage 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

The input field is constructed from the following parts:

  1. Label: A label is optional.
  2. Description: A description is optional.
  3. Required field indicator: A required field indicator is optional.
  4. Range indicator
  5. Date: A input field where the user can type in the date.
  6. Time: Optional time within date input.

optional time

Calendar widget

The calendar widget provides an easy-to-use interface for picking times, dates and ranges. There is a wide range of options available for the calendar. See options for more information.

  1. Year and month controls:
    • Allows the user to move forward or backward one month at a time with the arrow buttons.
    • Allows 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

Selecting the year or month control enables picking years and/or months.

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 item

Quickranges provide a selection of often used 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
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top