From 2f732de96ce8112193c2472291e3fd5ea519800e Mon Sep 17 00:00:00 2001
From: David Ethell <dethell@jhacorp.com>
Date: Thu, 5 Jan 2023 11:55:31 -0500
Subject: [PATCH 1/4] Add isDateAvailable property

---
 .../src/vaadin-date-picker-helper.d.ts        |  2 +-
 .../src/vaadin-date-picker-mixin.d.ts         |  5 +++
 .../src/vaadin-date-picker-mixin.js           | 19 +++++++++---
 .../date-picker/src/vaadin-month-calendar.js  | 31 +++++++++++++------
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/packages/date-picker/src/vaadin-date-picker-helper.d.ts b/packages/date-picker/src/vaadin-date-picker-helper.d.ts
index c42d79cdf46..38212e42cd0 100644
--- 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, isDateAvailable: Function | null): boolean;
 
 /**
  * Get closest date from array of dates.
diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.d.ts b/packages/date-picker/src/vaadin-date-picker-mixin.d.ts
index 03813a71122..95d40cb6063 100644
--- 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;
 
+  /**
+   * Function to override the default function for determining if a date is available.
+   */
+  isDateAvailable: (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
index af3721541d7..9535ce607a2 100644
--- 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}
+         */
+        isDateAvailable: {
+          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, isDateAvailable)',
         '__updateOverlayContentTheme(_overlayContent, _theme)',
         '__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
       ];
@@ -591,6 +600,7 @@ export const DatePickerMixin = (subclass) =>
       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 isDateAvailableValid = this.isDateAvailable ? this.isDateAvailable(this._selectedDate) : true;
 
       let inputValidity = true;
       if (this.inputElement) {
@@ -602,7 +612,7 @@ export const DatePickerMixin = (subclass) =>
         }
       }
 
-      return inputValid && minMaxValid && inputValidity;
+      return inputValid && minMaxValid && inputValidity && isDateAvailableValid;
     }
 
     /**
@@ -812,7 +822,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, isDateAvailable) {
       if (overlayContent) {
         overlayContent.i18n = i18n;
         overlayContent.label = label;
@@ -821,6 +831,7 @@ export const DatePickerMixin = (subclass) =>
         overlayContent.focusedDate = focusedDate;
         overlayContent.selectedDate = selectedDate;
         overlayContent.showWeekNumbers = showWeekNumbers;
+        overlayContent.isDateAvailable = isDateAvailable;
       }
     }
 
diff --git a/packages/date-picker/src/vaadin-month-calendar.js b/packages/date-picker/src/vaadin-month-calendar.js
index 1f8930c1811..eda0ebe6b21 100644
--- a/packages/date-picker/src/vaadin-month-calendar.js
+++ b/packages/date-picker/src/vaadin-month-calendar.js
@@ -48,12 +48,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, isDateAvailable)]]"
                   date="[[item]]"
                   tabindex$="[[__getDayTabindex(item, focusedDate)]]"
-                  disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
+                  disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateAvailable)]]"
                   aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
-                  aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
+                  aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate, isDateAvailable)]]"
                   aria-label$="[[__getDayAriaLabel(item)]]"
                   >[[_getDate(item)]]</td
                 >
@@ -74,7 +74,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       /** @protected */
       _days: {
         type: Array,
-        computed: '_getDays(month, i18n, minDate, maxDate)',
+        computed: '_getDays(month, i18n, minDate, maxDate, isDateAvailable)',
       },
 
       /** @protected */
@@ -86,7 +86,18 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       disabled: {
         type: Boolean,
         reflectToAttribute: true,
-        computed: '_isDisabled(month, minDate, maxDate)',
+        computed: '_isDisabled(month, minDate, maxDate, isDateAvailable)',
+      },
+
+      /**
+       * A function to be used to determine whether the user can select a given date.
+       * Receives the `Date` object of the date to be selected and should return a
+       * boolean.
+       * @type {Function | undefined}
+       */
+      isDateAvailable: {
+        type: Function,
+        value: () => true,
       },
     };
   }
@@ -105,10 +116,10 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate) {
+  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateAvailable) {
     const result = ['date'];
 
-    if (this.__isDayDisabled(date, minDate, maxDate)) {
+    if (this.__isDayDisabled(date, minDate, maxDate, isDateAvailable)) {
       result.push('disabled');
     }
 
@@ -146,16 +157,16 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   __isDayDisabled(date, minDate, maxDate) {
-    return !dateAllowed(date, minDate, maxDate);
+    return !dateAllowed(date, minDate, maxDate, isDateAvailable);
   }
 
   /** @private */
-  __getDayAriaDisabled(date, min, max) {
+  __getDayAriaDisabled(date, min, max, isDateAvailable) {
     if (date === undefined || min === undefined || max === undefined) {
       return;
     }
 
-    if (this.__isDayDisabled(date, min, max)) {
+    if (this.__isDayDisabled(date, min, max, isDateAvailable)) {
       return 'true';
     }
   }

From c90717f2ba839382f574b9669348501dbdc02517 Mon Sep 17 00:00:00 2001
From: David Ethell <dethell@jhacorp.com>
Date: Fri, 6 Jan 2023 12:59:42 -0500
Subject: [PATCH 2/4] Further changes to allow disabling arbitrary dates

Co-authored-by: A.J. Roberts <arobertsbnr@users.noreply.github.com>
---
 packages/date-picker/src/vaadin-date-picker-helper.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/date-picker/src/vaadin-date-picker-helper.js b/packages/date-picker/src/vaadin-date-picker-helper.js
index de346465f39..02945b03a48 100644
--- a/packages/date-picker/src/vaadin-date-picker-helper.js
+++ b/packages/date-picker/src/vaadin-date-picker-helper.js
@@ -61,8 +61,8 @@ export function dateEquals(date1, date2) {
  * @param {Date} max Range end
  * @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, isDateAvailable) {
+  return (!min || date >= min) && (!max || date <= max) && (!isDateAvailable || isDateAvailable(date));
 }
 
 /**

From 119e21cc918a0efdd2aeee712fa539488137e0d8 Mon Sep 17 00:00:00 2001
From: David Ethell <dethell@jhacorp.com>
Date: Mon, 9 Jan 2023 10:25:57 -0500
Subject: [PATCH 3/4] Starting to add tests for isDateAvailable changes

---
 .../src/vaadin-date-picker-helper.js           |  3 ++-
 .../test/typings/date-picker.types.ts          |  1 +
 packages/date-picker/test/validation.common.js | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/vaadin-date-picker-helper.js b/packages/date-picker/src/vaadin-date-picker-helper.js
index 02945b03a48..5ff4cded970 100644
--- a/packages/date-picker/src/vaadin-date-picker-helper.js
+++ b/packages/date-picker/src/vaadin-date-picker-helper.js
@@ -62,7 +62,8 @@ export function dateEquals(date1, date2) {
  * @return {boolean} True if the date is in the range
  */
 export function dateAllowed(date, min, max, isDateAvailable) {
-  return (!min || date >= min) && (!max || date <= max) && (!isDateAvailable || isDateAvailable(date));
+  const dateIsAvailable = isDateAvailable && typeof isDateAvailable === 'function' ? isDateAvailable(date) : true;
+  return (!min || date >= min) && (!max || date <= max) && dateIsAvailable;
 }
 
 /**
diff --git a/packages/date-picker/test/typings/date-picker.types.ts b/packages/date-picker/test/typings/date-picker.types.ts
index bb67a97c8c2..0681f981bbb 100644
--- a/packages/date-picker/test/typings/date-picker.types.ts
+++ b/packages/date-picker/test/typings/date-picker.types.ts
@@ -76,6 +76,7 @@ assertType<() => void>(datePicker.close);
 assertType<() => void>(datePicker.open);
 assertType<string | undefined>(datePicker.max);
 assertType<string | undefined>(datePicker.min);
+assertType<(date: Date) => boolean | undefined>(datePicker.isDateAvailable);
 assertType<boolean | null | undefined>(datePicker.showWeekNumbers);
 assertType<boolean | null | undefined>(datePicker.autoOpenDisabled);
 assertType<boolean | null | undefined>(datePicker.opened);
diff --git a/packages/date-picker/test/validation.common.js b/packages/date-picker/test/validation.common.js
index 84f5ddd2e66..a7ab1cbf065 100644
--- a/packages/date-picker/test/validation.common.js
+++ b/packages/date-picker/test/validation.common.js
@@ -181,6 +181,24 @@ describe('validation', () => {
       expect(datePicker.invalid).to.be.true;
     });
 
+    it('should reflect correct invalid value on value-changed eventListener when using isDateAvailable', (done) => {
+      datePicker.isDateAvailable = (date) => {
+        if (!date) {
+          return true;
+        }
+        return date.toISOString().split('T')[0] === '2017-01-02';
+      };
+      datePicker.value = '2016-01-01'; // Valid
+
+      datePicker.addEventListener('value-changed', () => {
+        expect(datePicker.invalid).to.be.equal(true);
+        done();
+      });
+
+      datePicker.open();
+      datePicker._overlayContent._selectDate(new Date('2017-01-02')); // Invalid
+    });
+
     it('should fire a validated event on validation success', () => {
       const validatedSpy = sinon.spy();
       datePicker.addEventListener('validated', validatedSpy);

From b1e9d3bb3e05db75451b28600b5b14451793c0dd Mon Sep 17 00:00:00 2001
From: David Ethell <dethell@jhacorp.com>
Date: Tue, 17 Jan 2023 17:10:14 -0500
Subject: [PATCH 4/4] Add validation and disabled tests

---
 packages/date-picker/test/month-calendar.common.js | 14 ++++++++++++++
 packages/date-picker/test/validation.common.js     |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/test/month-calendar.common.js b/packages/date-picker/test/month-calendar.common.js
index 12e07bd5056..4550259028e 100644
--- a/packages/date-picker/test/month-calendar.common.js
+++ b/packages/date-picker/test/month-calendar.common.js
@@ -134,6 +134,20 @@ describe('vaadin-month-calendar', () => {
     const date10 = getDateCells(monthCalendar).find((dateElement) => dateElement.date.getDate() === 10);
     tap(date10);
     expect(monthCalendar.selectedDate).to.be.undefined;
+
+    monthCalendar.isDateAvailable = (date) => {
+      if (!date) {
+        return false;
+      }
+      return date.toISOString().split('T')[0] !== '2016-02-09';
+    };
+    for (let i = 0; i < dateElements.length; i++) {
+      if (dateElements[i].date.getDate() === 9) {
+        // Ninth of February.
+        tap(dateElements[i]);
+      }
+    }
+    expect(monthCalendar.selectedDate).to.be.undefined;
   });
 
   describe('i18n', () => {
diff --git a/packages/date-picker/test/validation.common.js b/packages/date-picker/test/validation.common.js
index a7ab1cbf065..c6e173a2a52 100644
--- a/packages/date-picker/test/validation.common.js
+++ b/packages/date-picker/test/validation.common.js
@@ -186,7 +186,7 @@ describe('validation', () => {
         if (!date) {
           return true;
         }
-        return date.toISOString().split('T')[0] === '2017-01-02';
+        return date.toISOString().split('T')[0] !== '2017-01-02';
       };
       datePicker.value = '2016-01-01'; // Valid