feat: Range enhancements (resolves #93)

Props added:
- minRange & maxRange
- fixedStart & fixedEnd

Author: Jasenkoo

index.d.ts

@@ -184,6 +184,10 @@ interface Vue3DatePicker {
     presetRanges?: { label: string; range: Date[] | string[] }[];
     flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
     preventMinMaxNavigation?: boolean;
+    minRange?: number | string;
+    maxRange?: number | string;
+    fixedStart?: boolean;
+    fixedEnd?: boolean;
 }
 
 interface PublicMethods extends MethodOptions {

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -109,6 +109,10 @@
                     presetRanges,
                     flow,
                     preventMinMaxNavigation,
+                    minRange,
+                    maxRange,
+                    fixedStart,
+                    fixedEnd,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @close-picker="closeMenu"
@@ -276,6 +280,10 @@
         presetRanges: { type: Array as PropType<PresetRange[]>, default: () => [] },
         flow: { type: Array as PropType<Flow>, default: () => [] },
         preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
+        minRange: { type: [Number, String] as PropType<number | string>, default: null },
+        maxRange: { type: [Number, String] as PropType<number | string>, default: null },
+        fixedStart: { type: Boolean as PropType<boolean>, default: false },
+        fixedEnd: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const isOpen = ref(false);

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -286,6 +286,10 @@
         presetRanges: { type: Array as PropType<PresetRange[]>, default: () => [] },
         flow: { type: Array as PropType<Flow>, default: () => [] },
         preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
+        minRange: { type: [Number, String] as PropType<number | string>, default: null },
+        maxRange: { type: [Number, String] as PropType<number | string>, default: null },
+        fixedStart: { type: Boolean as PropType<boolean>, default: false },
+        fixedEnd: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const calendarWrapperRef = ref(null);

src/Vue3DatePicker/components/composition/calendar.ts

@@ -3,6 +3,7 @@ import {
     add,
     addDays,
     addMonths,
+    differenceInDays,
     getDay,
     getHours,
     getISOWeek,
@@ -374,6 +375,29 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
         }
     };
 
+    const checkMinMaxRange = (secondDate: Date): boolean => {
+        if (Array.isArray(modelValue.value) && modelValue.value[0]) {
+            const diff = Math.abs(differenceInDays(modelValue.value[0], secondDate));
+            if (props.minRange && props.maxRange) return diff >= +props.minRange && diff <= +props.maxRange;
+            if (props.minRange) return diff >= +props.minRange;
+            if (props.maxRange) return diff <= +props.maxRange;
+        }
+        return true;
+    };
+
+    const getRangeWithFixedDate = (date: Date): Date[] => {
+        if (Array.isArray(modelValue.value) && modelValue.value.length === 2) {
+            if (props.fixedStart && isDateAfter(date, modelValue.value[0])) {
+                return [modelValue.value[0], date];
+            }
+            if (props.fixedEnd && isDateBefore(date, modelValue.value[1])) {
+                return [date, modelValue.value[1]];
+            }
+            return modelValue.value;
+        }
+        return [];
+    };
+
     /**
      * Called when the date in the calendar is clicked
      * Do a necessary formatting and assign value to internal
@@ -398,18 +422,20 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
             }
         } else if (isNumberArray(hours.value) && isNumberArray(minutes.value) && !props.multiDates) {
             let rangeDate = modelValue.value ? (modelValue.value as Date[]).slice() : [];
-            if (rangeDate.length === 2) {
+            if (rangeDate.length === 2 && !(props.fixedStart || props.fixedEnd)) {
                 rangeDate = [];
             }
             if (props.autoRange) {
                 if (isNext) {
                     handleNextCalendarAutoRange(day.value);
                 }
                 rangeDate = [new Date(day.value), addDays(new Date(day.value), +props.autoRange)];
+            } else if (props.fixedStart || props.fixedEnd) {
+                rangeDate = getRangeWithFixedDate(new Date(day.value));
             } else {
                 if (!rangeDate[0]) {
                     rangeDate[0] = new Date(day.value);
-                } else {
+                } else if (checkMinMaxRange(new Date(day.value))) {
                     if (isDateBefore(new Date(day.value), new Date(rangeDate[0]))) {
                         rangeDate.unshift(new Date(day.value));
                     } else {

src/Vue3DatePicker/interfaces.ts

@@ -87,6 +87,10 @@ export type UseCalendar = {
     enableSeconds: boolean;
     monthChangeOnArrows: boolean;
     multiDates: boolean;
+    minRange: number | string;
+    maxRange: number | string;
+    fixedStart: boolean;
+    fixedEnd: boolean;
 } & { [key: string]: unknown };
 
 export interface UseMonthYearPick {