vaadin · ghost · Jan 5, 2023 · Jan 6, 2023 · Jan 9, 2023 · Jan 17, 2023
diff --git a/dev/date-picker.html b/dev/date-picker.html
@@ -9,6 +9,9 @@
     <script type="module">
       import '@vaadin/date-picker';
       import '@vaadin/tooltip';
+      const isDateDisabled = (date) => !!(date?.getDay() === 0);
+      const picker = document.querySelector('vaadin-date-picker');
+      picker.isDateDisabled = isDateDisabled;
     </script>
   </head>
   <body>

diff --git a/packages/date-picker/src/vaadin-date-picker-helper.d.ts b/packages/date-picker/src/vaadin-date-picker-helper.d.ts
@@ -17,7 +17,7 @@ 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: Function | null): boolean;
 
 /**
  * Get closest date from array of dates.

diff --git a/packages/date-picker/src/vaadin-date-picker-helper.js b/packages/date-picker/src/vaadin-date-picker-helper.js
@@ -59,10 +59,12 @@ export function dateEquals(date1, date2) {
  * @param {!Date} date The date to check
  * @param {Date} min Range start
  * @param {Date} max Range end
+ * @param {function(!Date): 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) {
+  const dateIsDisabled = typeof isDateDisabled === 'function' ? isDateDisabled(date) : false;
+  return (!min || date >= min) && (!max || date <= max) && !dateIsDisabled;
 }
 
 /**

diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.d.ts b/packages/date-picker/src/vaadin-date-picker-mixin.d.ts
@@ -237,6 +237,11 @@ export declare class DatePickerMixinClass {
    */
   max: string | undefined;
 
+  /**
+   * A function that is used to determine if a date should be disabled.
+   */
+  isDateDisabled: (date: Date) => boolean;
+
   /**
    * Opens the dropdown.
    */

diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
@@ -18,7 +18,7 @@ import {
   extractDateParts,
   getAdjustedYear,
   getClosestDate,
-  parseDate,
+  parseDate
 } from './vaadin-date-picker-helper.js';
 
 /**
@@ -302,6 +302,15 @@ export const DatePickerMixin = (subclass) =>
           sync: true,
         },
 
+        /**
+         * A function that is used to determine if a date should be disabled.
+         * 
+         * @type {function(Date): boolean | undefined}
+         */
+        isDateDisabled: {
+          type: Function,
+        },
+
         /**
          * The earliest date that can be selected. All earlier dates will be disabled.
          * @type {Date | undefined}
@@ -365,7 +374,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)',
       ];
@@ -585,7 +594,7 @@ 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) {
@@ -597,7 +606,7 @@ export const DatePickerMixin = (subclass) =>
         }
       }
 
-      return inputValid && minMaxValid && inputValidity;
+      return inputValid && isDateValid && inputValidity;
     }
 
     /**
@@ -806,7 +815,7 @@ 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;
@@ -815,6 +824,7 @@ export const DatePickerMixin = (subclass) =>
         overlayContent.focusedDate = focusedDate;
         overlayContent.selectedDate = selectedDate;
         overlayContent.showWeekNumbers = showWeekNumbers;
+        overlayContent.isDateDisabled = isDateDisabled;
       }
     }
 
@@ -886,7 +896,7 @@ 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]);
     }

diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js b/packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js
@@ -107,6 +107,15 @@ export const DatePickerOverlayContentMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * A function that is used to determine if a date should be disabled.
+         * 
+         * @type {function(Date): boolean | undefined}
+         */
+        isDateDisabled: {
+          type: Function,
+        },
+
         /**
          * Input label
          */
@@ -134,9 +143,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 +312,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 +330,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;
@@ -1009,18 +1020,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 (!min || date >= min) && (!max || date <= max) && (!isDateDisabled || !isDateDisabled(date));
     }
 
     /** @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);
     }
 
     /**

diff --git a/packages/date-picker/src/vaadin-lit-month-calendar.js b/packages/date-picker/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',
@@ -102,7 +102,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
       this._weeks = this._getWeeks(this._days);
     }
 
-    if (props.has('month') || props.has('minDate') || props.has('maxDate')) {
+    if (props.has('month') || props.has('minDate') || props.has('maxDate') || props.has('isDateDisabled')) {
       this.disabled = this._isDisabled(this.month, this.minDate, this.maxDate);
     }
 

diff --git a/packages/date-picker/src/vaadin-month-calendar-mixin.js b/packages/date-picker/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 `Date` 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,

diff --git a/packages/date-picker/src/vaadin-month-calendar.js b/packages/date-picker/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) {
+  __getDayAriaDisabled(date, min, max, isDateDisabled) {
     if (date === undefined || min === undefined || max === undefined) {
       return;
     }
 
-    if (this.__isDayDisabled(date, min, max)) {
+    if (this.__isDayDisabled(date, min, max, isDateDisabled)) {
       return 'true';
     }
   }