fix(ui5-date-range-picker): remove relative date handling

packages/main/cypress/specs/DateRangePicker.cy.tsx

@@ -968,4 +968,83 @@ describe("Validation inside a form", () => {
 		cy.get("#dateRangePicker:invalid")
 			.should("not.exist");
 	});
+});
+
+describe("DateRangePicker relative dates rejection", () => {
+	it("typing 'today' sets error state", () => {
+		cy.mount(<DateRangePicker></DateRangePicker>);
+
+		cy.get("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realType("today");
+		cy.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.value", "today");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "Negative");
+	});
+
+	it("typing 'tomorrow' sets error state", () => {
+		cy.mount(<DateRangePicker></DateRangePicker>);
+
+		cy.get("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realType("tomorrow");
+		cy.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.value", "tomorrow");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "Negative");
+	});
+
+	it("typing 'yesterday' sets error state", () => {
+		cy.mount(<DateRangePicker></DateRangePicker>);
+
+		cy.get("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realType("yesterday");
+		cy.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.value", "yesterday");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "Negative");
+	});
+
+	it("valid concrete date range does not set error state", () => {
+		cy.mount(<DateRangePicker displayFormat="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realType("09/09/2020 - 10/10/2020");
+		cy.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "None");
+	});
 });

packages/main/src/DateRangePicker.ts

@@ -6,6 +6,7 @@ import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDat
 import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
+import type DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import {
 	DATERANGE_DESCRIPTION,
 	DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME,
@@ -136,6 +137,27 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 		this._prevDelimiter = null;
 	}
 
+	/**
+	 * Checks if a date string is a relative date (e.g. "today", "tomorrow")
+	 * that would be resolved by DateFormat.parseRelative().
+	 * Relative dates are not supported in DateRangePicker.
+	 * @private
+	 */
+	_isRelativeValue(dateString: string, format: DateFormat): boolean {
+		const trimmed = dateString.trim();
+		if (!trimmed) {
+			return false;
+		}
+
+		const parsed = format.parse(trimmed);
+		if (!parsed) {
+			return false;
+		}
+
+		const formatted = format.format(parsed);
+		return formatted !== trimmed;
+	}
+
 	/**
 	 * **Note:** The getter method is inherited and not supported. If called it will return an empty value.
 	 * @public
@@ -272,6 +294,10 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 	isValid(value: string): boolean {
 		const parts = this._splitValueByDelimiter(value).filter(str => str.trim() !== "");
 
+		if (parts.some(dateString => this._isRelativeValue(dateString, this.getFormat()))) {
+			return false;
+		}
+
 		return parts.length <= 2 && parts.every(dateString => super.isValid(dateString)); // must be at most 2 dates and each must be valid
 	}
 
@@ -283,6 +309,10 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 	isValidValue(value: string): boolean {
 		const parts = this._splitValueByDelimiter(value).filter(str => str.trim() !== "");
 
+		if (parts.some(dateString => this._isRelativeValue(dateString, this.getValueFormat()))) {
+			return false;
+		}
+
 		return parts.length <= 2 && parts.every(dateString => super.isValidValue(dateString)); // must be at most 2 dates and each must be valid
 	}
 
@@ -294,6 +324,10 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 	isValidDisplayValue(value: string): boolean {
 		const parts = this._splitValueByDelimiter(value).filter(str => str.trim() !== "");
 
+		if (parts.some(dateString => this._isRelativeValue(dateString, this.getDisplayFormat()))) {
+			return false;
+		}
+
 		return parts.length <= 2 && parts.every(dateString => super.isValidDisplayValue(dateString)); // must be at most 2 dates and each must be valid
 	}