feat(disabled-dates): add new prop for disabled dates

icehaunter · Jan 23, 2021 · 31a66b7 · 31a66b7
1 parent 4f5b87f
commit 31a66b7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
+.idea
 dist
-*.local
+*.local
diff --git a/README.md b/README.md
@@ -44,6 +44,7 @@ Full props documentation is available at https://icehaunter.github.io/vue3-datep
 |---|---|---|---|
 |`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
@@ -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,
     },
+    /**
+     * Dates not available 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
@@ -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
@@ -148,7 +154,7 @@ export default defineComponent({
         selected: props.selected && isSameDay(props.selected, value),
         disabled:
           !isWithinInterval(value, currentMonth.value) ||
-          !isEnabled(value, props.lowerLimit, props.upperLimit),
+          !isEnabled(value, props.lowerLimit, props.upperLimit, props.disabledDates),
         key: format.value('yyyy-MM-dd', value),
       }))
     })