feat: Add week-picker mode (resolves #110)

Jasenkoo · Jasenkoo · commit cea5e0ec4a1d · 2022-03-05T18:25:21.000+01:00
diff --git a/index.d.ts b/index.d.ts
@@ -194,6 +194,7 @@ interface Vue3DatePicker {
     multiDatesLimit?: number | string;
     reverseYears?: boolean;
     keepActionRow?: boolean;
+    weekPicker?: boolean;
 }
 
 interface PublicMethods extends MethodOptions {
diff --git a/src/Vue3DatePicker/Vue3DatePicker.vue b/src/Vue3DatePicker/Vue3DatePicker.vue
@@ -116,6 +116,7 @@
                     multiDatesLimit,
                     reverseYears,
                     keepActionRow,
+                    weekPicker,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @close-picker="closeMenu"
@@ -293,6 +294,7 @@
         multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
         reverseYears: { type: Boolean as PropType<boolean>, default: false },
         keepActionRow: { type: Boolean as PropType<boolean>, default: false },
+        weekPicker: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const isOpen = ref(false);
@@ -357,6 +359,7 @@
             formatLocaleRef,
             props.multiDates,
             props.utc,
+            props.weekPicker,
             props.textInputOptions,
             emit,
         );
@@ -380,6 +383,7 @@
                   props.enableSeconds,
                   props.monthPicker,
                   props.timePicker,
+                  props.weekPicker,
                   props.enableTimePicker,
               );
     });
diff --git a/src/Vue3DatePicker/components/DatepickerMenu.vue b/src/Vue3DatePicker/components/DatepickerMenu.vue
@@ -87,7 +87,7 @@
                 </div>
                 <div>
                     <component
-                        v-if="enableTimePicker && !monthPicker"
+                        v-if="enableTimePicker && !monthPicker && !weekPicker"
                         :is="timePickerComponent ? timePickerComponent : TimePickerCmp"
                         ref="timePickerRef"
                         v-bind="{
@@ -299,6 +299,7 @@
         multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
         reverseYears: { type: Boolean as PropType<boolean>, default: false },
         keepActionRow: { type: Boolean as PropType<boolean>, default: false },
+        weekPicker: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const calendarWrapperRef = ref(null);
@@ -502,7 +503,7 @@
                         dp__date_hover_start: isHoverDateStartEnd(dateHover, calendarDay, true),
                         dp__date_hover_end: isHoverDateStartEnd(dateHover, calendarDay, false),
                         dp__range_between:
-                            props.range &&
+                            (props.range || props.weekPicker) &&
                             (props.multiCalendars > 0 ? calendarDay.current : true) &&
                             !disabled &&
                             !(!calendarDay.current && props.hideOffsetDates) &&
diff --git a/src/Vue3DatePicker/components/composition/calendar.ts b/src/Vue3DatePicker/components/composition/calendar.ts
@@ -17,9 +17,10 @@ import {
     subMonths,
 } from 'date-fns';
 
-import { ICalendarDay, IMarker, InternalModuleValue, UseCalendar, VueEmit } from '../../interfaces';
+import { ICalendarDay, IMarker, InternalModuleValue, UseCalendar, VueEmit, WeekStartNum } from '../../interfaces';
 import {
     getNextMonthYear,
+    getWeekFromDate,
     isDateAfter,
     isDateBefore,
     isDateBetween,
@@ -396,6 +397,12 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
         return [];
     };
 
+    const autoApply = (): void => {
+        if (props.autoApply) {
+            emit('autoApply');
+        }
+    };
+
     /**
      * Called when the date in the calendar is clicked
      * Do a necessary formatting and assign value to internal
@@ -407,6 +414,10 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
         if (!day.current && props.hideOffsetDates) {
             return;
         }
+        if (props.weekPicker) {
+            modelValue.value = getWeekFromDate(new Date(day.value), +props.weekStart as WeekStartNum);
+            return autoApply();
+        }
         if (!props.range && !isNumberArray(hours.value) && !isNumberArray(minutes.value)) {
             const date = setDateTime(new Date(day.value), hours.value, minutes.value, getSecondsValue());
             if (props.multiDates) {
@@ -415,9 +426,7 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
                 modelValue.value = date;
             }
             updateFlow();
-            if (props.autoApply) {
-                emit('autoApply');
-            }
+            autoApply();
         } else if (isNumberArray(hours.value) && isNumberArray(minutes.value) && !props.multiDates) {
             let rangeDate = modelValue.value ? (modelValue.value as Date[]).slice() : [];
             if (rangeDate.length === 2 && !(props.fixedStart || props.fixedEnd)) {
@@ -480,11 +489,14 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
      * Check if range ends on the given day
      */
     const isHoverRangeEnd = (day: UnwrapRef<ICalendarDay>): boolean => {
-        if (props.autoRange) {
+        if (props.autoRange || props.weekPicker) {
             if (hoveredDate.value) {
                 if (props.hideOffsetDates && !day.current) return false;
                 const rangeEnd = addDays(hoveredDate.value, +props.autoRange);
-                return isDateEqual(rangeEnd, new Date(day.value));
+                const range = getWeekFromDate(new Date(hoveredDate.value), +props.weekStart as WeekStartNum);
+                return props.weekPicker
+                    ? isDateEqual(range[1], new Date(day.value))
+                    : isDateEqual(rangeEnd, new Date(day.value));
             }
             return false;
         }
@@ -495,22 +507,26 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
      * Check if date in auto range preview is in between
      */
     const isAutoRangeInBetween = (day: UnwrapRef<ICalendarDay>): boolean => {
-        if (props.autoRange) {
+        if (props.autoRange || props.weekPicker) {
             if (hoveredDate.value) {
                 const rangeEnd = addDays(hoveredDate.value, +props.autoRange);
                 if (props.hideOffsetDates && !day.current) return false;
-                return isDateAfter(day.value, hoveredDate.value) && isDateBefore(day.value, rangeEnd);
+                const range = getWeekFromDate(new Date(hoveredDate.value), +props.weekStart as WeekStartNum);
+                return props.weekPicker
+                    ? isDateAfter(day.value, range[0]) && isDateBefore(day.value, range[1])
+                    : isDateAfter(day.value, hoveredDate.value) && isDateBefore(day.value, rangeEnd);
             }
             return false;
         }
         return false;
     };
 
     const isAutoRangeStart = (day: UnwrapRef<ICalendarDay>): boolean => {
-        if (props.autoRange) {
+        if (props.autoRange || props.weekPicker) {
             if (hoveredDate.value) {
                 if (props.hideOffsetDates && !day.current) return false;
-                return isDateEqual(hoveredDate.value, day.value);
+                const range = getWeekFromDate(new Date(hoveredDate.value), +props.weekStart as WeekStartNum);
+                return props.weekPicker ? isDateEqual(range[0], day.value) : isDateEqual(hoveredDate.value, day.value);
             }
             return false;
         }
@@ -659,7 +675,7 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
      * Check when to add a proper active start/end date class on range picker
      */
     const rangeActiveStartEnd = (day: UnwrapRef<ICalendarDay>, isStart = true): boolean => {
-        if (props.range && isRange(modelValue.value)) {
+        if ((props.range || props.weekPicker) && 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) {
@@ -687,7 +703,7 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit, updateFlow: () =>
     };
 
     const isHoverDate = (disabled: boolean, calendarDay: ICalendarDay) => {
-        return Array.isArray(props.internalModelValue) && props.internalModelValue.length
+        return (Array.isArray(props.internalModelValue) && props.internalModelValue.length) || props.weekPicker
             ? false
             : !disabled &&
                   !isActiveDate(calendarDay) &&
diff --git a/src/Vue3DatePicker/components/composition/external-internal-mapper.ts b/src/Vue3DatePicker/components/composition/external-internal-mapper.ts
@@ -38,6 +38,7 @@ export const useExternalInternalMapper = (
     formatLocale: ComputedRef<Locale>,
     multiDates: boolean,
     utc: boolean,
+    weekPicker: boolean,
     textInputOptions: ITextInputOptions,
     emit: VueEmit,
 ): IExternalInternalMapper => {
@@ -76,6 +77,8 @@ export const useExternalInternalMapper = (
                 }
             } else if (multiDates && Array.isArray(value)) {
                 mappedDate = value.map((date) => new Date(date as string));
+            } else if (weekPicker && Array.isArray(value)) {
+                mappedDate = [new Date(value[0] as string), new Date(value[1] as string)];
             } else if (range) {
                 if (isRangeArray(value, partialRange)) {
                     mappedDate = [new Date(value[0]), value[1] ? new Date(value[1]) : (null as unknown as Date)];
@@ -103,7 +106,15 @@ export const useExternalInternalMapper = (
         if (!internalModelValue.value) {
             inputValue.value = '';
         } else if (!format || typeof format === 'string') {
-            const pattern = getDefaultPattern(format, is24, enableSeconds, monthPicker, timePicker, enableTimePicker);
+            const pattern = getDefaultPattern(
+                format,
+                is24,
+                enableSeconds,
+                monthPicker,
+                timePicker,
+                weekPicker,
+                enableTimePicker,
+            );
             if (Array.isArray(internalModelValue.value) && multiDates) {
                 inputValue.value = internalModelValue.value
                     .map((date) => formatDate(date, pattern, formatLocale?.value))
@@ -144,6 +155,8 @@ export const useExternalInternalMapper = (
             emit('update:modelValue', getMonthValForExternal(internalModelValue.value));
         } else if (timePicker) {
             emit('update:modelValue', getTImeForExternal(internalModelValue.value));
+        } else if (weekPicker) {
+            emit('update:modelValue', internalModelValue.value);
         } else {
             if (internalModelValue.value && range && partialRange && internalModelValue.value.length === 1) {
                 internalModelValue.value.push(null);
diff --git a/src/Vue3DatePicker/interfaces.ts b/src/Vue3DatePicker/interfaces.ts
@@ -103,6 +103,8 @@ export type UseCalendar = {
     fixedStart: boolean;
     fixedEnd: boolean;
     multiDatesLimit: number | string;
+    weekPicker: boolean;
+    weekStart: WeekStartNum | WeekStartStr;
 } & { [key: string]: unknown };
 
 export interface UseMonthYearPick {
diff --git a/src/Vue3DatePicker/utils/date-utils.ts b/src/Vue3DatePicker/utils/date-utils.ts
@@ -22,9 +22,11 @@ import {
     add,
     sub,
     Locale,
+    startOfWeek,
+    endOfWeek,
 } from 'date-fns';
 
-import { IMonthValue, InternalModuleValue, ITimeValue } from '../interfaces';
+import { IMonthValue, InternalModuleValue, ITimeValue, WeekStartNum } from '../interfaces';
 
 export const sanitizeDate = (date: Date) => {
     const userTimezoneOffset = date.getTimezoneOffset() * 60000;
@@ -102,6 +104,7 @@ export const getDefaultPattern = (
     enableSeconds: boolean,
     monthPicker: boolean,
     timePicker: boolean,
+    weekPicker: boolean,
     enableTimePicker: boolean,
 ): string => {
     if (pattern) {
@@ -113,6 +116,9 @@ export const getDefaultPattern = (
     if (timePicker) {
         return getTimeFormat(is24, enableSeconds);
     }
+    if (weekPicker) {
+        return 'MM/dd/yyyy';
+    }
     return enableTimePicker ? `MM/dd/yyyy, ${getTimeFormat(is24, enableSeconds)}` : 'MM/dd/yyyy';
 };
 
@@ -265,14 +271,20 @@ export const dateToUtc = (date: Date): string => {
 };
 
 export const isDateBetween = (range: Date[], hoverDate: Date, dateToCheck: Date): boolean => {
-    if (range[0] && range[1]) {
+    if (range && range[0] && range[1]) {
         return isDateAfter(dateToCheck, range[0]) && isDateBefore(dateToCheck, range[1]);
     }
-    if (range[0] && hoverDate) {
+    if (range && range[0] && hoverDate) {
         return (
             (isDateAfter(dateToCheck, range[0]) && isDateBefore(dateToCheck, hoverDate)) ||
             (isDateBefore(dateToCheck, range[0]) && isDateAfter(dateToCheck, hoverDate))
         );
     }
     return false;
 };
+
+export const getWeekFromDate = (date: Date, weekStartsOn: WeekStartNum): [Date, Date] => {
+    const start = startOfWeek(date, { weekStartsOn });
+    const end = endOfWeek(date, { weekStartsOn });
+    return [start, end];
+};
diff --git a/tests/unit/logic.spec.ts b/tests/unit/logic.spec.ts
@@ -11,6 +11,7 @@ import MonthYearInput from '../../src/Vue3DatePicker/components/MonthYearInput.v
 import ActionRow from '../../src/Vue3DatePicker/components/ActionRow.vue';
 
 import { setMilliseconds, setSeconds } from 'date-fns';
+import { getWeekFromDate } from '../../src/Vue3DatePicker/utils/date-utils';
 
 const format = (date: Date): string => {
     return `Selected year is ${date.getFullYear()}`;
@@ -242,4 +243,16 @@ describe('Logic connection', () => {
         expect(dp.vm.internalModelValue).toEqual(range);
         dp.unmount();
     });
+
+    it('Should select week', async () => {
+        const today = new Date();
+        const weekRange = getWeekFromDate(today, 1);
+        const { dp, menu } = await mountDatepicker({ modelValue: null, weekPicker: true });
+
+        const calendar = menu.findComponent(Calendar);
+        calendar.vm.$emit('selectDate', { value: today, current: true });
+
+        expect(dp.vm.internalModelValue).toHaveLength(2);
+        expect(dp.vm.internalModelValue).toEqual(weekRange);
+    });
 });
diff --git a/tests/unit/utils.spec.ts b/tests/unit/utils.spec.ts
@@ -63,8 +63,8 @@ describe('Utils and date utils formatting', () => {
     });
 
     it('Should get default pattern', () => {
-        const patternDef = getDefaultPattern(null, true, false, false, false, true);
-        const patternMonthPicker = getDefaultPattern(null, true, false, true, false, false);
+        const patternDef = getDefaultPattern(null, true, false, false, false, false, true);
+        const patternMonthPicker = getDefaultPattern(null, true, false, true, false, false, false);
 
         expect(patternDef).toEqual('MM/dd/yyyy, HH:mm');
         expect(patternMonthPicker).toEqual('MM/yyyy');

Original file line number	Diff line number	Diff line change
`@@ -194,6 +194,7 @@ interface Vue3DatePicker {`
`194`	`194`	`multiDatesLimit?: number \| string;`
`195`	`195`	`reverseYears?: boolean;`
`196`	`196`	`keepActionRow?: boolean;`
	`197`	`+ weekPicker?: boolean;`
`197`	`198`	`}`
`198`	`199`
`199`	`200`	`interface PublicMethods extends MethodOptions {`