{
+ return dateTimeRangeOptionToDates(value);
+ }
+
+ get text(): string {
+ return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT);
+ }
+
+ get operator() {
+ return "DATETIMERANGE";
+ }
+
+ get icon() {
+ return "appointment-2";
+ }
+
+ isValidString(value: string): boolean {
+ const splitValue = value.split(DEFAULT_DELIMITER);
+ const startDate = this._parseDate(splitValue[0].trim()) as Date;
+ const endDate = this._parseDate(splitValue[1].trim()) as Date;
+
+ if (!startDate || !endDate || Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
+ return false;
+ }
+
+ return true;
+ }
+
+ getFormatPattern() {
+ const localeData = getCachedLocaleDataInstance(getLocale());
+ return localeData.getCombinedDateTimePattern("medium", "medium");
+ }
+
+ getFormat(): DateFormat {
+ return DateFormat.getDateInstance({
+ strictParsing: true,
+ pattern: this.getFormatPattern(),
+ });
+ }
+}
+
+DynamicDateRange.register("DATETIMERANGE", DateTimeRange);
+
+export default DateTimeRange;
diff --git a/packages/main/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx b/packages/main/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx
new file mode 100644
index 000000000000..9b2c92b7157e
--- /dev/null
+++ b/packages/main/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx
@@ -0,0 +1,62 @@
+import DynamicDateRange from "../DynamicDateRange.js";
+import DateTimePicker from "../DateTimePicker.js";
+import Label from "../Label.js";
+import {
+ DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL,
+ DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL,
+} from "../generated/i18n/i18n-defaults.js";
+
+export default function DateTimeRangeTemplate(this: DynamicDateRange) {
+ const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
+
+ const getDateFromValue = (index = 0) => {
+ if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
+ return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+ }
+ return undefined;
+ };
+
+ const handleSelectionChange = () => {
+ const fromPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#from-picker") as DateTimePicker;
+ const toPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#to-picker") as DateTimePicker;
+
+ const fromDateValue = fromPicker.dateValue;
+ const toDateValue = toPicker.dateValue;
+
+ // If there are no dates selected, clear the value
+ if (!(fromDateValue && toDateValue)) {
+ this.currentValue = {
+ operator: currentOperator,
+ values: []
+ };
+ return;
+ }
+
+ const newValue = [fromDateValue, toDateValue];
+
+ if (newValue[0] && newValue[1] && newValue[0].getTime() > newValue[1].getTime()) {
+ newValue.reverse();
+ }
+
+ this.currentValue = {
+ operator: currentOperator,
+ values: newValue,
+ };
+ };
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/main/src/dynamic-date-range-options/toDates.ts b/packages/main/src/dynamic-date-range-options/toDates.ts
index 577cf1626369..cfda66bf9e3c 100644
--- a/packages/main/src/dynamic-date-range-options/toDates.ts
+++ b/packages/main/src/dynamic-date-range-options/toDates.ts
@@ -2,6 +2,10 @@ import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicD
import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
const dateOptionToDates = (value: DynamicDateRangeValue): Array => {
+ if (!value || !value.values || value.values.length !== 1) {
+ return [];
+ }
+
const startDate = value.values ? value.values[0] as Date : UI5Date.getInstance();
const endDate = UI5Date.getInstance(startDate.getTime());
@@ -12,6 +16,10 @@ const dateOptionToDates = (value: DynamicDateRangeValue): Array => {
};
const dateRangeOptionToDates = (value: DynamicDateRangeValue): Array => {
+ if (!value || !value.values || value.values.length !== 2) {
+ return [];
+ }
+
const startDate = value.values ? value.values[0] as Date : UI5Date.getInstance();
const endDate = value.values ? value.values[1] as Date : UI5Date.getInstance();
@@ -21,6 +29,17 @@ const dateRangeOptionToDates = (value: DynamicDateRangeValue): Array => {
return [startDate, endDate];
};
+const dateTimeRangeOptionToDates = (value: DynamicDateRangeValue): Array => {
+ if (!value || !value.values || value.values.length !== 2) {
+ return [];
+ }
+
+ const startDate = value.values ? value.values[0] as Date : UI5Date.getInstance();
+ const endDate = value.values ? value.values[1] as Date : UI5Date.getInstance();
+
+ return [startDate, endDate];
+};
+
const todayToDates = (): Array => {
const startDate = UI5Date.getInstance();
const endDate = UI5Date.getInstance();
@@ -194,6 +213,7 @@ const dateTimeOptionToDates = (value: DynamicDateRangeValue): Array => {
export {
dateOptionToDates,
dateRangeOptionToDates,
+ dateTimeRangeOptionToDates,
todayToDates,
tomorrowToDates,
yesterdayToDates,
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 3523174068e1..c1a7eaf42035 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -817,6 +817,12 @@ DYNAMIC_DATE_RANGE_TO_TEXT=To (Date Time)
#XFLD: Text for the selected date in the DynamicDateRange component.
DYNAMIC_DATE_RANGE_SELECTED_TEXT=Selected
+DYNAMIC_DATE_TIME_RANGE_TEXT=From / To (Date and Time)
+
+DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL=To
+
+DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL=From
+
#FLD: Text for the selected date section when there's no value in the DynamicDateRange component.
DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Choose Dates
diff --git a/packages/main/test/pages/DynamicDateRange.html b/packages/main/test/pages/DynamicDateRange.html
index a027aa1dca29..6a69decd28d3 100644
--- a/packages/main/test/pages/DynamicDateRange.html
+++ b/packages/main/test/pages/DynamicDateRange.html
@@ -26,7 +26,7 @@ Basic Options
diff --git a/packages/website/docs/_samples/main/DynamicDateRange/Basic/main.js b/packages/website/docs/_samples/main/DynamicDateRange/Basic/main.js
index 9dcab9c9bf1d..0d5c26f19089 100644
--- a/packages/website/docs/_samples/main/DynamicDateRange/Basic/main.js
+++ b/packages/website/docs/_samples/main/DynamicDateRange/Basic/main.js
@@ -4,4 +4,5 @@ import "@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js";
import "@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js";
import "@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js";
import "@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js";
+import "@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js";
import "@ui5/webcomponents/dist/Text.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/DynamicDateRange/Basic/sample.html b/packages/website/docs/_samples/main/DynamicDateRange/Basic/sample.html
index aaa733a73c14..26589b4f7fe6 100644
--- a/packages/website/docs/_samples/main/DynamicDateRange/Basic/sample.html
+++ b/packages/website/docs/_samples/main/DynamicDateRange/Basic/sample.html
@@ -12,7 +12,7 @@
All options
-
+
Only two options