DynamicDateRange

<ui5-dynamic-date-range> | Since 2.11.0

The ui5-dynamic-date-range component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., "Today", "Yesterday", etc.). It allows users to select a date range from a predefined set of options or enter custom dates.

Usage

The component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools. It can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the IDynamicDateRangeOption interface. Every option should be registered using the DynamicDateRange.register method.

If needed, you can also create a range of dates based on specific option using the toDates method.

Standard Options

The component comes with a set of standard options, including:

"TODAY" - Represents the current date. An example value is { operator: "TODAY"}. Import: import "@ui5/webcomponents/dist/dynamic-date-range-options/Today.js";
"YESTERDAY" - Represents the previous date. An example value is { operator: "YESTERDAY"}. Import: import "@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js";
"TOMORROW" - Represents the next date. An example value is { operator: "TOMORROW"}. Import: import "@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js";
"DATE" - Represents a single date. An example value is { operator: "DATE", values: [new Date()]}. Import: import "@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js";
"DATERANGE" - Represents a range of dates. An example value is { operator: "DATERANGE", values: [new Date(), new Date()]}. Import: import "@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js";

ES6 Module Import

import "@ui5/webcomponents/dist/DynamicDateRange.js";

Basic Sample

Properties

value

Description	Defines the value object.
Type	`DynamicDateRangeValue \| undefined`
Default	undefined

options

Description	Defines the options listed as a string, separated by commas and using capital case. Example: "TODAY, YESTERDAY, DATERANGE"
Type	`string`
Default	""

Slots

No slots available for this component.

Events

change

Description	Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.
Type	`CustomEvent`
Bubbles	Yes
Cancelable	Yes - via `preventDefault()`

Methods

toDates

Description	Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.
Return type	`Array<Date>`
Parameters	value: `DynamicDateRangeValue` The option to convert into an array of date ranges

CSS Parts

No CSS parts available for this component.