Date time range picker

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:

General construction

A date time range picker consists of the following elements:

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.

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.

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

• Apply: Submit changes made in the calendar.
• Cancel: Dismiss calendar without applying changes.

Quickrange

Quickranges provide a selection of often used time ranges.

Whole day

Timezone