feat: Two calendars with independent behaviour option

- Improvements in range marking
- Spacing between calendars
- Prevent marking offset dates when two calendars are enabled

Author: Jasenkoo

index.d.ts

@@ -9,6 +9,7 @@ interface Vue3DatePicker {
     enableTimePicker?: boolean;
     range?: boolean;
     twoCalendars?: boolean;
+    twoCalendarsSolo?: boolean;
     modelValue?:
         | Date
         | Date[]

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -77,6 +77,7 @@
                     noToday,
                     noHoursOverlay,
                     noMinutesOverlay,
+                    twoCalendarsSolo,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @closePicker="closeMenu"
@@ -126,6 +127,7 @@
         locale: { type: String as PropType<string>, default: 'en-US' },
         range: { type: Boolean as PropType<boolean>, default: false },
         twoCalendars: { type: Boolean as PropType<boolean>, default: false },
+        twoCalendarsSolo: { type: Boolean as PropType<boolean>, default: false },
         modelValue: { type: [String, Date, Array, Object] as PropType<ModelValue>, default: null },
         position: { type: String as PropType<OpenPosition>, default: OpenPosition.center },
         placeholder: { type: String as PropType<string>, default: null },

src/Vue3DatePicker/components/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dp__calendar">
+    <div :class="calendarParentClass">
         <div :class="contentWrapClass">
             <component
                 :is="monthYearComponent ? monthYearComponent : MonthYearInput"
@@ -13,6 +13,7 @@
                     year,
                     customProps,
                     twoCalendars,
+                    twoCalendarsSolo,
                     instance,
                 }"
                 @update:month="$emit('update:month', $event)"
@@ -134,6 +135,7 @@
         year: { type: Number as PropType<number>, default: 0 },
         noHoursOverlay: { type: Boolean as PropType<boolean>, default: false },
         noMinutesOverlay: { type: Boolean as PropType<boolean>, default: false },
+        twoCalendarsSolo: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
 
@@ -154,6 +156,11 @@
         }),
     );
 
+    const calendarParentClass = computed(() => ({
+        dp__calendar: true,
+        dp__calendar_next: props.instance === 2,
+    }));
+
     // Wrapper class for the wrapper div
     const contentWrapClass = computed(
         (): DynamicClass => ({

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -109,6 +109,7 @@
         yearRange: { type: Array as PropType<number[]>, default: () => [1970, 2100] },
         range: { type: Boolean as PropType<boolean>, default: false },
         twoCalendars: { type: Boolean as PropType<boolean>, default: false },
+        twoCalendarsSolo: { type: Boolean as PropType<boolean>, default: false },
         calendarCellClassName: { type: String as PropType<string>, default: null },
         enableTimePicker: { type: Boolean as PropType<boolean>, default: false },
         is24: { type: Boolean as PropType<boolean>, default: true },
@@ -262,6 +263,7 @@
         years: years.value,
         noHoursOverlay: props.noHoursOverlay,
         noMinutesOverlay: props.noMinutesOverlay,
+        twoCalendarsSolo: props.twoCalendarsSolo,
     }));
 
     const dpMenuClass = computed(
@@ -281,11 +283,17 @@
                     calendarDay.classData = {
                         dp__cell_offset: !calendarDay.current,
                         dp__pointer: !disabled && !(!calendarDay.current && props.hideOffsetDates),
-                        dp__active_date: isActiveDate(calendarDay),
+                        dp__active_date: props.range ? false : isActiveDate(calendarDay),
                         dp__date_hover:
-                            !disabled && !isActiveDate(calendarDay) && !(!calendarDay.current && props.hideOffsetDates),
+                            !disabled &&
+                            !isActiveDate(calendarDay) &&
+                            !(!calendarDay.current && props.hideOffsetDates) &&
+                            (props.range
+                                ? !rangeActiveStartEnd(calendarDay) && !rangeActiveStartEnd(calendarDay, false)
+                                : true),
                         dp__range_between:
                             props.range &&
+                            (props.twoCalendars ? calendarDay.current : true) &&
                             !disabled &&
                             !(!calendarDay.current && props.hideOffsetDates) &&
                             !isActiveDate(calendarDay)
@@ -296,8 +304,12 @@
                         dp__cell_auto_range: isAutoRangeInBetween(calendarDay),
                         dp__cell_auto_range_start: isAutoRangeStart(calendarDay),
                         dp__cell_auto_range_end: isHoverRangeEnd(calendarDay),
-                        dp__range_start: rangeActiveStartEnd(calendarDay),
-                        dp__range_end: rangeActiveStartEnd(calendarDay, false),
+                        dp__range_start: props.twoCalendars
+                            ? calendarDay.current && rangeActiveStartEnd(calendarDay)
+                            : rangeActiveStartEnd(calendarDay),
+                        dp__range_end: props.twoCalendars
+                            ? calendarDay.current && rangeActiveStartEnd(calendarDay, false)
+                            : rangeActiveStartEnd(calendarDay, false),
                         [props.calendarCellClassName]: !!props.calendarCellClassName,
                     };
                     return calendarDay;

src/Vue3DatePicker/components/MonthYearInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="dp__month_year_row">
         <template v-if="!monthPicker">
-            <div class="dp__month_year_col_nav" @click="onPrev">
+            <div class="dp__month_year_col_nav" @click="onPrev" v-if="showLeftIcon">
                 <div class="dp__inner_nav">
                     <slot name="arrow-left" v-if="$slots['arrow-left']" />
                     <ChevronLeftIcon v-if="!$slots['arrow-left']" />
@@ -47,7 +47,7 @@
                     <slot name="year-overlay" :text="item.text" :value="item.value" />
                 </template>
             </SelectionGrid>
-            <div class="dp__month_year_col_nav" @click="onNext">
+            <div class="dp__month_year_col_nav" @click="onNext" v-if="showRightIcon">
                 <div class="dp__inner_nav">
                     <slot name="arrow-right" v-if="$slots['arrow-right']" />
                     <ChevronRightIcon v-if="!$slots['arrow-right']" />
@@ -126,6 +126,8 @@
         monthPicker: { type: Boolean as PropType<boolean>, default: false },
         instance: { type: Number as PropType<number>, default: 1 },
         customProps: { type: Object as PropType<Record<string, unknown>>, default: null },
+        twoCalendars: { type: Boolean as PropType<boolean>, default: false },
+        twoCalendarsSolo: { type: Boolean as PropType<boolean>, default: false },
     });
 
     const showMonthPicker = ref(false);
@@ -165,6 +167,20 @@
         return getGroupedList(props.years);
     });
 
+    const showLeftIcon = computed(() => {
+        if (props.twoCalendars) {
+            return !props.twoCalendarsSolo ? props.instance === 1 : true;
+        }
+        return true;
+    });
+
+    const showRightIcon = computed((): boolean => {
+        if (props.twoCalendars) {
+            return !props.twoCalendarsSolo ? props.instance === 2 : true;
+        }
+        return true;
+    });
+
     const toggleMonthPicker = (): void => {
         showMonthPicker.value = !showMonthPicker.value;
     };

src/Vue3DatePicker/components/composition/calendar.ts

@@ -7,6 +7,8 @@ import {
     getDateMonth,
     getDateYear,
     getNextMonthYear,
+    getNextYearMonth,
+    getPreviousMonthYear,
     getWeekNumber,
     isDateAfter,
     isDateBefore,
@@ -124,16 +126,7 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
         if (!props.range) {
             return isDateEqual(calendarDay.value, modelValue.value ? (modelValue.value as Date) : today.value);
         }
-        return (
-            isDateEqual(
-                calendarDay.value,
-                isModelValueRange(modelValue.value) && modelValue.value[0] ? modelValue.value[0] : null,
-            ) ||
-            isDateEqual(
-                calendarDay.value,
-                isModelValueRange(modelValue.value) && modelValue.value[1] ? modelValue.value[1] : null,
-            )
-        );
+        return false;
     };
 
     /**
@@ -328,24 +321,48 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
     const handleNextMonthYear = (): void => {
         if (Array.isArray(modelValue.value) && modelValue.value.length === 2) {
             const date = new Date(modelValue.value[1]);
-            if (getDateMonth(modelValue.value[0]) !== getDateMonth(modelValue.value[1])) {
+            if ((monthNext.value === month.value && yearNext.value === year.value) || !props.twoCalendarsSolo) {
+                const date = getNextYearMonth(month.value, year.value);
+                monthNext.value = date.month;
+                yearNext.value = date.year;
+            } else {
                 monthNext.value = getDateMonth(date);
                 yearNext.value = getDateYear(date);
             }
         }
     };
 
+    const handlePreviousCalendarChange = (monthVal: number, yearVal: number): void => {
+        if (!props.twoCalendarsSolo) {
+            const date = getPreviousMonthYear(monthVal, yearVal);
+            month.value = date.month;
+            year.value = date.year;
+        }
+    };
+
+    const handleNextCalendarChange = (monthVal: number, yearVal: number): void => {
+        if (!props.twoCalendarsSolo) {
+            const date = getNextYearMonth(monthVal, yearVal);
+            monthNext.value = date.month;
+            yearNext.value = date.year;
+        }
+    };
+
     const updateMonthYear = (value: number, isMonth = true, isNext = false): void => {
         if (isMonth) {
             if (isNext) {
+                handlePreviousCalendarChange(value, yearNext.value);
                 monthNext.value = value;
             } else {
+                handleNextCalendarChange(value, year.value);
                 month.value = value;
             }
         } else {
             if (isNext) {
+                handlePreviousCalendarChange(monthNext.value, value);
                 yearNext.value = value;
             } else {
+                handleNextCalendarChange(month.value, value);
                 year.value = value;
             }
         }
@@ -401,6 +418,15 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
         if (props.range && isRange(modelValue.value)) {
             if (props.hideOffsetDates && !day.current) return false;
             return isDateEqual(new Date(day.value), modelValue.value[isStart ? 0 : 1]);
+        } else if (props.range) {
+            return isDateEqual(
+                new Date(day.value),
+                modelValue.value && Array.isArray(modelValue.value)
+                    ? isStart
+                        ? modelValue.value[0] || null
+                        : modelValue.value[1]
+                    : null,
+            );
         }
         return false;
     };

src/Vue3DatePicker/interfaces.ts

@@ -92,6 +92,7 @@ export type UseCalendar = {
     timePicker: boolean;
     hideOffsetDates: boolean;
     twoCalendars: boolean;
+    twoCalendarsSolo: boolean;
     autoRange: number | string;
 } & { [key: string]: any };
 

src/Vue3DatePicker/style/components/_Calendar.scss

@@ -159,4 +159,8 @@
     width: 100%;
     height: 1px;
     background: var(--dp-border-color);
-}
+}
+
+.dp__calendar_next {
+    margin-left: 10px;
+}

src/Vue3DatePicker/utils/date-utils.ts

@@ -22,6 +22,7 @@ import addHours from 'date-fns/addHours';
 import subHours from 'date-fns/subHours';
 import addMinutes from 'date-fns/addMinutes';
 import subMinutes from 'date-fns/subMinutes';
+import subMonths from 'date-fns/subMonths';
 
 import { IMonthValue, ITimeValue } from '../interfaces';
 
@@ -260,3 +261,13 @@ export const addDateMinutes = (minutes: number, toAdd: number): number => {
 export const subDateMinutes = (minutes: number, toSub: number): number => {
     return getMinutes(subMinutes(setMinutes(new Date(), minutes), toSub));
 };
+
+export const getPreviousMonthYear = (month: number, year: number): { month: number; year: number } => {
+    const date = subMonths(setYear(setMonth(new Date(), month), year), 1);
+    return { month: getMonth(date), year: getYear(date) };
+};
+
+export const getNextYearMonth = (month: number, year: number): { month: number; year: number } => {
+    const date = addMonths(setYear(setMonth(new Date(), month), year), 1);
+    return { month: getMonth(date), year: getYear(date) };
+};