feat(ui5-date-picker): normalize display value only on change

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

@@ -1548,6 +1548,28 @@ describe("Date Picker Tests", () => {
 			.find("ui5-yearpicker")
 			.should("be.visible");
 	});
+
+	it("Should not auto-format incomplete date while typing", () => {
+		cy.mount(<DatePicker formatPattern="yyyy-MM-dd" />);
+		cy.get("[ui5-date-picker]")
+			.ui5DatePickerGetInnerInput()
+			.realClick()
+			.realType("2023-0", { delay: 100 });
+
+		cy.get("ui5-date-picker")
+			.ui5DatePickerGetInnerInput()
+			.should("have.value", "2023-0");
+	});
+
+	it("Should normalize value on change", () => {
+		cy.mount(<DatePicker formatPattern="yyyy-MM-dd" />);
+		cy.get("[ui5-date-picker]")
+			.ui5DatePickerTypeDate("202-12-1");
+
+		cy.get("[ui5-date-picker]")
+			.ui5DatePickerGetInnerInput()
+			.should("have.value", "0202-12-01");
+	});
 });
 
 

packages/main/cypress/support/commands.ts

@@ -89,6 +89,7 @@ declare global {
 			ui5DatePickerGetMonthButton(): Chainable<JQuery<HTMLElement>>
 			ui5DatePickerGetYearButton(): Chainable<JQuery<HTMLElement>>
 			ui5DatePickerValueHelpIconPress(): Chainable<void>
+			ui5DatePickerTypeDate(value: string, delay?: number): Chainable<void>
 			ui5SegmentedButtonItemToggleSelect(deselect?: boolean): Chainable<void>
 			ui5SegmentedButtonFocusFirstItem(): Chainable<void>
 			ui5SwitchCheckAttributeInShadowDomRoot(attrName: string, attrValue: string): Chainable<void>

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

@@ -266,3 +266,17 @@ Cypress.Commands.add("ui5DatePickerValueHelpIconPress", { prevSubject: true }, s
 		.find("ui5-icon")
 		.realClick();
 });
+
+Cypress.Commands.add("ui5DatePickerTypeDate", { prevSubject: true }, (subject: string, date: string, delay: number = 0) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.ui5DatePickerGetInnerInput()
+		.realClick()
+		.clear()
+		.should("be.focused");
+
+	cy.realType(date, { delay });
+	cy.realPress("Enter");
+});

packages/main/src/DatePicker.ts

@@ -369,6 +369,8 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 
 	liveValue?: string;
 
+	isLiveUpdate?: boolean;
+
 	/**
 	 * Defines the value state message that will be displayed as pop up under the component.
 	 *
@@ -441,7 +443,9 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 			}
 		});
 
-		this.value = this.normalizeFormattedValue(this.value) || this.value;
+		if (!this.isLiveUpdate) {
+			this.value = this.normalizeFormattedValue(this.value) || this.value;
+		}
 		this.liveValue = this.value;
 	}
 
@@ -544,8 +548,9 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 
 	_updateValueAndFireEvents(value: string, normalizeValue: boolean, events: Array<"change" | "value-changed" | "input">, updateValue = true) {
 		const valid = this._checkValueValidity(value);
+		this.isLiveUpdate = !updateValue;
 
-		if (valid && normalizeValue) {
+		if ((valid && normalizeValue) || !this.isLiveUpdate) {
 			value = this.getDisplayValueFromValue(value);
 			value = this.normalizeDisplayValue(value); // transform valid values (in any format) to the correct format
 		}
@@ -813,6 +818,10 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 			return "";
 		}
 
+		if (this.isLiveUpdate) {
+			return this.liveValue!;
+		}
+
 		return this.getDisplayFormat().format(this.getValueFormat().parse(this.value, true), true);
 	}
 

packages/main/src/DateRangePicker.ts

@@ -311,6 +311,10 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 		const firstDateTimestamp = this._exctractDisplayTimestamp(values[0]);
 		const lastDateTimestamp = this._exctractDisplayTimestamp(values[1]);
 
+		if (!firstDateTimestamp || !lastDateTimestamp) {
+			return value;
+		}
+
 		if (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary
 			return this._buildDisplayValue(lastDateTimestamp, firstDateTimestamp);
 		}
@@ -329,7 +333,7 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 		firstDateString = this._getValueStringFromTimestamp((this._exctractDisplayTimestamp(values[0]) as number) * 1000);
 		lastDateString = this._getValueStringFromTimestamp((this._exctractDisplayTimestamp(values[1]) as number) * 1000);
 
-		if (!firstDateString && !lastDateString) {
+		if (!firstDateString || !lastDateString) {
 			return value;
 		}
 
@@ -518,6 +522,10 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 	}
 
 	getDisplayValueFromValue(value: string): string {
+		if (this.isLiveUpdate) {
+			return value;
+		}
+
 		let firstDateString = "";
 		let lastDateString = "";