fix(ui5-date-picker): performance of selecting is improved when there are min and max date. (#13550)

When minDate/maxDate is set on date-related components (ui5-date-picker, ui5-daterange-picker, ui5-date-time-picker), selecting a date caused ~90 redundant parse() calls per render. The _minDate and _maxDate getters were recomputed from scratch on every access —
calling parse() 2–3 times and constructing a new CalendarDate each time — even though the values hadn't changed.

Similarly, disabledDates ranges were re-parsed on every cell in the 42-day loop (42 × N times per render).

Changes:

DateFormat.ts — added a module-level Map cache for getDateInstance(). Repeated calls with the same options return the cached instance instead of constructing a new one.
DateComponentBase.ts — _minDate and _maxDate now cache their parsed CalendarDate result. Re-parsing only happens when minDate, maxDate, or primaryCalendarType actually changes.
DayPicker.ts — _minDate, _maxDate, and disabled date timestamps are resolved once before the 42-cell render loop and passed into _isDateEnabled().

Author: GDamyanov

packages/localization/src/DateFormat.ts

@@ -27,15 +27,25 @@ type DateFormatOptions = {
 
 const DateFormatWrapped = DateFormatNative as typeof DateFormatT;
 
+const _dateFormatCache = new Map<string, DateFormat>();
+
 class DateFormat extends DateFormatWrapped {
 	static getDateInstance(oFormatOptions?: DateFormatOptions, oLocale?: LocaleWrapped): DateFormat;
 	static getDateInstance(oLocale?: LocaleWrapped): DateFormat;
 	static getDateInstance(oFormatOptionsOrLocale?: DateFormatOptions | LocaleWrapped, oLocale?: LocaleWrapped): DateFormat {
+		const locale = oLocale ?? new LocaleWrapped(getLocale().toString());
+
 		if (oFormatOptionsOrLocale instanceof LocaleWrapped) {
 			return DateFormatWrapped.getDateInstance(undefined, oFormatOptionsOrLocale);
 		}
-		const nativeLocale = oLocale ?? new LocaleWrapped(getLocale().toString());
-		return DateFormatWrapped.getDateInstance(oFormatOptionsOrLocale, nativeLocale);
+
+		const cacheKey = `${JSON.stringify(oFormatOptionsOrLocale ?? {})}__${String(locale)}`;
+		let instance = _dateFormatCache.get(cacheKey);
+		if (!instance) {
+			instance = DateFormatWrapped.getDateInstance(oFormatOptionsOrLocale, locale);
+			_dateFormatCache.set(cacheKey, instance);
+		}
+		return instance;
 	}
 }
 

packages/main/src/DateComponentBase.ts

@@ -121,6 +121,9 @@ class DateComponentBase extends UI5Element {
 	 */
 	_isoFormatInstance?: DateFormat;
 
+	_cachedMinDate?: { key: string, value: CalendarDate };
+	_cachedMaxDate?: { key: string, value: CalendarDate };
+
 	constructor() {
 		super();
 	}
@@ -135,23 +138,21 @@ class DateComponentBase extends UI5Element {
 	}
 
 	get _minDate() {
-		let minDate;
-
-		if (this.minDate) {
-			minDate = this._getMinMaxCalendarDateFromString(this.minDate);
+		const key = `${this.minDate}__${this._primaryCalendarType}`;
+		if (!this._cachedMinDate || this._cachedMinDate.key !== key) {
+			const parsed = this.minDate ? this._getMinMaxCalendarDateFromString(this.minDate) : undefined;
+			this._cachedMinDate = { key, value: parsed || getMinCalendarDate(this._primaryCalendarType) };
 		}
-
-		return minDate || getMinCalendarDate(this._primaryCalendarType);
+		return this._cachedMinDate.value;
 	}
 
 	get _maxDate() {
-		let maxDate;
-
-		if (this.maxDate) {
-			maxDate = this._getMinMaxCalendarDateFromString(this.maxDate)!;
+		const key = `${this.maxDate}__${this._primaryCalendarType}`;
+		if (!this._cachedMaxDate || this._cachedMaxDate.key !== key) {
+			const parsed = this.maxDate ? this._getMinMaxCalendarDateFromString(this.maxDate) : undefined;
+			this._cachedMaxDate = { key, value: parsed || getMaxCalendarDate(this._primaryCalendarType) };
 		}
-
-		return maxDate || getMaxCalendarDate(this._primaryCalendarType);
+		return this._cachedMaxDate.value;
 	}
 
 	get _formatPattern() {

packages/main/src/DayPicker.ts

@@ -241,6 +241,10 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 		const todayDate = CalendarDate.fromLocalJSDate(UI5Date.getInstance(), this._primaryCalendarType); // current day date - calculate once
 		const calendarDate = this._calendarDate; // store the _calendarDate value as this getter is expensive and degrades IE11 perf
 
+		const minDate = this._minDate;
+		const maxDate = this._maxDate;
+		const precomputedDisabledDates = this._precomputeDisabledDates();
+
 		const tempSecondDate = this.hasSecondaryCalendarType ? this._getSecondaryDay(tempDate) : undefined;
 
 		let week: Week = [];
@@ -262,7 +266,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 			const isSelectedBetween = this._isDayInsideSelectionRange(timestamp);
 			const isOtherMonth = tempDate.getMonth() !== calendarDate.getMonth();
 			const isWeekend = this._isWeekend(tempDate);
-			const isDisabled = !this._isDateEnabled(tempDate);
+			const isDisabled = !this._isDateEnabled(tempDate, minDate, maxDate, precomputedDisabledDates);
 			const isToday = tempDate.isSame(todayDate);
 			const isFirstDayOfWeek = tempDate.getDay() === firstDayOfWeek;
 
@@ -825,28 +829,47 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 			|| (iWeekendEnd < iWeekendStart && (iWeekDay >= iWeekendStart || iWeekDay <= iWeekendEnd));
 	}
 
+	/**
+	 * Pre-computes disabled date range timestamps once before the rendering loop.
+	 * Avoids repeated date string parsing inside the per-cell _isDateEnabled check.
+	 * @private
+	 */
+	_precomputeDisabledDates(): Array<{ startTimestamp: number, endTimestamp: number }> {
+		return this.disabledDates.map(range => ({
+			startTimestamp: this._getTimestampFromDateValue(range.startValue),
+			endTimestamp: this._getTimestampFromDateValue(range.endValue),
+		}));
+	}
+
 	/**
 	 * Checks if a given date is enabled (selectable).
 	 * A date is considered disabled if:
 	 * - It falls outside the min/max date range defined by the component
 	 * - It matches a single disabled date
 	 * - It falls within a disabled date range (exclusive of start and end dates)
 	 * @param date - The date to check
+	 * @param minDate - Pre-resolved min calendar date
+	 * @param maxDate - Pre-resolved max calendar date
+	 * @param precomputedDisabledDates - Pre-parsed disabled date range timestamps
 	 * @returns `true` if the date is enabled (selectable), `false` if disabled
 	 * @private
 	 */
-	_isDateEnabled(date: CalendarDate): boolean {
-		if ((this._minDate && date.isBefore(this._minDate))
-			|| (this._maxDate && date.isAfter(this._maxDate))) {
+	_isDateEnabled(date: CalendarDate, minDate?: CalendarDate, maxDate?: CalendarDate, precomputedDisabledDates?: Array<{ startTimestamp: number, endTimestamp: number }>): boolean {
+		const resolvedMin = minDate ?? this._minDate;
+		const resolvedMax = maxDate ?? this._maxDate;
+
+		if ((resolvedMin && date.isBefore(resolvedMin))
+			|| (resolvedMax && date.isAfter(resolvedMax))) {
 			return false;
 		}
 
 		const dateTimestamp = date.valueOf() / 1000;
+		const disabledRanges = precomputedDisabledDates ?? this.disabledDates.map(range => ({
+			startTimestamp: this._getTimestampFromDateValue(range.startValue),
+			endTimestamp: this._getTimestampFromDateValue(range.endValue),
+		}));
 
-		return !this.disabledDates.some(range => {
-			const startTimestamp = this._getTimestampFromDateValue(range.startValue);
-			const endTimestamp = this._getTimestampFromDateValue(range.endValue);
-
+		return !disabledRanges.some(({ startTimestamp, endTimestamp }) => {
 			if (endTimestamp) {
 				return dateTimestamp > startTimestamp && dateTimestamp < endTimestamp;
 			}