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:
General construction
A date time range picker consists of the following elements:
The input field is constructed from the following parts:
- Label: A label is optional.
- Description: A description is optional.
- Required field indicator: A required field indicator is optional.
- Range indicator
- Date: A input field where the user can type in the date.
- 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.
- 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.
- Today
- Allows the user to jump to the current day.
- Picking area
- Allows the user to pick dates.
- Now: Jump to current time.
- Time selection: Hours, minutes and optional seconds.
- 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
Style
This chapter shows several date time range picker styles in the User Experience Toolkit.