fix: Month year select filters available for select on arrows

Author: Jasenkoo

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-    import { computed, defineComponent, onMounted, PropType, ref, nextTick } from 'vue';
+    import { computed, defineComponent, onMounted, PropType, nextTick } from 'vue';
     import Calendar from './Calendar.vue';
 
     import { DatepickerMenuProps, IMonth, DynamicClass, FormatOptions, IDateFilter, ITimeRange } from '../interfaces';
@@ -88,20 +88,19 @@
             openOnTop: { type: Boolean as PropType<boolean>, default: false },
         },
         setup(props: DatepickerMenuProps, { emit }) {
-            const assignedFilter = ref({});
-
             onMounted(() => {
-                assignedFilter.value = Object.assign(
-                    { months: [], years: [], times: { hours: [], minutes: [] } },
-                    props.filters,
-                );
                 nextTick(() => emit('dpOpen'));
             });
 
             const mappedMonths = computed((): IMonth[] =>
                 getMonthNames(props.locale).map((month: string, i: number) => ({ text: month, value: i })),
             );
 
+            const assignedFilter = computed(
+                (): IDateFilter =>
+                    Object.assign({ months: [], years: [], times: { hours: [], minutes: [] } }, props.filters),
+            );
+
             const dpMenuClass = computed(
                 (): DynamicClass => ({
                     [props.menuClassName]: !!props.menuClassName,

src/Vue3DatePicker/components/SelectionGrid.vue

@@ -7,7 +7,7 @@
                     v-for="col in row"
                     :key="col.value"
                     @click="onClick(col.value)"
-                    :id="col.value === modelValue ? 'selection-active' : null"
+                    :id="col.value === modelValue && !disabledValues.includes(col.value) ? 'selection-active' : null"
                 >
                     <div :class="col.className">
                         {{ col.text }}

src/Vue3DatePicker/utils/hooks.ts

@@ -3,7 +3,13 @@ import { computed, ComputedRef, Ref } from 'vue';
 import { generateHours, generateMinutes, getCalendarDays } from './util';
 
 export const useMontYearPick = (props: MonthYearPickerProps, emit: VueEmit): IMonthYearHook => {
+    const months = props.months.map((month) => month.value);
+    const years = props.years.map((year) => year.value);
+    const excludedMonths = months.filter((month) => !props.filters.months.some((mon) => mon === month));
+    const excludedYears = years.filter((year) => !props.filters.years.some((yr) => yr === year));
+
     const onNext = (): void => {
+        let tempMonth;
         let month = props.month;
         let year = props.year;
         if (props.month === 11) {
@@ -12,10 +18,29 @@ export const useMontYearPick = (props: MonthYearPickerProps, emit: VueEmit): IMo
         } else {
             month += 1;
         }
+        if (props.filters.months.includes(month)) {
+            if (month === 0) {
+                month = Math.min(...excludedMonths);
+            } else {
+                month = Math.max(...excludedMonths);
+            }
+            tempMonth = month;
+        }
+        if (month === tempMonth) {
+            month = Math.min(...excludedMonths);
+            year = props.year + 1;
+        }
+        if (props.filters.years.includes(year)) {
+            const foundYear = excludedYears.find((availableYear) => availableYear > year);
+            if (foundYear) {
+                year = foundYear;
+            }
+        }
         updateMonthYear(month, year);
     };
 
     const onPrev = (): void => {
+        let tempMonth;
         let month = props.month;
         let year = props.year;
         if (props.month === 0) {
@@ -24,6 +49,24 @@ export const useMontYearPick = (props: MonthYearPickerProps, emit: VueEmit): IMo
         } else {
             month -= 1;
         }
+        if (props.filters.months.includes(month)) {
+            if (month === 11) {
+                month = Math.max(...excludedMonths);
+            } else {
+                month = Math.min(...excludedMonths);
+            }
+            tempMonth = month;
+        }
+        if (month === tempMonth) {
+            month = Math.max(...excludedMonths);
+            year = props.year - 1;
+        }
+        if (props.filters.years.includes(year)) {
+            const foundYear = excludedYears.reverse().find((availableYear) => availableYear < year);
+            if (foundYear) {
+                year = foundYear;
+            }
+        }
         updateMonthYear(month, year);
     };