@vaadin/date-picker 25.3.0-alpha2 → 25.3.0-dev.3a3c2d7d2a

package/src/vaadin-date-picker-overlay-content-mixin.js

@@ -106,6 +106,37 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           type: Function,
         },
 
+        /**
+         * A batch function that is consulted for a range of dates the calendar is about to render
+         * and returns, or resolves with, an array of `DatePickerDate` objects to disable.
+         *
+         * @type {function(DatePickerDateRange): Array<DatePickerDate> | Promise<Array<DatePickerDate>> | undefined}
+         */
+        disabledDatesProvider: {
+          type: Function,
+        },
+
+        /**
+         * Reflected while data is being loaded, so the overlay can show a loading spinner.
+         * Currently set while the disabled dates provider is resolving.
+         */
+        loading: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Bumped whenever the disabled dates controller's cache or loading state changes, to
+         * re-run `__updateCalendars` and push the new state to the rendered months.
+         * @private
+         */
+        _disabledDatesVersion: {
+          type: Number,
+          value: 0,
+          attribute: false,
+        },
+
         enteredDate: {
           type: Date,
           sync: true,
@@ -138,9 +169,10 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled, enteredDate)',
+        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled, _disabledDatesVersion, enteredDate)',
+        '__loadingChanged(loading)',
         '__updateCancelButton(_cancelButton, i18n)',
-        '__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled)',
+        '__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled, _disabledDatesVersion)',
         '__updateYears(years, selectedDate, _theme)',
       ];
     }
@@ -299,6 +331,17 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __loadingChanged(loading) {
+      // Mark the calendar region as busy while data is being loaded so assistive technology knows
+      // the content is still updating.
+      if (loading) {
+        this.setAttribute('aria-busy', 'true');
+      } else {
+        this.removeAttribute('aria-busy');
+      }
+    }
+
     // eslint-disable-next-line @typescript-eslint/max-params
     __updateCalendars(
       calendars,
@@ -311,6 +354,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       ignoreTaps,
       theme,
       isDateDisabled,
+      disabledDatesVersion,
       enteredDate,
     ) {
       if (calendars?.length) {
@@ -319,6 +363,8 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           calendar.minDate = minDate;
           calendar.maxDate = maxDate;
           calendar.isDateDisabled = isDateDisabled;
+          calendar.disabledDatesController = this._disabledDatesController;
+          calendar.__disabledDatesVersion = disabledDatesVersion;
           calendar.focusedDate = focusedDate;
           calendar.selectedDate = selectedDate;
           calendar.showWeekNumbers = showWeekNumbers;
@@ -331,7 +377,46 @@ export const DatePickerOverlayContentMixin = (superClass) =>
             calendar.removeAttribute('theme');
           }
         });
+
+        this.__ensureVisibleDisabledDatesLoaded();
+      }
+    }
+
+    /**
+     * Asks the disabled dates controller to load the range of months currently rendered by the
+     * scroller. The controller expands the range with a prefetch buffer and skips months that are
+     * already loaded or in flight, so one request covers the whole visible range.
+     * @private
+     */
+    __ensureVisibleDisabledDatesLoaded() {
+      const controller = this._disabledDatesController;
+      if (!controller?.provider || !this.calendars || this.calendars.length === 0) {
+        return;
       }
+      const indexes = this.calendars
+        .map((calendar) => calendar.month)
+        .filter(Boolean)
+        .map((month) => month.getFullYear() * 12 + month.getMonth());
+      if (indexes.length === 0) {
+        return;
+      }
+      const min = Math.min(...indexes);
+      const max = Math.max(...indexes);
+      controller.ensureRangeLoaded(
+        new Date(Math.floor(min / 12), min % 12, 1),
+        new Date(Math.floor(max / 12), max % 12, 1),
+      );
+    }
+
+    /**
+     * Debounced variant used on scroll, so a continuous scroll only triggers one load once it
+     * settles instead of a request per intermediate position.
+     * @private
+     */
+    __scheduleVisibleDisabledDatesLoad() {
+      this._loadDisabledDatesDebouncer = Debouncer.debounce(this._loadDisabledDatesDebouncer, timeOut.after(200), () =>
+        this.__ensureVisibleDisabledDatesLoaded(),
+      );
     }
 
     /** @private */
@@ -357,6 +442,11 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       if (!this._dateAllowed(dateToSelect)) {
         return false;
       }
+      // Block dates disabled by the provider, or in a month whose provider result has not loaded
+      // yet, so they cannot be selected via keyboard or the today button either.
+      if (this._disabledDatesController?.isDateBlocked(dateToSelect)) {
+        return false;
+      }
       this.selectedDate = dateToSelect;
       this.dispatchEvent(
         new CustomEvent('date-selected', { detail: { date: dateToSelect }, bubbles: true, composed: true }),
@@ -452,12 +542,17 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       const monthPosition = this._monthScroller.position;
       this._visibleMonthIndex = Math.floor(monthPosition);
       this._yearScroller.position = (monthPosition + this._originDate.getMonth()) / 12;
+      // Called from every navigation path (month scroll, year click, reveal), so this is the
+      // single place to keep the disabled dates loaded for the newly visible months. Debounced
+      // so a continuous scroll only triggers one load once it settles.
+      this.__scheduleVisibleDisabledDatesLoad();
     }
 
     /** @private */
     _repositionMonthScroller() {
       this._monthScroller.position = this._yearScroller.position * 12 - this._originDate.getMonth();
       this._visibleMonthIndex = Math.floor(this._monthScroller.position);
+      this.__scheduleVisibleDisabledDatesLoad();
     }
 
     /** @private */
@@ -831,6 +926,33 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       this.focusDate(getClosestDate(focus, [this.minDate, this.maxDate]));
     }
 
+    /**
+     * Returns the nearest date to the given one that can actually be selected: inside min/max, not
+     * disabled by `isDateDisabled`, and not disabled by a resolved `disabledDatesProvider`. Scans a
+     * year in both directions and returns `undefined` if none is found, so the caller can leave the
+     * focus untouched.
+     * @private
+     */
+    __closestSelectableDate(date) {
+      const controller = this._disabledDatesController;
+      const isSelectable = (candidate) =>
+        this._dateAllowed(candidate) && !(controller?.provider && controller.isDateDisabled(candidate));
+
+      if (isSelectable(date)) {
+        return date;
+      }
+      for (let offset = 1; offset <= 366; offset++) {
+        for (const direction of [1, -1]) {
+          const candidate = new Date(date);
+          candidate.setDate(candidate.getDate() + offset * direction);
+          if (isSelectable(candidate)) {
+            return candidate;
+          }
+        }
+      }
+      return undefined;
+    }
+
     /** @private */
     _focusAllowedDate(dateToFocus, diff, keepMonth) {
       // For this check we do consider the isDateDisabled function because disabled dates are allowed to be focused, just not outside min/max
@@ -918,7 +1040,12 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @private */
     _isTodayAllowed(min, max, isDateDisabled) {
-      return this._dateAllowed(this._getTodayMidnight(), min, max, isDateDisabled);
+      const today = this._getTodayMidnight();
+      if (!this._dateAllowed(today, min, max, isDateDisabled)) {
+        return false;
+      }
+      // Today is not selectable while it is disabled by the provider or its month is still loading.
+      return !this._disabledDatesController?.isDateBlocked(today);
     }
 
     /** @private */

package/src/vaadin-date-picker-overlay-content.js

@@ -12,6 +12,7 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { loaderStyles } from '@vaadin/component-base/src/styles/loader-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { overlayContentStyles } from './styles/vaadin-date-picker-overlay-content-base-styles.js';
@@ -30,7 +31,7 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
   }
 
   static get styles() {
-    return overlayContentStyles;
+    return [loaderStyles, overlayContentStyles];
   }
 
   static get lumoInjector() {
@@ -43,6 +44,8 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
       <slot name="months"></slot>
       <slot name="years"></slot>
 
+      <div part="loader" aria-hidden="true"></div>
+
       <div role="toolbar" part="toolbar">
         <slot name="today-button"></slot>
         <div

package/src/vaadin-date-picker.d.ts

@@ -7,7 +7,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js';
+export { DatePickerDate, DatePickerDateRange, DatePickerI18n } from './vaadin-date-picker-mixin.js';
 
 /**
  * Fired when the user commits a value change.

package/src/vaadin-date-picker.js

@@ -92,6 +92,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * ----------------------|--------------------
  * `years-toggle-button` | Fullscreen mode years scroller toggle
  * `toolbar`             | Toolbar with slotted buttons
+ * `loader`              | Loading spinner shown while data is being loaded, for example while the disabled dates provider resolves
  *
  * The following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:
  *
@@ -100,6 +101,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * `desktop`       | Set when the overlay content is in desktop mode
  * `fullscreen`    | Set when the overlay content is in fullscreen mode
  * `years-visible` | Set when the year scroller is visible in fullscreen mode
+ * `loading`       | Set while data is being loaded, for example while the disabled dates provider resolves
  *
  * In order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:
  *
@@ -112,6 +114,7 @@ import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
  * `week-number`         | Week number element
  * `date`                | Date element
  * `disabled`            | Disabled date element
+ * `pending`             | Date element in a month whose disabled dates provider result is still loading
  * `focused`             | Focused date element
  * `selected`            | Selected date element
  * `today`               | Date element corresponding to the current day

package/src/vaadin-disabled-dates-controller.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { DatePickerDate, DatePickerDateRange } from './vaadin-date-picker-mixin.js';
+
+export type DisabledDatesProvider = (range: DatePickerDateRange) => DatePickerDate[] | Promise<DatePickerDate[]>;
+
+/**
+ * A reactive controller that resolves the dates disabled by the date-picker's
+ * `disabledDatesProvider`. It calls the provider once for a range of months,
+ * caches the resolved months so scrolling back and forth does not re-fetch,
+ * and prefetches a buffer of months around the requested range.
+ */
+export declare class DisabledDatesController implements ReactiveController {
+  constructor(host: ReactiveControllerHost, onChange: () => void);
+
+  /**
+   * The provider function, or `null` when none is set.
+   */
+  provider: DisabledDatesProvider | null;
+
+  /**
+   * Whether any month range is currently being fetched.
+   */
+  readonly loading: boolean;
+
+  hostDisconnected(): void;
+
+  /**
+   * Sets the provider function and clears the cache. Passing the same provider
+   * again is a no-op. Callers should keep a stable provider reference.
+   */
+  setProvider(provider: DisabledDatesProvider | null | undefined): void;
+
+  /**
+   * Clears the cache and invalidates any in-flight requests.
+   */
+  reset(): void;
+
+  /**
+   * Whether the month containing the given date has been fully resolved.
+   */
+  isMonthLoaded(date: Date): boolean;
+
+  /**
+   * Whether the given date is disabled by the provider. Only returns `true` for
+   * dates in an already-resolved month.
+   */
+  isDateDisabled(date: Date): boolean;
+
+  /**
+   * Whether the given date cannot be selected yet: it is disabled by the
+   * provider, or its month has not been resolved. Returns `false` when no
+   * provider is set.
+   */
+  isDateBlocked(date: Date): boolean;
+
+  /**
+   * Ensures the provider has been consulted for the inclusive range between the
+   * given dates, expanded by a prefetch buffer of months on each side.
+   */
+  ensureRangeLoaded(startDate: Date, endDate: Date): void;
+}

package/src/vaadin-disabled-dates-controller.js

@@ -0,0 +1,241 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { extractDateParts } from './vaadin-date-picker-helper.js';
+
+/**
+ * Number of months fetched before and after the requested range, so that
+ * scrolling a few months in either direction does not trigger a new request.
+ * Mirrors how the grid prefetches rows around the viewport.
+ */
+const PREFETCH_MONTHS = 6;
+
+function monthKey(date) {
+  return `${date.getFullYear()}-${date.getMonth()}`;
+}
+
+function dateKey(date) {
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+
+function firstOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function lastOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+
+function addMonths(date, months) {
+  return new Date(date.getFullYear(), date.getMonth() + months, 1);
+}
+
+/**
+ * A reactive controller that resolves the dates disabled by the date-picker's
+ * `disabledDatesProvider`. It calls the provider once for a range of months
+ * (never one date at a time), caches the resolved months so scrolling back and
+ * forth does not re-fetch them, and prefetches a buffer of months around the
+ * requested range. While any request is in flight, {@link #loading} is `true`
+ * so the overlay can show a spinner.
+ *
+ * The provider may return an array synchronously or a `Promise`, so results
+ * from a server (Flow) or a remote availability service can be awaited.
+ */
+export class DisabledDatesController {
+  constructor(host, onChange) {
+    this.host = host;
+    this.__onChange = onChange;
+    this.provider = null;
+    this.__disabledDates = new Set();
+    this.__loadedMonths = new Set();
+    this.__pendingMonths = new Set();
+    this.__requestId = 0;
+  }
+
+  hostDisconnected() {
+    // Invalidate in-flight requests so their late results don't touch a
+    // detached host, and drop the pending (loading) state. The resolved cache
+    // is kept so reopening the overlay does not re-fetch.
+    this.__requestId += 1;
+    this.__pendingMonths = new Set();
+  }
+
+  /**
+   * Whether any month range is currently being fetched.
+   * @return {boolean}
+   */
+  get loading() {
+    return this.__pendingMonths.size > 0;
+  }
+
+  /**
+   * Sets the provider function and clears the cache. Passing the same provider
+   * again is a no-op, so the cache survives unrelated re-renders — callers
+   * should therefore keep a stable provider reference rather than passing a new
+   * function on every update, which would otherwise reset the cache and
+   * re-fetch every visible range.
+   */
+  setProvider(provider) {
+    if (this.provider === provider) {
+      return;
+    }
+    this.provider = provider;
+    this.reset();
+  }
+
+  /** Clears the cache and invalidates any in-flight requests. */
+  reset() {
+    this.__disabledDates = new Set();
+    this.__loadedMonths = new Set();
+    this.__pendingMonths = new Set();
+    this.__requestId += 1;
+    this.__notify();
+  }
+
+  /**
+   * Whether the month containing the given date has been fully resolved.
+   * @param {Date} date
+   * @return {boolean}
+   */
+  isMonthLoaded(date) {
+    return this.__loadedMonths.has(monthKey(date));
+  }
+
+  /**
+   * Whether the given date is disabled by the provider. Only returns `true` for
+   * dates in an already-resolved month.
+   * @param {Date} date
+   * @return {boolean}
+   */
+  isDateDisabled(date) {
+    return !!date && this.__disabledDates.has(dateKey(date));
+  }
+
+  /**
+   * Whether the given date cannot be selected yet: it is disabled by the
+   * provider, or its month has not been resolved so its state is still unknown.
+   * Returns `false` when no provider is set. Used to block selection and to
+   * render dates as non-selectable while their month is loading.
+   * @param {Date} date
+   * @return {boolean}
+   */
+  isDateBlocked(date) {
+    return !!this.provider && !!date && (this.isDateDisabled(date) || !this.isMonthLoaded(date));
+  }
+
+  /**
+   * Ensures the provider has been consulted for the inclusive range between the
+   * given dates, expanded by a prefetch buffer of months on each side. Months
+   * that are already loaded or in flight are skipped, and consecutive missing
+   * months are grouped into a single provider call.
+   *
+   * @param {Date} startDate
+   * @param {Date} endDate
+   */
+  ensureRangeLoaded(startDate, endDate) {
+    if (!this.provider || !startDate || !endDate) {
+      return;
+    }
+
+    const first = addMonths(firstOfMonth(startDate), -PREFETCH_MONTHS);
+    const last = addMonths(firstOfMonth(endDate), PREFETCH_MONTHS);
+
+    const monthsToLoad = [];
+    for (let month = first; month <= last; month = addMonths(month, 1)) {
+      const key = monthKey(month);
+      if (!this.__loadedMonths.has(key) && !this.__pendingMonths.has(key)) {
+        monthsToLoad.push(new Date(month));
+      }
+    }
+
+    if (monthsToLoad.length === 0) {
+      return;
+    }
+
+    this.__groupConsecutiveMonths(monthsToLoad).forEach((group) => this.__loadGroup(group));
+  }
+
+  /** @private */
+  __groupConsecutiveMonths(months) {
+    const groups = [];
+    months.forEach((month) => {
+      const group = groups.at(-1);
+      const previous = group?.at(-1);
+      if (previous && monthKey(addMonths(previous, 1)) === monthKey(month)) {
+        group.push(month);
+      } else {
+        groups.push([month]);
+      }
+    });
+    return groups;
+  }
+
+  /** @private */
+  __loadGroup(months) {
+    const requestId = this.__requestId;
+    months.forEach((month) => this.__pendingMonths.add(monthKey(month)));
+    this.__notify();
+
+    const range = {
+      start: extractDateParts(firstOfMonth(months[0])),
+      end: extractDateParts(lastOfMonth(months[months.length - 1])),
+    };
+
+    let result;
+    try {
+      result = this.provider(range);
+    } catch (error) {
+      // Treat a throwing provider the same as a rejected promise: clear the
+      // pending state and disable nothing, rather than letting the error
+      // propagate out of the scroll/render path that triggered the load.
+      console.error(error);
+      this.__resolveGroup(months, [], requestId);
+      return;
+    }
+
+    if (result && typeof result.then === 'function') {
+      result.then(
+        (dates) => this.__resolveGroup(months, dates, requestId),
+        (error) => {
+          console.error(error);
+          this.__resolveGroup(months, [], requestId);
+        },
+      );
+    } else {
+      this.__resolveGroup(months, result, requestId);
+    }
+  }
+
+  /** @private */
+  __resolveGroup(months, dates, requestId) {
+    // Ignore results from before the last reset (e.g. provider changed).
+    if (requestId !== this.__requestId) {
+      return;
+    }
+
+    if (Array.isArray(dates)) {
+      dates.forEach((date) => {
+        if (date) {
+          this.__disabledDates.add(`${date.year}-${date.month}-${date.day}`);
+        }
+      });
+    }
+
+    months.forEach((month) => {
+      const key = monthKey(month);
+      this.__pendingMonths.delete(key);
+      this.__loadedMonths.add(key);
+    });
+
+    this.__notify();
+  }
+
+  /** @private */
+  __notify() {
+    if (this.__onChange) {
+      this.__onChange();
+    }
+  }
+}

package/src/vaadin-month-calendar-mixin.js

@@ -87,6 +87,28 @@ export const MonthCalendarMixin = (superClass) =>
           value: () => false,
         },
 
+        /**
+         * The shared controller that resolves and caches the dates disabled by the date-picker's
+         * `disabledDatesProvider`. Set by the overlay content; used to look up the disabled state
+         * of this month's dates.
+         * @type {object | undefined}
+         * @private
+         */
+        disabledDatesController: {
+          type: Object,
+          attribute: false,
+        },
+
+        /**
+         * Bumped by the overlay content whenever the controller's cache or loading state changes,
+         * to trigger a re-render of this month.
+         * @private
+         */
+        __disabledDatesVersion: {
+          type: Number,
+          attribute: false,
+        },
+
         enteredDate: {
           type: Date,
         },
@@ -100,7 +122,8 @@ export const MonthCalendarMixin = (superClass) =>
         /** @protected */
         _days: {
           type: Array,
-          computed: '__computeDays(month, i18n, minDate, maxDate, isDateDisabled)',
+          computed:
+            '__computeDays(month, i18n, minDate, maxDate, isDateDisabled, disabledDatesController, __disabledDatesVersion)',
         },
 
         /** @protected */
@@ -345,6 +368,10 @@ export const MonthCalendarMixin = (superClass) =>
         result.push('disabled');
       }
 
+      if (date && this.__isMonthLoading()) {
+        result.push('pending');
+      }
+
       if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
         result.push('focused');
       }
@@ -378,9 +405,24 @@ export const MonthCalendarMixin = (superClass) =>
       return String(this.__isDaySelected(date, selectedDate));
     }
 
+    /**
+     * Whether the provider result for the currently displayed month is still pending. The overlay
+     * drives loading for the whole visible range; here we only reflect the controller's state.
+     * @private
+     */
+    __isMonthLoading() {
+      const controller = this.disabledDatesController;
+      return !!controller?.provider && this.month !== undefined && !controller.isMonthLoaded(this.month);
+    }
+
     /** @private */
     __isDayDisabled(date, minDate, maxDate, isDateDisabled) {
-      return !dateAllowed(date, minDate, maxDate, isDateDisabled);
+      if (!dateAllowed(date, minDate, maxDate, isDateDisabled)) {
+        return true;
+      }
+      // A date is blocked while its month is pending (whole month non-selectable) or once the
+      // resolved provider result marks it disabled.
+      return !!this.disabledDatesController?.isDateBlocked(date);
     }
 
     /** @private */