feat: Add support for custom function in disabledDates (#60)

Author: Jasenkoo

index.d.ts

@@ -111,7 +111,7 @@ interface Vue3DatePicker {
     };
     disableMonthYearSelect?: boolean;
     yearRange?: number[];
-    disabledDates?: Date[] | string[];
+    disabledDates?: Date[] | string[] | ((date: Date) => boolean);
     inline?: boolean;
     selectText?: string;
     cancelText?: string;

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -143,6 +143,7 @@
         WeekStartStr,
         IMarker,
         ITransition,
+        IDisableDates,
     } from './interfaces';
     import { getDateHours, getDateMinutes, getDateSeconds, getDefaultPattern, isValidTime } from './utils/date-utils';
     import { getDefaultTextInputOptions, getDefaultFilters, mergeDefaultTransitions } from './utils/util';
@@ -210,7 +211,7 @@
         filters: { type: Object as PropType<IDateFilter>, default: () => ({}) },
         disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
         yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
-        disabledDates: { type: Array as PropType<Date[] | string[]>, default: () => [] },
+        disabledDates: { type: [Array, Function] as PropType<Date[] | string[] | IDisableDates>, default: () => [] },
         disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
         inline: { type: Boolean as PropType<boolean>, default: false },
         selectText: { type: String as PropType<string>, default: 'Select' },

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -92,6 +92,7 @@
         ICalendarDate,
         IDateFilter,
         IDefaultSelect,
+        IDisableDates,
         IFormat,
         IMarker,
         InternalModuleValue,
@@ -143,7 +144,7 @@
         },
         locale: { type: String as PropType<string>, default: 'en-US' },
         weekNumName: { type: String as PropType<string>, default: 'W' },
-        disabledDates: { type: Array as PropType<Date[] | string[]>, default: () => [] },
+        disabledDates: { type: [Array, Function] as PropType<Date[] | string[] | IDisableDates>, default: () => [] },
         filters: { type: Object as PropType<IDateFilter>, default: () => ({}) },
         minTime: { type: Object as PropType<ITimeValue>, default: null },
         maxTime: { type: Object as PropType<ITimeValue>, default: null },

src/Vue3DatePicker/components/composition/calendar.ts

@@ -133,7 +133,10 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
     const isDisabled = (date: Date): boolean => {
         const aboveMax = props.maxDate ? isDateAfter(date, props.maxDate) : false;
         const bellowMin = props.minDate ? isDateBefore(date, props.minDate) : false;
-        const inDisableArr = props.disabledDates.some((disabledDate: Date | string) => isDateEqual(disabledDate, date));
+        const inDisableArr =
+            typeof props.disabledDates === 'function'
+                ? props.disabledDates(date)
+                : props.disabledDates.some((disabledDate: Date | string) => isDateEqual(disabledDate, date));
         const disabledMonths = props.filters.months.length ? props.filters.months.map((month) => +month) : [];
         const inDisabledMonths = disabledMonths.includes(getDateMonth(date));
         const weekDayDisabled = props.disabledWeekDays.length

src/Vue3DatePicker/interfaces.ts

@@ -86,7 +86,7 @@ export type UseCalendar = {
     minDate: Date | string;
     filters: IDateFilter;
     yearRange: number[];
-    disabledDates: string[] | Date[];
+    disabledDates: Date[] | string[] | IDisableDates;
     autoApply: boolean;
     monthPicker: boolean;
     timePicker: boolean;
@@ -140,5 +140,5 @@ export interface ITransition {
     next: string;
     previous: string;
 }
-
+export type IDisableDates = (date: Date) => boolean;
 export type ITimeType = 'hours' | 'minutes' | 'seconds';