@vaadin/date-picker 24.4.0-alpha4 → 24.4.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.4.0-alpha4",
+  "version": "24.4.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -36,15 +36,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.4.0-alpha4",
-    "@vaadin/button": "24.4.0-alpha4",
-    "@vaadin/component-base": "24.4.0-alpha4",
-    "@vaadin/field-base": "24.4.0-alpha4",
-    "@vaadin/input-container": "24.4.0-alpha4",
-    "@vaadin/overlay": "24.4.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha4",
+    "@vaadin/a11y-base": "24.4.0-alpha6",
+    "@vaadin/button": "24.4.0-alpha6",
+    "@vaadin/component-base": "24.4.0-alpha6",
+    "@vaadin/field-base": "24.4.0-alpha6",
+    "@vaadin/input-container": "24.4.0-alpha6",
+    "@vaadin/overlay": "24.4.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha6",
+    "@vaadin/vaadin-material-styles": "24.4.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha6",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "3f23b333c5e4dd06f3c6a6b2505a0efcd0814b05"
+  "gitHead": "7d555ad342715966005883fafcd20001425a6d8c"
 }

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

@@ -17,7 +17,12 @@ declare function dateEquals(date1: Date | null, date2: Date | null): boolean;
  *
  * @returns True if the date is in the range
  */
-declare function dateAllowed(date: Date, min: Date | null, max: Date | null): boolean;
+declare function dateAllowed(
+  date: Date,
+  min: Date | null,
+  max: Date | null,
+  isDateDisabled: (DatePickerDate) => boolean | null,
+): boolean;
 
 /**
  * Get closest date from array of dates.

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

@@ -53,16 +53,37 @@ export function dateEquals(date1, date2) {
   );
 }
 
+/**
+ * Extracts the basic component parts of a date (day, month and year)
+ * to the expected format.
+ * @param {!Date} date
+ * @return {{day: number, month: number, year: number}}
+ */
+export function extractDateParts(date) {
+  return {
+    day: date.getDate(),
+    month: date.getMonth(),
+    year: date.getFullYear(),
+  };
+}
+
 /**
  * Check if the given date is in the range of allowed dates.
  *
  * @param {!Date} date The date to check
  * @param {Date} min Range start
  * @param {Date} max Range end
+ * @param {function(!DatePickerDate): boolean} isDateDisabled Callback to check if the date is disabled
  * @return {boolean} True if the date is in the range
  */
-export function dateAllowed(date, min, max) {
-  return (!min || date >= min) && (!max || date <= max);
+export function dateAllowed(date, min, max, isDateDisabled) {
+  let dateIsDisabled = false;
+  if (typeof isDateDisabled === 'function' && !!date) {
+    const dateToCheck = extractDateParts(date);
+    dateIsDisabled = isDateDisabled(dateToCheck);
+  }
+
+  return (!min || date >= min) && (!max || date <= max) && !dateIsDisabled;
 }
 
 /**
@@ -90,20 +111,6 @@ export function getClosestDate(date, dates) {
     });
 }
 
-/**
- * Extracts the basic component parts of a date (day, month and year)
- * to the expected format.
- * @param {!Date} date
- * @return {{day: number, month: number, year: number}}
- */
-export function extractDateParts(date) {
-  return {
-    day: date.getDate(),
-    month: date.getMonth(),
-    year: date.getFullYear(),
-  };
-}
-
 /**
  * Get difference in months between today and given months value.
  *

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

@@ -237,6 +237,13 @@ export declare class DatePickerMixinClass {
    */
   max: string | undefined;
 
+  /**
+   * A function to be used to determine whether the user can select a given date.
+   * Receives a `DatePickerDate` object of the date to be selected and should return a
+   * boolean.
+   */
+  isDateDisabled: (date: DatePickerDate) => boolean;
+
   /**
    * Opens the dropdown.
    */

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

@@ -302,6 +302,17 @@ export const DatePickerMixin = (subclass) =>
           sync: true,
         },
 
+        /**
+         * A function to be used to determine whether the user can select a given date.
+         * Receives a `DatePickerDate` object of the date to be selected and should return a
+         * boolean.
+         *
+         * @type {function(DatePickerDate): boolean | undefined}
+         */
+        isDateDisabled: {
+          type: Function,
+        },
+
         /**
          * The earliest date that can be selected. All earlier dates will be disabled.
          * @type {Date | undefined}
@@ -365,7 +376,7 @@ export const DatePickerMixin = (subclass) =>
       return [
         '_selectedDateChanged(_selectedDate, i18n)',
         '_focusedDateChanged(_focusedDate, i18n)',
-        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers)',
+        '__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled)',
         '__updateOverlayContentTheme(_overlayContent, _theme)',
         '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
@@ -601,7 +612,8 @@ export const DatePickerMixin = (subclass) =>
     checkValidity() {
       const inputValue = this._inputElementValue;
       const inputValid = !inputValue || (!!this._selectedDate && inputValue === this.__formatDate(this._selectedDate));
-      const minMaxValid = !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate);
+      const isDateValid =
+        !this._selectedDate || dateAllowed(this._selectedDate, this._minDate, this._maxDate, this.isDateDisabled);
 
       let inputValidity = true;
       if (this.inputElement) {
@@ -613,7 +625,7 @@ export const DatePickerMixin = (subclass) =>
         }
       }
 
-      return inputValid && minMaxValid && inputValidity;
+      return inputValid && isDateValid && inputValidity;
     }
 
     /**
@@ -852,7 +864,17 @@ export const DatePickerMixin = (subclass) =>
 
     /** @private */
     // eslint-disable-next-line max-params
-    __updateOverlayContent(overlayContent, i18n, label, minDate, maxDate, focusedDate, selectedDate, showWeekNumbers) {
+    __updateOverlayContent(
+      overlayContent,
+      i18n,
+      label,
+      minDate,
+      maxDate,
+      focusedDate,
+      selectedDate,
+      showWeekNumbers,
+      isDateDisabled,
+    ) {
       if (overlayContent) {
         overlayContent.i18n = i18n;
         overlayContent.label = label;
@@ -861,6 +883,7 @@ export const DatePickerMixin = (subclass) =>
         overlayContent.focusedDate = focusedDate;
         overlayContent.selectedDate = selectedDate;
         overlayContent.showWeekNumbers = showWeekNumbers;
+        overlayContent.isDateDisabled = isDateDisabled;
       }
     }
 
@@ -932,9 +955,11 @@ export const DatePickerMixin = (subclass) =>
       const initialPosition =
         this._selectedDate || this._overlayContent.initialPosition || parsedInitialPosition || new Date();
 
-      return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate)
+      return parsedInitialPosition || dateAllowed(initialPosition, this._minDate, this._maxDate, this.isDateDisabled)
         ? initialPosition
-        : getClosestDate(initialPosition, [this._minDate, this._maxDate]);
+        : this._minDate || this._maxDate
+        ? getClosestDate(initialPosition, [this._minDate, this._maxDate])
+        : new Date();
     }
 
     /**

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

@@ -10,7 +10,13 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { dateAfterXMonths, dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
+import {
+  dateAfterXMonths,
+  dateAllowed,
+  dateEquals,
+  extractDateParts,
+  getClosestDate,
+} from './vaadin-date-picker-helper.js';
 
 /**
  * @polymerMixin
@@ -107,6 +113,17 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * A function to be used to determine whether the user can select a given date.
+         * Receives a `DatePickerDate` object of the date to be selected and should return a
+         * boolean.
+         *
+         * @type {function(DatePickerDate): boolean | undefined}
+         */
+        isDateDisabled: {
+          type: Function,
+        },
+
         /**
          * Input label
          */
@@ -134,9 +151,9 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme)',
+        '__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled)',
         '__updateCancelButton(_cancelButton, i18n)',
-        '__updateTodayButton(_todayButton, i18n, minDate, maxDate)',
+        '__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled)',
         '__updateYears(years, selectedDate, _theme)',
       ];
     }
@@ -303,10 +320,10 @@ export const DatePickerOverlayContentMixin = (superClass) =>
     }
 
     /** @private */
-    __updateTodayButton(todayButton, i18n, minDate, maxDate) {
+    __updateTodayButton(todayButton, i18n, minDate, maxDate, isDateDisabled) {
       if (todayButton) {
         todayButton.textContent = i18n && i18n.today;
-        todayButton.disabled = !this._isTodayAllowed(minDate, maxDate);
+        todayButton.disabled = !this._isTodayAllowed(minDate, maxDate, isDateDisabled);
       }
     }
 
@@ -321,12 +338,14 @@ export const DatePickerOverlayContentMixin = (superClass) =>
       showWeekNumbers,
       ignoreTaps,
       theme,
+      isDateDisabled,
     ) {
       if (calendars && calendars.length) {
         calendars.forEach((calendar) => {
           calendar.i18n = i18n;
           calendar.minDate = minDate;
           calendar.maxDate = maxDate;
+          calendar.isDateDisabled = isDateDisabled;
           calendar.focusedDate = focusedDate;
           calendar.selectedDate = selectedDate;
           calendar.showWeekNumbers = showWeekNumbers;
@@ -361,10 +380,14 @@ export const DatePickerOverlayContentMixin = (superClass) =>
      * @protected
      */
     _selectDate(dateToSelect) {
+      if (!this._dateAllowed(dateToSelect)) {
+        return false;
+      }
       this.selectedDate = dateToSelect;
       this.dispatchEvent(
         new CustomEvent('date-selected', { detail: { date: dateToSelect }, bubbles: true, composed: true }),
       );
+      return true;
     }
 
     /** @private */
@@ -775,9 +798,10 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           handled = true;
           break;
         case 'Enter':
-          this._selectDate(this.focusedDate);
-          this._close();
-          handled = true;
+          if (this._selectDate(this.focusedDate)) {
+            this._close();
+            handled = true;
+          }
           break;
         case ' ':
           this.__toggleDate(this.focusedDate);
@@ -931,7 +955,8 @@ export const DatePickerOverlayContentMixin = (superClass) =>
 
     /** @private */
     _focusAllowedDate(dateToFocus, diff, keepMonth) {
-      if (this._dateAllowed(dateToFocus)) {
+      // For this check we do consider the isDateDisabled function because disabled dates are allowed to be focused, just not outside min/max
+      if (this._dateAllowed(dateToFocus, undefined, undefined, () => false)) {
         this.focusDate(dateToFocus, keepMonth);
       } else if (this._dateAllowed(this.focusedDate)) {
         // Move to min or max date
@@ -1009,18 +1034,18 @@ export const DatePickerOverlayContentMixin = (superClass) =>
     }
 
     /** @private */
-    _dateAllowed(date, min = this.minDate, max = this.maxDate) {
-      return (!min || date >= min) && (!max || date <= max);
+    _dateAllowed(date, min = this.minDate, max = this.maxDate, isDateDisabled = this.isDateDisabled) {
+      return dateAllowed(date, min, max, isDateDisabled);
     }
 
     /** @private */
-    _isTodayAllowed(min, max) {
+    _isTodayAllowed(min, max, isDateDisabled) {
       const today = new Date();
       const todayMidnight = new Date(0, 0);
       todayMidnight.setFullYear(today.getFullYear());
       todayMidnight.setMonth(today.getMonth());
       todayMidnight.setDate(today.getDate());
-      return this._dateAllowed(todayMidnight, min, max);
+      return this._dateAllowed(todayMidnight, min, max, isDateDisabled);
     }
 
     /**

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

@@ -61,7 +61,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
                 ${week.map((date) => {
                   const isFocused = dateEquals(date, this.focusedDate);
                   const isSelected = dateEquals(date, this.selectedDate);
-                  const isDisabled = !dateAllowed(date, this.minDate, this.maxDate);
+                  const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);
 
                   const parts = [
                     'date',

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

@@ -80,6 +80,17 @@ export const MonthCalendarMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * A function to be used to determine whether the user can select a given date.
+         * Receives a `DatePickerDate` object of the date to be selected and should return a
+         * boolean.
+         * @type {Function | undefined}
+         */
+        isDateDisabled: {
+          type: Function,
+          value: () => false,
+        },
+
         disabled: {
           type: Boolean,
           reflectToAttribute: true,

package/src/vaadin-month-calendar.js

@@ -50,12 +50,12 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
               <template is="dom-repeat" items="[[week]]">
                 <td
                   role="gridcell"
-                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate)]]"
+                  part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled)]]"
                   date="[[item]]"
                   tabindex$="[[__getDayTabindex(item, focusedDate)]]"
-                  disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
+                  disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
                   aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
-                  aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
+                  aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]"
                   aria-label$="[[__getDayAriaLabel(item)]]"
                   >[[_getDate(item)]]</td
                 >
@@ -76,7 +76,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       /** @protected */
       _days: {
         type: Array,
-        computed: '_getDays(month, i18n, minDate, maxDate)',
+        computed: '_getDays(month, i18n, minDate, maxDate, isDateDisabled)',
       },
 
       /** @protected */
@@ -107,10 +107,10 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
+  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
     const result = ['date'];
 
-    if (this.__isDayDisabled(date, minDate, maxDate)) {
+    if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
       result.push('disabled');
     }
 
@@ -147,17 +147,17 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  __isDayDisabled(date, minDate, maxDate) {
-    return !dateAllowed(date, minDate, maxDate);
+  __isDayDisabled(date, minDate, maxDate, isDateDisabled) {
+    return !dateAllowed(date, minDate, maxDate, isDateDisabled);
   }
 
   /** @private */
-  __getDayAriaDisabled(date, min, max) {
-    if (date === undefined || min === undefined || max === undefined) {
+  __getDayAriaDisabled(date, min, max, isDateDisabled) {
+    if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
       return;
     }
 
-    if (this.__isDayDisabled(date, min, max)) {
+    if (this.__isDayDisabled(date, min, max, isDateDisabled)) {
       return 'true';
     }
   }

package/theme/lumo/vaadin-date-picker-light.d.ts

@@ -0,0 +1,4 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import '../../src/vaadin-date-picker-light.js';

package/theme/lumo/vaadin-date-picker-overlay-content-styles.d.ts

@@ -0,0 +1,7 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import './vaadin-date-picker-year-styles.js';

package/theme/lumo/vaadin-date-picker-overlay-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';

package/theme/lumo/vaadin-date-picker-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';

package/theme/lumo/vaadin-date-picker-year-styles.d.ts

@@ -0,0 +1 @@
+import '@vaadin/vaadin-lumo-styles/color.js';

package/theme/lumo/vaadin-date-picker.d.ts

@@ -0,0 +1,5 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import './vaadin-date-picker-styles.js';
+import '../../src/vaadin-date-picker.js';

package/theme/lumo/vaadin-lit-date-picker.d.ts

@@ -0,0 +1,5 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import './vaadin-date-picker-styles.js';
+import '../../src/vaadin-lit-date-picker.js';

package/theme/lumo/vaadin-month-calendar-styles.d.ts

@@ -0,0 +1,5 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/material/vaadin-date-picker-light.d.ts

@@ -0,0 +1,4 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import '../../src/vaadin-date-picker-light.js';

package/theme/material/vaadin-date-picker-overlay-content-styles.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import '@vaadin/vaadin-material-styles/shadow.js';
+import '@vaadin/button/theme/material/vaadin-button-styles.js';
+import './vaadin-date-picker-year-styles.js';

package/theme/material/vaadin-date-picker-overlay-styles.d.ts

@@ -0,0 +1 @@
+export {};

package/theme/material/vaadin-date-picker-styles.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';

package/theme/material/vaadin-date-picker-year-styles.d.ts

@@ -0,0 +1 @@
+import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-date-picker.d.ts

@@ -0,0 +1,5 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import './vaadin-date-picker-styles.js';
+import '../../src/vaadin-date-picker.js';

package/theme/material/vaadin-lit-date-picker.d.ts

@@ -0,0 +1,5 @@
+import './vaadin-date-picker-overlay-styles.js';
+import './vaadin-date-picker-overlay-content-styles.js';
+import './vaadin-month-calendar-styles.js';
+import './vaadin-date-picker-styles.js';
+import '../../src/vaadin-lit-date-picker.js';

package/theme/material/vaadin-month-calendar-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/typography.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.4.0-alpha4",
+  "version": "24.4.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -298,6 +298,16 @@
                   ]
                 }
               },
+              {
+                "name": "isDateDisabled",
+                "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
+                "value": {
+                  "type": [
+                    "function DatePickerDate: boolean",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "attrForValue",
                 "description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",
@@ -334,7 +344,7 @@
         },
         {
           "name": "vaadin-date-picker",
-          "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```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\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-overlay).\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- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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```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\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-overlay).\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- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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",
           "attributes": [
             {
               "name": "disabled",
@@ -878,6 +888,16 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "isDateDisabled",
+                "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
+                "value": {
+                  "type": [
+                    "function DatePickerDate: boolean",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.4.0-alpha4",
+  "version": "24.4.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -68,6 +68,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?isDateDisabled",
+              "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".value",
               "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
@@ -156,7 +163,7 @@
         },
         {
           "name": "vaadin-date-picker",
-          "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```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\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-overlay).\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- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha4/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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```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\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-overlay).\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- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha6/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar 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\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\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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",
           "extension": true,
           "attributes": [
             {
@@ -229,6 +236,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?isDateDisabled",
+              "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".label",
               "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",