feat: Add option to reverse years order (resolves #113)

Vuepic · Mar 5, 2022 · 793bcef · 793bcef
1 parent d41da66
commit 793bcef
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -192,6 +192,7 @@ interface Vue3DatePicker {
     fixedEnd?: boolean;
     utc?: boolean;
     multiDatesLimit?: number | string;
+    reverseYears?: boolean;
 }
 
 interface PublicMethods extends MethodOptions {

diff --git a/src/Vue3DatePicker/Vue3DatePicker.vue b/src/Vue3DatePicker/Vue3DatePicker.vue
@@ -114,6 +114,7 @@
                     fixedStart,
                     fixedEnd,
                     multiDatesLimit,
+                    reverseYears,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @close-picker="closeMenu"
@@ -289,6 +290,7 @@
         fixedEnd: { type: Boolean as PropType<boolean>, default: false },
         utc: { type: Boolean as PropType<boolean>, default: false },
         multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
+        reverseYears: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const isOpen = ref(false);

diff --git a/src/Vue3DatePicker/components/DatepickerMenu.vue b/src/Vue3DatePicker/components/DatepickerMenu.vue
@@ -53,6 +53,7 @@
                                 preventMinMaxNavigation,
                                 internalModelValue,
                                 range,
+                                reverseYears,
                             }"
                             @mount="childMount('monthYearInput')"
                             @reset-flow="resetFlow"
@@ -296,6 +297,7 @@
         fixedStart: { type: Boolean as PropType<boolean>, default: false },
         fixedEnd: { type: Boolean as PropType<boolean>, default: false },
         multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
+        reverseYears: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const calendarWrapperRef = ref(null);

diff --git a/src/Vue3DatePicker/components/MonthYearInput.vue b/src/Vue3DatePicker/components/MonthYearInput.vue
@@ -204,6 +204,7 @@
         preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
         internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
         range: { type: Boolean as PropType<boolean>, default: false },
+        reverseYears: { type: Boolean as PropType<boolean>, default: false },
     });
 
     const { transitionName, showTransition } = useTransitions();
@@ -255,7 +256,8 @@
         const list = [];
 
         for (let i = 0; i < items.length; i += 3) {
-            list.push([items[i], items[i + 1], items[i + 2]]);
+            const listItems = [items[i], items[i + 1], items[i + 2]];
+            list.push(props.reverseYears ? listItems.reverse() : listItems);
         }
         return list;
     };
@@ -271,7 +273,8 @@
     });
 
     const groupedYears = computed((): IDefaultSelect[][] => {
-        return getGroupedList(props.years);
+        const list = getGroupedList(props.years);
+        return props.reverseYears ? list.reverse() : list;
     });
 
     const showLeftIcon = computed(() => {