Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Flag New Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation Smart search
Icons
Interface and examples language
English
Version
20.4.0
Time range
Source code

Time range selection menu. The user can choose one of the preset values or specify the time range manually.

Trigger element

The component allows you to customize the trigger element. For example, it can be a button, a field, or a pseudo-link.

Custom presets

When there are no preset values, only the start and end of the period remain in the window.

Selection restriction

You can configure the minimum and maximum date through minDate and maxDate.

Both bounds take the time into account, not just the date. If you set maxDate to 31 December with no time, midnight is the only choice — to make the whole day available, set the time to 23:59.

The bounds are shown in the picker: next to the "Period" option, or under the "to" field when there are no presets.

Custom time ranges

The component allows you to set custom time range options.

Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.