chore: make form validity API async

packages/base/src/UI5Element.ts

@@ -327,7 +327,7 @@ abstract class UI5Element extends HTMLElement {
 		}
 
 		if (!ctor.asyncFinished) {
-			await ctor.definePromise;
+			await ctor._definePromise;
 		}
 
 		if (!this._inDOM) { // Component removed from DOM while _processChildren was running
@@ -340,6 +340,14 @@ abstract class UI5Element extends HTMLElement {
 		this.onEnterDOM();
 	}
 
+	get definePromise(): Promise<void> {
+		const ctor = this.constructor as typeof UI5Element;
+		if (!ctor.asyncFinished && ctor._definePromise) {
+			return ctor._definePromise;
+		}
+		return Promise.resolve();
+	}
+
 	/**
 	 * Do not call this method from derivatives of UI5Element, use "onExitDOM" only
 	 * @private
@@ -1329,7 +1337,7 @@ abstract class UI5Element extends HTMLElement {
 	}
 
 	static asyncFinished: boolean;
-	static definePromise: Promise<void> | undefined;
+	static _definePromise: Promise<void> | undefined;
 	static i18nBundleStorage: Record<string, I18nBundle> = {};
 
 	static get i18nBundles(): Record<string, I18nBundle> {
@@ -1355,7 +1363,7 @@ abstract class UI5Element extends HTMLElement {
 			});
 			this.asyncFinished = true;
 		};
-		this.definePromise = defineSequence();
+		this._definePromise = defineSequence();
 
 		const tag = this.getMetadata().getTag();
 

packages/base/src/features/InputElementsFormSupport.ts

@@ -33,6 +33,10 @@ const setFormValidity = async (element: IFormInputElement) => {
 	if (!element._internals?.form) {
 		return;
 	}
+
+	element._internals.setValidity({ customError: true }, " "); // treat the form as invalid until CLDR and message bundles are loaded
+	await element.definePromise;
+
 	if (element.formValidity && Object.keys(element.formValidity).some(key => key)) {
 		const focusRef = await element.formElementAnchor?.();
 		element._internals.setValidity(element.formValidity, element.formValidityMessage, focusRef);

packages/main/src/DatePicker.ts

@@ -1043,17 +1043,36 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 
 	/**
 	 * Currently selected date represented as a Local JavaScript Date instance.
+	 * Note: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.
 	 * @public
 	 * @default null
+	 * @deprecated Use dateValueAsync instead
 	 */
 	get dateValue(): Date | null {
 		return this.liveValue ? this.getValueFormat().parse(this.liveValue) as Date : this.getValueFormat().parse(this.value) as Date;
 	}
 
+	/**
+	 * Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.
+	 * @public
+	 * @default Promise
+	 */
+	get dateValueAsync(): Promise<Date | null> {
+		return this.definePromise.then(() => {
+			return this.dateValue;
+		});
+	}
+
 	get dateValueUTC(): Date | null {
 		return this.liveValue ? this.getValueFormat().parse(this.liveValue, true) as Date : this.getValueFormat().parse(this.value) as Date;
 	}
 
+	get dateValueUTCAsync(): Promise<Date | null> {
+		return this.definePromise.then(() => {
+			return this.dateValueUTC;
+		});
+	}
+
 	get styles() {
 		return {
 			main: {