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

package/custom-elements.json

@@ -513,6 +513,16 @@
                 "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disabledDatesProvider",
+              "privacy": "public",
+              "type": {
+                "text": "function(DatePickerDateRange): Array<DatePickerDate> | Promise<Array<DatePickerDate>> | undefined"
+              },
+              "description": "A batch function that is consulted for a range of dates that the calendar is about\nto render. It receives a `DatePickerDateRange` object (`{ start, end }` of\n`DatePickerDate`) and returns, or resolves with, an array of `DatePickerDate` objects\nthat should be disabled within that range.\n\nUnlike `isDateDisabled`, which is called once per date, this function is called for a\nrange of dates at a time, and again as the calendar renders further dates. The size of\nthe range is decided by the calendar and may span multiple months. It may return a\n`Promise`, in which case the affected dates render in a non-selectable pending state\nuntil it resolves.\n\nDates disabled by this function are combined with `min`, `max` and `isDateDisabled`:\na date is disabled if it is out of the min/max range, or `isDateDisabled` returns\n`true`, or it is included in this function's result.\n\nKeep a stable reference to the function. Assigning a new function resets the internal\ncache and re-fetches every visible range.",
+              "attribute": "disabled-dates-provider"
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -895,6 +905,16 @@
               },
               "attribute": "calendars"
             },
+            {
+              "kind": "field",
+              "name": "disabledDatesProvider",
+              "privacy": "public",
+              "type": {
+                "text": "function(DatePickerDateRange): Array<DatePickerDate> | Promise<Array<DatePickerDate>> | undefined"
+              },
+              "description": "A batch function that is consulted for a range of dates the calendar is about to render\nand returns, or resolves with, an array of `DatePickerDate` objects to disable.",
+              "attribute": "disabled-dates-provider"
+            },
             {
               "kind": "field",
               "name": "enteredDate",
@@ -982,6 +1002,16 @@
               "description": "Input label",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "loading",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Reflected while data is being loaded, so the overlay can show a loading spinner.\nCurrently set while the disabled dates provider is resolving.",
+              "attribute": "loading"
+            },
             {
               "kind": "field",
               "name": "maxDate",
@@ -1125,6 +1155,14 @@
               "description": "Input label",
               "fieldName": "label"
             },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Reflected while data is being loaded, so the overlay can show a loading spinner.\nCurrently set while the disabled dates provider is resolving.",
+              "fieldName": "loading"
+            },
             {
               "name": "scroll-duration",
               "type": {
@@ -1683,7 +1721,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button`      | The toggle button\n`backdrop`           | Backdrop of the overlay\n`overlay`            | The overlay container\n`content`            | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`opened`             | Set when the overlay is opened\n`week-numbers`       | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The label element\n`input-field`        | The element that wraps prefix, value and buttons\n`field-button`       | Set on both clear and toggle buttons\n`clear-button`       | The clear button\n`error-message`      | The error message element\n`helper-text`        | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button`      | The toggle button\n`backdrop`           | Backdrop of the overlay\n`overlay`            | The overlay container\n`content`            | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`has-value`          | Set when the element has a value\n`has-label`          | Set when the element has a label\n`has-helper`         | Set when the element has helper text or slot\n`has-error-message`  | Set when the element has an error message\n`has-tooltip`        | Set when the element has a slotted tooltip\n`invalid`            | Set when the element is invalid\n`focused`            | Set when the element is focused\n`focus-ring`         | Set when the element is keyboard focused\n`readonly`           | Set when the element is readonly\n`opened`             | Set when the overlay is opened\n`week-numbers`       | Set when week numbers are shown in the calendar\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Toolbar with slotted buttons\n`loader`              | Loading spinner shown while data is being loaded, for example while the disabled dates provider resolves\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n`loading`       | Set while data is being loaded, for example while the disabled dates provider resolves\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`pending`             | Date element in a month whose disabled dates provider result is still loading\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change",
           "name": "DatePicker",
           "members": [
             {
@@ -1830,6 +1868,20 @@
                 "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disabledDatesProvider",
+              "privacy": "public",
+              "type": {
+                "text": "function(DatePickerDateRange): Array<DatePickerDate> | Promise<Array<DatePickerDate>> | undefined"
+              },
+              "description": "A batch function that is consulted for a range of dates that the calendar is about\nto render. It receives a `DatePickerDateRange` object (`{ start, end }` of\n`DatePickerDate`) and returns, or resolves with, an array of `DatePickerDate` objects\nthat should be disabled within that range.\n\nUnlike `isDateDisabled`, which is called once per date, this function is called for a\nrange of dates at a time, and again as the calendar renders further dates. The size of\nthe range is decided by the calendar and may span multiple months. It may return a\n`Promise`, in which case the affected dates render in a non-selectable pending state\nuntil it resolves.\n\nDates disabled by this function are combined with `min`, `max` and `isDateDisabled`:\na date is disabled if it is out of the min/max range, or `isDateDisabled` returns\n`true`, or it is included in this function's result.\n\nKeep a stable reference to the function. Assigning a new function resets the internal\ncache and re-fetches every visible range.",
+              "attribute": "disabled-dates-provider",
+              "inheritedFrom": {
+                "name": "DatePickerMixin",
+                "module": "src/vaadin-date-picker-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "errorMessage",
@@ -2517,6 +2569,145 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-disabled-dates-controller.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A reactive controller that resolves the dates disabled by the date-picker's\n`disabledDatesProvider`. It calls the provider once for a range of months\n(never one date at a time), caches the resolved months so scrolling back and\nforth does not re-fetch them, and prefetches a buffer of months around the\nrequested range. While any request is in flight, #loading is `true`\nso the overlay can show a spinner.\n\nThe provider may return an array synchronously or a `Promise`, so results\nfrom a server (Flow) or a remote availability service can be awaited.",
+          "name": "DisabledDatesController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "ensureRangeLoaded",
+              "parameters": [
+                {
+                  "name": "startDate",
+                  "type": {
+                    "text": "Date"
+                  }
+                },
+                {
+                  "name": "endDate",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "Ensures the provider has been consulted for the inclusive range between the\ngiven dates, expanded by a prefetch buffer of months on each side. Months\nthat are already loaded or in flight are skipped, and consecutive missing\nmonths are grouped into a single provider call."
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "host"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "isDateBlocked",
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "Whether the given date cannot be selected yet: it is disabled by the\nprovider, or its month has not been resolved so its state is still unknown.\nReturns `false` when no provider is set. Used to block selection and to\nrender dates as non-selectable while their month is loading.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isDateDisabled",
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "Whether the given date is disabled by the provider. Only returns `true` for\ndates in an already-resolved month.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isMonthLoaded",
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "description": "Whether the month containing the given date has been fully resolved.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "description": "Whether any month range is currently being fetched.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "provider",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "reset",
+              "description": "Clears the cache and invalidates any in-flight requests."
+            },
+            {
+              "kind": "method",
+              "name": "setProvider",
+              "parameters": [
+                {
+                  "name": "provider"
+                }
+              ],
+              "description": "Sets the provider function and clears the cache. Passing the same provider\nagain is a no-op, so the cache survives unrelated re-renders — callers\nshould therefore keep a stable provider reference rather than passing a new\nfunction on every update, which would otherwise reset the cache and\nre-fetch every visible range."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DisabledDatesController",
+          "declaration": {
+            "name": "DisabledDatesController",
+            "module": "src/vaadin-disabled-dates-controller.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-month-calendar-mixin.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "25.3.0-alpha2",
+  "version": "25.3.0-dev.3a3c2d7d2a",
   "publishConfig": {
     "access": "public"
   },
@@ -35,21 +35,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha2",
-    "@vaadin/button": "25.3.0-alpha2",
-    "@vaadin/component-base": "25.3.0-alpha2",
-    "@vaadin/field-base": "25.3.0-alpha2",
-    "@vaadin/input-container": "25.3.0-alpha2",
-    "@vaadin/overlay": "25.3.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha2",
+    "@vaadin/a11y-base": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/button": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/field-base": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/input-container": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/overlay": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha2",
-    "@vaadin/chai-plugins": "25.3.0-alpha2",
-    "@vaadin/test-runner-commands": "25.3.0-alpha2",
+    "@vaadin/aura": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/chai-plugins": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/test-runner-commands": "25.3.0-dev.3a3c2d7d2a",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-dev.3a3c2d7d2a",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "52eba6153ecf8bfaae44bcb727595e77d90b963c"
+  "gitHead": "ac506ca7800c23e05da55863c56bcedf12812d37"
 }

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

@@ -17,6 +17,7 @@ export const overlayContentStyles = css`
     height: 100%;
     outline: none;
     overflow: hidden;
+    position: relative;
   }
 
   :host([desktop]) {
@@ -49,6 +50,17 @@ export const overlayContentStyles = css`
     display: none !important;
   }
 
+  /* Loading spinner shown while data is being loaded (currently while the disabled dates provider
+     resolves). Positioned over the month scroller, which paints its own transformed layers, so
+     grid stacking is not enough. */
+  [part='loader'] {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: var(--vaadin-date-picker-month-header-font-size, 0.9375rem);
+    inset-inline: 0;
+    margin-inline: auto;
+  }
+
   ::slotted([slot='months']) {
     --vaadin-infinite-scroller-item-height: round(
       var(--vaadin-date-picker-month-header-font-size, 0.9375rem) + 0.75rem +

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

@@ -18,6 +18,17 @@ export interface DatePickerDate {
   year: number;
 }
 
+export interface DatePickerDateRange {
+  /**
+   * The first date of the range (inclusive).
+   */
+  start: DatePickerDate;
+  /**
+   * The last date of the range (inclusive).
+   */
+  end: DatePickerDate;
+}
+
 export interface DatePickerI18n {
   /**
    * An array with the full names of months starting
@@ -236,6 +247,23 @@ export declare class DatePickerMixinClass {
    */
   isDateDisabled: (date: DatePickerDate) => boolean;
 
+  /**
+   * A batch function that is consulted for a range of dates that the calendar is about to
+   * render. It receives a `DatePickerDateRange` object and returns, or resolves with, an array
+   * of `DatePickerDate` objects that should be disabled within that range.
+   *
+   * Unlike `isDateDisabled`, which is called once per date, this function is called for a range
+   * of dates at a time, and again as the calendar renders further dates. The size of the range
+   * is decided by the calendar and may span multiple months. It may return a `Promise`, in which
+   * case the affected dates render in a non-selectable pending state until it resolves.
+   *
+   * Dates disabled by this function are combined with `min`, `max` and `isDateDisabled`.
+   *
+   * Keep a stable reference to the function. Assigning a new function resets the internal cache
+   * and re-fetches every visible range.
+   */
+  disabledDatesProvider: (range: DatePickerDateRange) => DatePickerDate[] | Promise<DatePickerDate[]>;
+
   /**
    * Opens the dropdown.
    */

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

@@ -21,6 +21,7 @@ import {
   getClosestDate,
   parseDate,
 } from './vaadin-date-picker-helper.js';
+import { DisabledDatesController } from './vaadin-disabled-dates-controller.js';
 
 export const datePickerI18nDefaults = Object.freeze({
   monthNames: [
@@ -208,6 +209,31 @@ export const DatePickerMixin = (subclass) =>
           type: Function,
         },
 
+        /**
+         * A batch function that is consulted for a range of dates that the calendar is about
+         * to render. It receives a `DatePickerDateRange` object (`{ start, end }` of
+         * `DatePickerDate`) and returns, or resolves with, an array of `DatePickerDate` objects
+         * that should be disabled within that range.
+         *
+         * Unlike `isDateDisabled`, which is called once per date, this function is called for a
+         * range of dates at a time, and again as the calendar renders further dates. The size of
+         * the range is decided by the calendar and may span multiple months. It may return a
+         * `Promise`, in which case the affected dates render in a non-selectable pending state
+         * until it resolves.
+         *
+         * Dates disabled by this function are combined with `min`, `max` and `isDateDisabled`:
+         * a date is disabled if it is out of the min/max range, or `isDateDisabled` returns
+         * `true`, or it is included in this function's result.
+         *
+         * Keep a stable reference to the function. Assigning a new function resets the internal
+         * cache and re-fetches every visible range.
+         *
+         * @type {function(DatePickerDateRange): Array<DatePickerDate> | Promise<Array<DatePickerDate>> | undefined}
+         */
+        disabledDatesProvider: {
+          type: Function,
+        },
+
         /**
          * The earliest date that can be selected. All earlier dates will be disabled.
          * @type {Date | undefined}
@@ -261,7 +287,8 @@ export const DatePickerMixin = (subclass) =>
       return [
         '_selectedDateChanged(_selectedDate, __effectiveI18n)',
         '_focusedDateChanged(_focusedDate, __effectiveI18n)',
-        '__updateOverlayContent(_overlayContent, __effectiveI18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled, __enteredDate)',
+        '__updateOverlayContent(_overlayContent, __effectiveI18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled, disabledDatesProvider, __enteredDate)',
+        '__disabledDatesProviderChanged(disabledDatesProvider)',
         '__updateOverlayContentTheme(_overlayContent, _theme)',
         '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
@@ -437,6 +464,13 @@ export const DatePickerMixin = (subclass) =>
 
       this.addController(new VirtualKeyboardController(this));
 
+      // Owns the cache of dates resolved by `disabledDatesProvider`. It lives on the date-picker
+      // rather than the overlay content so validation works even when the overlay is never opened.
+      // The open overlay reads the same controller to render months and show the loading spinner.
+      this._disabledDatesController = new DisabledDatesController(this, () => this.__onDisabledDatesChanged());
+      this.addController(this._disabledDatesController);
+      this._disabledDatesController.setProvider(this.disabledDatesProvider);
+
       this._overlayElement = this.$.overlay;
     }
 
@@ -578,7 +612,9 @@ export const DatePickerMixin = (subclass) =>
       const inputValue = this._inputElementValue;
       const inputValid = !inputValue || (!!this._selectedDate && inputValue === this.__formatDate(this._selectedDate));
       const isDateValid =
-        !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate, this.isDateDisabled);
+        !this._selectedDate ||
+        (dateAllowed(this._selectedDate, this._minDate, this._maxDate, this.isDateDisabled) &&
+          !this.__isDateDisabledByProvider(this._selectedDate));
 
       let inputValidity = true;
       if (this.inputElement && this.inputElement.checkValidity) {
@@ -588,6 +624,93 @@ export const DatePickerMixin = (subclass) =>
       return inputValid && isDateValid && inputValidity;
     }
 
+    /**
+     * Returns true if the given date is known to be disabled by `disabledDatesProvider`. The
+     * result comes from the controller's cache of already-loaded ranges. The month containing a
+     * selected date is loaded on demand (see `_selectedDateChanged`), so a value typed while the
+     * overlay is closed is re-validated once the provider answers (see `__onDisabledDatesChanged`).
+     * Until then the date is treated as allowed, matching the overlay's rendering.
+     * @private
+     */
+    __isDateDisabledByProvider(date) {
+      const controller = this._disabledDatesController;
+      return !!controller && !!controller.provider && controller.isDateDisabled(date);
+    }
+
+    /** @private */
+    __disabledDatesProviderChanged(disabledDatesProvider) {
+      // The controller is created in `ready()`; `setProvider` is called there for the initial value.
+      if (this._disabledDatesController) {
+        this._disabledDatesController.setProvider(disabledDatesProvider);
+        this.__ensureSelectedDateLoaded();
+      }
+    }
+
+    /**
+     * Asks the controller to resolve the month containing the selected date, so that a value set
+     * or typed while the overlay is closed can be validated against the provider without opening
+     * the overlay. When the month resolves, `__onDisabledDatesChanged` re-runs validation.
+     * @private
+     */
+    __ensureSelectedDateLoaded() {
+      const controller = this._disabledDatesController;
+      if (controller?.provider && this._selectedDate && !controller.isMonthLoaded(this._selectedDate)) {
+        this.__awaitingProviderValidation = true;
+        controller.ensureRangeLoaded(this._selectedDate, this._selectedDate);
+      }
+    }
+
+    /** @private */
+    __onDisabledDatesChanged() {
+      const controller = this._disabledDatesController;
+      // Push the new loading and cache state to the open overlay so it re-renders the months and
+      // updates the spinner. When the overlay is closed there is nothing to update.
+      if (this._overlayContent) {
+        this._overlayContent.loading = controller.loading;
+        this._overlayContent._disabledDatesVersion += 1;
+      }
+      // Re-validate once the month containing the selected value has resolved, so a value typed
+      // while the picker was closed (autoOpenDisabled) is rejected as soon as the provider answers.
+      if (this.__awaitingProviderValidation && this._selectedDate && controller.isMonthLoaded(this._selectedDate)) {
+        this.__awaitingProviderValidation = false;
+        this._requestValidation();
+      }
+
+      this.__adjustInitialFocusForProvider();
+    }
+
+    /**
+     * Moves the overlay's initial focus off a date the provider turns out to disable, once the
+     * provider has answered for that month. Only touches the auto-picked initial date and only
+     * while the user has not navigated away, so disabled dates the user focuses on purpose (which
+     * stay keyboard-focusable) are left alone.
+     * @private
+     */
+    __adjustInitialFocusForProvider() {
+      const content = this._overlayContent;
+      const controller = this._disabledDatesController;
+      const initial = this.__initialFocusDate;
+      if (!content || !initial || !controller.provider) {
+        return;
+      }
+      // The user has moved focus; stop trying to adjust the initial date.
+      if (!dateEquals(content.focusedDate, initial)) {
+        this.__initialFocusDate = null;
+        return;
+      }
+      // Wait until the provider has answered for the initial month.
+      if (!controller.isMonthLoaded(initial)) {
+        return;
+      }
+      this.__initialFocusDate = null;
+      if (controller.isDateDisabled(initial)) {
+        const closest = content.__closestSelectableDate(initial);
+        if (closest) {
+          content.focusDate(closest);
+        }
+      }
+    }
+
     /**
      * Override method inherited from `FocusMixin`
      * to not call `_setFocused(true)` when focus
@@ -771,6 +894,10 @@ export const DatePickerMixin = (subclass) =>
         this._applyInputValue(selectedDate);
       }
 
+      // Preload the provider's answer for the selected month so the value can be validated even
+      // when the overlay is never opened.
+      this.__ensureSelectedDateLoaded();
+
       this.value = this._formatISO(selectedDate);
       this._ignoreFocusedDateChange = true;
       this._focusedDate = selectedDate;
@@ -842,9 +969,13 @@ export const DatePickerMixin = (subclass) =>
       selectedDate,
       showWeekNumbers,
       isDateDisabled,
+      disabledDatesProvider,
       enteredDate,
     ) {
       if (overlayContent) {
+        // Share the date-picker's controller so the overlay renders from the same cache that
+        // validation uses. Assigned before the other properties, which trigger `__updateCalendars`.
+        overlayContent._disabledDatesController = this._disabledDatesController;
         overlayContent.i18n = effectiveI18n;
         overlayContent.label = label;
         overlayContent.minDate = minDate;
@@ -853,6 +984,7 @@ export const DatePickerMixin = (subclass) =>
         overlayContent.selectedDate = selectedDate;
         overlayContent.showWeekNumbers = showWeekNumbers;
         overlayContent.isDateDisabled = isDateDisabled;
+        overlayContent.disabledDatesProvider = disabledDatesProvider;
         overlayContent.enteredDate = enteredDate;
       }
     }
@@ -901,6 +1033,12 @@ export const DatePickerMixin = (subclass) =>
       content.focusedDate = scrollFocusDate;
       this._ignoreFocusedDateChange = false;
 
+      // When opening without a selected value, remember the auto-picked initial date so it can be
+      // moved off a provider-disabled date once the provider answers (see __onDisabledDatesChanged).
+      // A date the user selected themselves is left in place even if the provider disables it.
+      this.__initialFocusDate = this._selectedDate ? null : scrollFocusDate;
+      this.__adjustInitialFocusForProvider();
+
       window.addEventListener('scroll', this._boundOnScroll, true);
 
       if (this._focusOverlayOnOpen) {
@@ -964,6 +1102,8 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _onOverlayClosed() {
+      this.__initialFocusDate = null;
+
       // Reset `aria-hidden` state.
       if (this.__showOthers) {
         this.__showOthers();