feat(datepicker): Watch for changes to disabled-dates

Author: mst101

src/components/Datepicker.vue

@@ -359,6 +359,26 @@ export default {
     },
   },
   watch: {
+    disabledDates: {
+      // eslint-disable-next-line complexity
+      handler() {
+        const selectedDate = this.selectedDate || this.parseValue(this.value)
+        if (!selectedDate) {
+          return
+        }
+
+        const isDateDisabled = this.isDateDisabled(selectedDate)
+
+        if (isDateDisabled) {
+          if (this.selectedDate) {
+            this.selectDate(null)
+          }
+        } else if (this.dateChanged(selectedDate)) {
+          this.selectDate(selectedDate)
+        }
+      },
+      deep: true,
+    },
     initialView() {
       if (this.isOpen) {
         this.setInitialView()

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -255,20 +255,17 @@ describe('Datepicker shallowMounted', () => {
     expect(wrapper.emitted('changed-decade')).toBeTruthy()
   })
 
-  it('clears date on default date disabled', async () => {
+  it('clears the date when it is disabled', async () => {
     const someDate = new Date('2021-01-15')
-    const wrapperTemp = shallowMount(Datepicker, {
-      propsData: {
-        value: someDate,
-        disabledDates: {
-          to: addDays(someDate, 1),
-        },
+
+    await wrapper.setProps({
+      value: someDate,
+      disabledDates: {
+        to: addDays(someDate, 1),
       },
     })
 
-    expect(wrapperTemp.vm.selectedDate).toEqual(null)
-
-    wrapperTemp.destroy()
+    expect(wrapper.vm.selectedDate).toBeNull()
   })
 
   it('sets the transition correctly', async () => {