feat: Add support for range in month-picker (resolves #109)

Jasenkoo · Jasenkoo · commit d41da6606742 · 2022-03-04T20:39:43.000+01:00
diff --git a/index.d.ts b/index.d.ts
@@ -39,6 +39,7 @@ interface Vue3DatePicker {
               seconds?: number | string;
           }[]
         | { month: number | string; year: number | string }
+        | { month: number | string; year: number | string }[]
         | null;
     locale?: string;
     position?: 'left' | 'center' | 'right';
diff --git a/src/Vue3DatePicker/components/DatepickerMenu.vue b/src/Vue3DatePicker/components/DatepickerMenu.vue
@@ -51,6 +51,8 @@
                                 minDate,
                                 maxDate,
                                 preventMinMaxNavigation,
+                                internalModelValue,
+                                range,
                             }"
                             @mount="childMount('monthYearInput')"
                             @reset-flow="resetFlow"
diff --git a/src/Vue3DatePicker/components/MonthYearInput.vue b/src/Vue3DatePicker/components/MonthYearInput.vue
@@ -104,6 +104,8 @@
                     disabledValues: filters.months,
                     minValue: minMonth,
                     maxValue: maxMonth,
+                    multiModelValue,
+                    year,
                 }"
                 @update:model-value="onMonthUpdate"
                 @toggle="toggleMonthPicker"
@@ -176,14 +178,14 @@
 
 <script lang="ts" setup>
     import { computed, onMounted, PropType, ref } from 'vue';
+    import { getMonth, getYear } from 'date-fns';
 
     import { ChevronLeftIcon, ChevronRightIcon, CalendarIcon } from './Icons';
     import SelectionGrid from './SelectionGrid.vue';
 
-    import { IDateFilter, IDefaultSelect } from '../interfaces';
+    import { IDateFilter, IDefaultSelect, InternalModuleValue } from '../interfaces';
     import { useMontYearPick } from './composition/month-year';
     import { useTransitions } from './composition/transition';
-    import { getMonth, getYear } from 'date-fns';
 
     const emit = defineEmits(['update:month', 'update:year', 'monthYearSelect', 'mount', 'reset-flow']);
     const props = defineProps({
@@ -200,6 +202,8 @@
         minDate: { type: [Date, String] as PropType<Date | string>, default: null },
         maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
         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 },
     });
 
     const { transitionName, showTransition } = useTransitions();
@@ -243,6 +247,10 @@
         return null;
     });
 
+    const multiModelValue = computed(() => {
+        return props.range && props.internalModelValue && props.monthPicker ? (props.internalModelValue as Date[]) : [];
+    });
+
     const getGroupedList = (items: IDefaultSelect[]): IDefaultSelect[][] => {
         const list = [];
 
diff --git a/src/Vue3DatePicker/components/SelectionGrid.vue b/src/Vue3DatePicker/components/SelectionGrid.vue
@@ -19,6 +19,7 @@
                     tabindex="0"
                     @click="onClick(col.value)"
                     @keydown.enter="onClick(col.value)"
+                    @mouseover="hoverValue = col.value"
                 >
                     <div :class="col.className">
                         <slot v-if="$slots.item" name="item" :item="col" />
@@ -43,25 +44,30 @@
 
 <script lang="ts" setup>
     import { computed, inject, onBeforeUpdate, onMounted, PropType, ref } from 'vue';
+    import { setMonth, setYear } from 'date-fns';
 
     import { IDefaultSelect, DynamicClass } from '../interfaces';
     import { getKey, unrefElement } from '../utils/util';
+    import { isDateBetween, isDateEqual } from '../utils/date-utils';
 
     const emit = defineEmits(['update:modelValue', 'selected', 'toggle', 'reset-flow']);
 
     const props = defineProps({
         items: { type: Array as PropType<IDefaultSelect[][]>, default: () => [] },
         modelValue: { type: [String, Number] as PropType<string | number>, default: null },
+        multiModelValue: { type: Array as PropType<Date[]>, default: () => [] },
         disabledValues: { type: Array as PropType<number[]>, default: () => [] },
         minValue: { type: [Number, String] as PropType<number | string>, default: null },
         maxValue: { type: [Number, String] as PropType<number | string>, default: null },
+        year: { type: Number as PropType<number>, default: 0 },
     });
 
     const scrollable = ref(false);
     const selectionActiveRef = ref(null);
     const gridWrapRef = ref(null);
     const autoApply = inject('autoApply', false);
     const textInput = inject('textInput', ref(false));
+    const hoverValue = ref();
 
     onBeforeUpdate(() => {
         selectionActiveRef.value = null;
@@ -102,14 +108,21 @@
                 .map((itemVal) => {
                     const disabled =
                         props.disabledValues.some((val) => val === itemVal.value) || checkMinMaxValue(itemVal.value);
+                    const active = props.multiModelValue?.length
+                        ? props.multiModelValue?.some((value) =>
+                              isDateEqual(value, setYear(setMonth(new Date(), itemVal.value), props.year)),
+                          )
+                        : itemVal.value === props.modelValue;
+
                     return {
                         ...itemVal,
                         className: {
-                            dp__overlay_cell_active: itemVal.value === props.modelValue,
-                            dp__overlay_cell: itemVal.value !== props.modelValue,
+                            dp__overlay_cell_active: active,
+                            dp__overlay_cell: !active,
                             dp__overlay_cell_disabled: disabled,
-                            dp__overlay_cell_active_disabled: disabled && itemVal.value === props.modelValue,
+                            dp__overlay_cell_active_disabled: disabled && active,
                             dp__overlay_cell_pad: true,
+                            dp__cell_in_between: props.multiModelValue?.length ? rangeActive(itemVal.value) : false,
                         },
                     };
                 });
@@ -168,6 +181,14 @@
         }
     };
 
+    const rangeActive = (value: number): boolean => {
+        return isDateBetween(
+            props.multiModelValue,
+            setYear(setMonth(new Date(), hoverValue.value || 0), props.year),
+            setYear(setMonth(new Date(), value), props.year),
+        );
+    };
+
     const toggle = () => {
         emit('toggle');
         emit('reset-flow');
diff --git a/src/Vue3DatePicker/components/composition/calendar.ts b/src/Vue3DatePicker/components/composition/calendar.ts
@@ -22,6 +22,7 @@ import {
     getNextMonthYear,
     isDateAfter,
     isDateBefore,
+    isDateBetween,
     isDateEqual,
     sanitizeDate,
     setDateMonthOrYear,
@@ -233,21 +234,7 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
      * If range mode used, this will check if the calendar day is between 2 active dates
      */
     const rangeActive = (calendarDay: ICalendarDay): boolean => {
-        if (isModelValueRange(modelValue.value) && modelValue.value[0] && modelValue.value[1]) {
-            return (
-                isDateAfter(calendarDay.value, modelValue.value[0]) &&
-                isDateBefore(calendarDay.value, modelValue.value[1])
-            );
-        }
-        if (isModelValueRange(modelValue.value) && modelValue.value[0] && hoveredDate.value) {
-            return (
-                (isDateAfter(calendarDay.value, modelValue.value[0]) &&
-                    isDateBefore(calendarDay.value, hoveredDate.value)) ||
-                (isDateBefore(calendarDay.value, modelValue.value[0]) &&
-                    isDateAfter(calendarDay.value, hoveredDate.value))
-            );
-        }
-        return false;
+        return isDateBetween(modelValue.value as Date[], hoveredDate.value as Date, calendarDay.value);
     };
 
     /**
@@ -337,7 +324,7 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
                         setDateTime(new Date(), hours.value[1], minutes.value[1], getSecondsValue(false)),
                     ];
                 }
-            } else if (props.monthPicker) {
+            } else if (props.monthPicker && !props.range) {
                 modelValue.value = setDateMonthOrYear(new Date(), month.value(0), year.value(0));
             } else if (props.multiCalendars) {
                 assignMonthAndYear(new Date());
@@ -541,6 +528,10 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
         }
     };
 
+    const getMonthValue = (instance: number): Date => {
+        return setDateMonthOrYear(new Date(), month.value(instance), year.value(instance));
+    };
+
     const updateMonthYear = (instance: number, value: number, isMonth = true): void => {
         if (isMonth) {
             setCalendarMonth(instance, value);
@@ -551,10 +542,25 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
             autoChangeMultiCalendars(instance);
         }
         if (props.monthPicker) {
-            if (modelValue.value) {
-                modelValue.value = setDateMonthOrYear(modelValue.value as Date, month.value(0), year.value(0));
+            if (props.range) {
+                if (isMonth) {
+                    let rangeDate = modelValue.value ? (modelValue.value as Date[]).slice() : [];
+                    if (rangeDate.length === 2) {
+                        rangeDate = [];
+                    }
+                    if (!rangeDate.length) {
+                        rangeDate = [getMonthValue(instance)];
+                    } else {
+                        if (isDateBefore(getMonthValue(instance), rangeDate[0])) {
+                            rangeDate.unshift(getMonthValue(instance));
+                        } else {
+                            rangeDate.push(getMonthValue(instance));
+                        }
+                    }
+                    modelValue.value = rangeDate;
+                }
             } else {
-                modelValue.value = setDateMonthOrYear(new Date(), month.value(0), year.value(0));
+                modelValue.value = getMonthValue(instance);
             }
         }
         updateFlow();
diff --git a/src/Vue3DatePicker/components/composition/external-internal-mapper.ts b/src/Vue3DatePicker/components/composition/external-internal-mapper.ts
@@ -4,14 +4,14 @@ import {
     dateToUtc,
     formatDate,
     getDefaultPattern,
+    getMonthValForExternal,
     getTImeForExternal,
     isValidDate,
     setDateMonthOrYear,
     setDateTime,
 } from '../../utils/date-utils';
 import { IFormat, ITextInputOptions, ModelValue, VueEmit } from '../../interfaces';
-import { isMonth, isRangeArray, isSingle, isTime, isTimeArray } from '../../utils/type-guard';
-import { getMonthVal } from '../../utils/date-utils';
+import { isMonth, isMonthArray, isRangeArray, isSingle, isTime, isTimeArray } from '../../utils/type-guard';
 import { Locale } from 'date-fns';
 
 interface IExternalInternalMapper {
@@ -66,7 +66,12 @@ export const useExternalInternalMapper = (
                     mappedDate = setDateTime(null, +value.hours, +value.minutes, +value.seconds);
                 }
             } else if (monthPicker) {
-                if (isMonth(value) && 'month' in value && 'year' in value) {
+                if (isMonthArray(value) && 'month' in value[0] && 'year' in value[0]) {
+                    mappedDate = [
+                        setDateMonthOrYear(null, +value[0].month, +value[0].year),
+                        setDateMonthOrYear(null, +value[1].month, +value[1].year),
+                    ];
+                } else if (isMonth(value) && 'month' in value && 'year' in value) {
                     mappedDate = setDateMonthOrYear(null, +value.month, +value.year);
                 }
             } else if (multiDates && Array.isArray(value)) {
@@ -114,7 +119,7 @@ export const useExternalInternalMapper = (
         } else if (timePicker) {
             inputValue.value = format(getTImeForExternal(internalModelValue.value));
         } else if (monthPicker) {
-            inputValue.value = format(getMonthVal(internalModelValue.value as Date));
+            inputValue.value = format(getMonthValForExternal(internalModelValue.value));
         } else {
             inputValue.value = format(internalModelValue.value);
         }
@@ -136,7 +141,7 @@ export const useExternalInternalMapper = (
      */
     const emitModelValue = (): void => {
         if (monthPicker) {
-            emit('update:modelValue', getMonthVal(internalModelValue.value as Date));
+            emit('update:modelValue', getMonthValForExternal(internalModelValue.value));
         } else if (timePicker) {
             emit('update:modelValue', getTImeForExternal(internalModelValue.value));
         } else {
diff --git a/src/Vue3DatePicker/interfaces.ts b/src/Vue3DatePicker/interfaces.ts
@@ -17,7 +17,9 @@ export enum OpenPosition {
     right = 'right',
 }
 
-export type IFormat = string | ((date: Date | Date[] | ITimeValue | ITimeValue[] | IMonthValue) => string);
+export type IFormat =
+    | string
+    | ((date: Date | Date[] | ITimeValue | ITimeValue[] | IMonthValue | IMonthValue[]) => string);
 
 export type InternalModuleValue = Date | Date[] | null;
 
@@ -58,7 +60,16 @@ export interface ITimeValue {
     seconds: number | string;
 }
 
-export type ModelValue = Date | Date[] | string | string[] | ITimeValue | ITimeValue[] | IMonthValue | null;
+export type ModelValue =
+    | Date
+    | Date[]
+    | string
+    | string[]
+    | ITimeValue
+    | ITimeValue[]
+    | IMonthValue
+    | IMonthValue[]
+    | null;
 
 export type WeekStartNum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type WeekStartStr = '0' | '1' | '2' | '3' | '4' | '5' | '6';
diff --git a/src/Vue3DatePicker/style/components/_SelectionGrid.scss b/src/Vue3DatePicker/style/components/_SelectionGrid.scss
@@ -85,6 +85,11 @@
   }
 }
 
+.dp__cell_in_between {
+  background: var(--dp-hover-color);
+  color: var(--dp-hover-text-color);
+}
+
 .dp__overlay_action {
   position: sticky;
   bottom: 0;
diff --git a/src/Vue3DatePicker/utils/date-utils.ts b/src/Vue3DatePicker/utils/date-utils.ts
@@ -127,6 +127,13 @@ export const getTimeVal = (date?: Date): ITimeValue => {
 
 export const getMonthVal = (date: Date): IMonthValue => ({ month: getMonth(date), year: getYear(date) });
 
+export const getMonthValForExternal = (date: Date | Date[]): IMonthValue | IMonthValue[] => {
+    if (Array.isArray(date)) {
+        return [getMonthVal(date[0]), getMonthVal(date[1])];
+    }
+    return getMonthVal(date);
+};
+
 export const getTImeForExternal = (date: Date | Date[]): ITimeValue | ITimeValue[] => {
     if (Array.isArray(date)) {
         return [getTimeVal(date[0]), getTimeVal(date[1])];
@@ -256,3 +263,16 @@ export const dateToUtc = (date: Date): string => {
 
     return new Date(utcDate).toISOString();
 };
+
+export const isDateBetween = (range: Date[], hoverDate: Date, dateToCheck: Date): boolean => {
+    if (range[0] && range[1]) {
+        return isDateAfter(dateToCheck, range[0]) && isDateBefore(dateToCheck, range[1]);
+    }
+    if (range[0] && hoverDate) {
+        return (
+            (isDateAfter(dateToCheck, range[0]) && isDateBefore(dateToCheck, hoverDate)) ||
+            (isDateBefore(dateToCheck, range[0]) && isDateAfter(dateToCheck, hoverDate))
+        );
+    }
+    return false;
+};
diff --git a/src/Vue3DatePicker/utils/type-guard.ts b/src/Vue3DatePicker/utils/type-guard.ts
@@ -18,6 +18,10 @@ export const isTimeArray = (value: ModelValue): value is ITimeValue[] => {
     return Array.isArray(value) && value.length === 2;
 };
 
+export const isMonthArray = (value: ModelValue): value is IMonthValue[] => {
+    return Array.isArray(value);
+};
+
 export const isMonth = (value: ModelValue): value is IMonthValue => {
     return typeof value === 'object';
 };

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,11 @@`
`85`	`85`	`}`
`86`	`86`	`}`
`87`	`87`
	`88`	`+.dp__cell_in_between {`
	`89`	`+ background: var(--dp-hover-color);`
	`90`	`+ color: var(--dp-hover-text-color);`
	`91`	`+}`
	`92`	`+`
`88`	`93`	`.dp__overlay_action {`
`89`	`94`	`position: sticky;`
`90`	`95`	`bottom: 0;`