fix(ui5-date-time-picker): validation for min and max date is implemented

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

@@ -718,6 +718,154 @@ describe("Accessibility", () => {
 });
 
 
+describe("Min/Max date validation", () => {
+	describe("using format-pattern", () => {
+		it("sets Negative value state when typed value exceeds maxDate", () => {
+			cy.mount(
+				<DateTimePickerTemplate
+					formatPattern="dd/MM/yyyy, HH:mm:ss"
+					minDate="12/05/2026, 08:00:00"
+					maxDate="14/05/2026, 18:00:00"
+					value="13/05/2026, 10:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("15/05/2026, 10:00:00", "Negative");
+		});
+
+		it("sets Negative value state when typed value is below minDate", () => {
+			cy.mount(
+				<DateTimePickerTemplate
+					formatPattern="dd/MM/yyyy, HH:mm:ss"
+					minDate="12/05/2026, 08:00:00"
+					maxDate="14/05/2026, 18:00:00"
+					value="13/05/2026, 10:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("11/05/2026, 10:00:00", "Negative");
+		});
+
+		it("sets Negative value state when time exceeds maxDate on same day", () => {
+			cy.mount(
+				<DateTimePickerTemplate
+					formatPattern="dd/MM/yyyy, HH:mm:ss"
+					minDate="12/05/2026, 08:00:00"
+					maxDate="14/05/2026, 18:00:00"
+					value="14/05/2026, 10:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("14/05/2026, 19:00:00", "Negative");
+		});
+
+		it("clears Negative value state when typed value is within range", () => {
+			cy.mount(
+				<DateTimePickerTemplate
+					formatPattern="dd/MM/yyyy, HH:mm:ss"
+					minDate="12/05/2026, 08:00:00"
+					maxDate="14/05/2026, 18:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("15/05/2026, 10:00:00", "Negative");
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("13/05/2026, 12:00:00", "None");
+		});
+	});
+
+	describe("using display-format and value-format", () => {
+		it("sets Negative value state when typed value exceeds maxDate", () => {
+			cy.mount(
+				<DateTimePicker
+					displayFormat="dd/MM/yyyy, HH:mm:ss"
+					valueFormat="yyyy-MM-dd HH:mm:ss"
+					minDate="2026-05-12 08:00:00"
+					maxDate="2026-05-14 18:00:00"
+					value="2026-05-13 10:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("15/05/2026, 10:00:00", "Negative");
+		});
+
+		it("sets Negative value state when typed value is below minDate", () => {
+			cy.mount(
+				<DateTimePicker
+					displayFormat="dd/MM/yyyy, HH:mm:ss"
+					valueFormat="yyyy-MM-dd HH:mm:ss"
+					minDate="2026-05-12 08:00:00"
+					maxDate="2026-05-14 18:00:00"
+					value="2026-05-13 10:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("11/05/2026, 10:00:00", "Negative");
+		});
+
+		it("sets Negative value state when time exceeds maxDate on same day", () => {
+			cy.mount(
+				<DateTimePicker
+					displayFormat="dd/MM/yyyy, HH:mm:ss"
+					valueFormat="yyyy-MM-dd HH:mm:ss"
+					minDate="2026-05-12 08:00:00"
+					maxDate="2026-05-14 18:00:00"
+					value="2026-05-14 10:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("14/05/2026, 19:00:00", "Negative");
+		});
+
+		it("clears Negative value state when typed value is within range", () => {
+			cy.mount(
+				<DateTimePicker
+					displayFormat="dd/MM/yyyy, HH:mm:ss"
+					valueFormat="yyyy-MM-dd HH:mm:ss"
+					minDate="2026-05-12 08:00:00"
+					maxDate="2026-05-14 18:00:00"
+				/>
+			);
+
+			cy.get("[ui5-datetime-picker]")
+				.as("dtp");
+
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("15/05/2026, 10:00:00", "Negative");
+			cy.get("@dtp")
+				.ui5DateTimePickerTypeAndExpectValueState("13/05/2026, 12:00:00", "None");
+		});
+	});
+});
+
 describe("Validation inside a form", () => {
 	it("has correct validity for valueMissing", () => {
 		cy.mount(

packages/main/cypress/support/commands/DateTimePicker.commands.ts

@@ -74,6 +74,19 @@ Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", { prevSubjec
 		.its("length");
 });
 
+Cypress.Commands.add("ui5DateTimePickerTypeAndExpectValueState", { prevSubject: true }, (subject: JQuery<DateTimePicker>, displayValue: string, expectedState: "Negative" | "None") => {
+	cy.wrap(subject)
+		.ui5DatePickerGetInnerInput()
+		.clear()
+		.realType(displayValue)
+		.realPress("Enter");
+
+	cy.wrap(subject)
+		.shadow()
+		.find("[ui5-datetime-input]")
+		.should("have.attr", "value-state", expectedState);
+});
+
 declare global {
 	namespace Cypress {
 		interface Chainable {
@@ -104,6 +117,10 @@ declare global {
 			ui5DateTimePickerPeriodSegmentedButtonCount(
 				this: Chainable<JQuery<DateTimePicker>>
 			): Chainable<number>;
+			ui5DateTimePickerTypeAndExpectValueState(
+				displayValue: string,
+				expectedState: "Negative" | "None"
+			): Chainable<void>;
 		}
 	}
 }

packages/main/src/DateTimePicker.ts

@@ -450,7 +450,7 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 		if (value === "") {
 			return true;
 		}
-		return this.isValidValue(value);
+		return this.isValidValue(value) && this.isInValidRange(value);
 	}
 
 	getSelectedDateTime() {
@@ -522,6 +522,16 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
 		return this._isoFormatInstance;
 	}
 
+	/**
+	 * @override
+	 */
+	_getCalendarDateFromString(value: string) {
+		const jsDate = this.getValueFormat().parse(value) as Date;
+		if (jsDate) {
+			return CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
+		}
+	}
+
 	/**
 	 * @override
 	 */