From b147d9b4dd5b9f6adef3945ef7f7e2cfb341451c Mon Sep 17 00:00:00 2001
From: Vladimir Litvinov <vlitvinov@dealersocket.com>
Date: Tue, 19 Jan 2021 16:52:51 +0200
Subject: [PATCH] feat(disabled-dates): add new props for disabled dates

---
 .gitignore                    |  3 ++-
 README.md                     |  1 +
 src/datepicker/Datepicker.vue |  8 ++++++++
 src/datepicker/DayPicker.vue  | 12 +++++++++---
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index e42754a..bc2fdaa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
+.idea
 dist
-*.local
\ No newline at end of file
+*.local
diff --git a/README.md b/README.md
index 5b9fd0d..7b02fb0 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ Main interaction to date selection is done via `v-model` with `Date` as expected
 |---|---|---|---|
 |`upperLimit`|`Date`||Upper limit for available dates for picking|
 |`lowerLimit`|`Date`||Lower limit for available dates for picking|
+|`disabledDates`|`{ dates: Date[] }`||Dates not available for picking|
 |`startingView`| `'day' \| 'month' \| 'year'` | `'day'` |View on which the date picker should open. Can be either `year`, `month`, or `day` |
 | `monthHeadingFormat` | `String` | `LLLL yyyy` | `date-fns`-type formatting for a month view heading
 | `weekdayFormat` | `String` | `EE` | `date-fns`-type formatting for a line of weekdays on day view
diff --git a/src/datepicker/Datepicker.vue b/src/datepicker/Datepicker.vue
index bcd12d7..5e309cb 100644
--- a/src/datepicker/Datepicker.vue
+++ b/src/datepicker/Datepicker.vue
@@ -38,6 +38,7 @@
       :weekStartsOn="weekStartsOn"
       :lowerLimit="lowerLimit"
       :upperLimit="upperLimit"
+      :disabledDates="disabledDates"
       :locale="locale"
       :weekdayFormat="weekdayFormat"
       @select="selectDay"
@@ -71,6 +72,13 @@ export default defineComponent({
       type: Date as PropType<Date>,
       required: false,
     },
+    /**
+     * Disabled dates for picking
+     */
+    disabledDates: {
+      type: Object as PropType<{ dates: Date[] | undefined }>,
+      required: false,
+    },
     /**
      * Upper limit for available dates for picking
      */
diff --git a/src/datepicker/DayPicker.vue b/src/datepicker/DayPicker.vue
index db74db9..dbbc9fc 100644
--- a/src/datepicker/DayPicker.vue
+++ b/src/datepicker/DayPicker.vue
@@ -91,6 +91,10 @@ export default defineComponent({
       type: Date as PropType<Date>,
       required: false,
     },
+    disabledDates: {
+      type: Object as PropType<{ dates: Date[] | undefined }>,
+      required: false,
+    },
   },
   setup(props, { emit }) {
     const format = computed(() =>
@@ -132,8 +136,10 @@ export default defineComponent({
     const isEnabled = (
       target: Date,
       lower: Date | undefined,
-      upper: Date | undefined
+      upper: Date | undefined,
+      disabledDates: { dates: Date[] | undefined } | undefined
     ): boolean => {
+      if (disabledDates?.dates?.some(date => isSameDay(target, date))) return false
       if (!lower && !upper) return true
       if (lower && isBefore(target, startOfDay(lower))) return false
       if (upper && isAfter(target, endOfDay(upper))) return false
@@ -147,8 +153,8 @@ export default defineComponent({
         display: dayFormat(value),
         selected: props.selected && isSameDay(props.selected, value),
         disabled:
-          !isWithinInterval(value, currentMonth.value) ||
-          !isEnabled(value, props.lowerLimit, props.upperLimit),
+            !isWithinInterval(value, currentMonth.value) ||
+            !isEnabled(value, props.lowerLimit, props.upperLimit, props.disabledDates),
         key: format.value('yyyy-MM-dd', value),
       }))
     })