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.
There are the following types:
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.
- 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
The following options are available:
- Apply: Submit changes made in the calendar.
- Cancel: Dismiss calendar without applying changes.
This chapter shows several date time range picker styles in the design system.