refactor: Code cleanup

Author: Jasenkoo

src/VueDatePicker/components/ActionRow.vue

@@ -76,7 +76,7 @@
     import { convertType, unrefElement } from '@/utils/util';
     import { useArrowNavigation, useDefaults, useValidation } from '@/composables';
     import { PickerBaseProps } from '@/props';
-    import { formatDate, getDate, isDateAfter, isDateBefore, isDateEqual, resetDate } from '@/utils/date-utils';
+    import { formatDate } from '@/utils/date-utils';
 
     import type { PropType } from 'vue';
 
@@ -101,10 +101,9 @@
         defaultedTextInput,
         defaultedInline,
         defaultedRange,
-        propDates,
         getDefaultPattern,
     } = useDefaults(props);
-    const { isValidTime } = useValidation(props);
+    const { isTimeValid, isMonthValid } = useValidation(props);
     const { buildMatrix } = useArrowNavigation();
 
     const cancelButtonRef = ref(null);
@@ -142,23 +141,12 @@
             : true;
     });
 
-    const disabled = computed(() => !isTimeValid.value || !isMonthValid.value || !validDateRange.value);
-
-    // todo - move into validation
-    const isTimeValid = computed((): boolean => {
-        if (!props.enableTimePicker || props.ignoreTimeValidation) return true;
-        return isValidTime(props.internalModelValue);
-    });
-
-    // todo - move into validation
-    const isMonthValid = computed((): boolean => {
-        if (!props.monthPicker) return true;
-        if (defaultedRange.value.enabled && Array.isArray(props.internalModelValue)) {
-            const invalid = props.internalModelValue.filter((value) => !isMonthWithinRange(value));
-            return !invalid.length;
-        }
-        return isMonthWithinRange(props.internalModelValue as Date);
-    });
+    const disabled = computed(
+        () =>
+            !isTimeValid.value(props.internalModelValue) ||
+            !isMonthValid.value(props.internalModelValue) ||
+            !validDateRange.value,
+    );
 
     const handleCustomPreviewFormat = () => {
         const formatFn = defaultedPreviewFormat.value as (val: Date | Date[]) => string | string[];
@@ -215,35 +203,12 @@
         !Array.isArray(previewValue.value) ? previewValue.value : previewValue.value.join(dateSeparator()),
     );
 
-    // Todo - move into validation
-    const isMonthWithinRange = (date: Date | string): boolean => {
-        if (!props.monthPicker) return true;
-        let valid = true;
-        const dateToCompare = getDate(resetDate(date));
-        if (propDates.value.minDate && propDates.value.maxDate) {
-            const minDate = getDate(resetDate(propDates.value.minDate));
-            const maxDate = getDate(resetDate(propDates.value.maxDate));
-            return (
-                (isDateAfter(dateToCompare, minDate) && isDateBefore(dateToCompare, maxDate)) ||
-                isDateEqual(dateToCompare, minDate) ||
-                isDateEqual(dateToCompare, maxDate)
-            );
-        }
-        if (propDates.value.minDate) {
-            const minDate = getDate(resetDate(propDates.value.minDate));
-
-            valid = isDateAfter(dateToCompare, minDate) || isDateEqual(dateToCompare, minDate);
-        }
-        if (propDates.value.maxDate) {
-            const maxDate = getDate(resetDate(propDates.value.maxDate));
-            valid = isDateBefore(dateToCompare, maxDate) || isDateEqual(dateToCompare, maxDate);
-        }
-
-        return valid;
-    };
-
     const selectDate = (): void => {
-        if (isTimeValid.value && isMonthValid.value && validDateRange.value) {
+        if (
+            isTimeValid.value(props.internalModelValue) &&
+            isMonthValid.value(props.internalModelValue) &&
+            validDateRange.value
+        ) {
             emit('select-date');
         } else {
             emit('invalid-select');

src/VueDatePicker/components/DatePicker/date-picker.ts

@@ -582,7 +582,7 @@ export const useDatePicker = (
             value,
             modelValue,
             range: defaultedRange.value.enabled,
-            timezone: noTz ? undefined : defaultedTz.value!.timezone,
+            timezone: noTz ? undefined : defaultedTz.value.timezone,
         });
 
         selectOnAutoApply();

src/VueDatePicker/components/MonthPicker/month-picker.ts

@@ -193,7 +193,7 @@ export const useMonthPicker = (props: PickerBasePropsType, emit: VueEmit) => {
             value,
             modelValue,
             range: defaultedRange.value.enabled,
-            timezone: noTz ? undefined : defaultedTz.value!.timezone,
+            timezone: noTz ? undefined : defaultedTz.value.timezone,
         });
         emit('auto-apply');
     };

src/VueDatePicker/composables/calendar-class.ts

@@ -16,7 +16,7 @@ export const useCalendarClass = (modelValue: WritableComputedRef<InternalModuleV
     // Track hovered date
     const hoveredDate = ref<Date | null>(null);
     // Today date
-    const today = ref<Date>(localToTz(new Date(), defaultedTz.value!.timezone));
+    const today = ref<Date>(localToTz(new Date(), defaultedTz.value.timezone));
 
     /**
      * When using range picker keep track of hovered value in the calendar

src/VueDatePicker/composables/model.ts

@@ -11,7 +11,7 @@ import { localToTz } from '@/utils/timezone';
 export const useModel = (props: PickerBasePropsType, emit: VueEmit) => {
     const { defaultedRange, defaultedTz } = useDefaults(props);
 
-    const today = getDate(localToTz(getDate(), defaultedTz.value!.timezone));
+    const today = getDate(localToTz(getDate(), defaultedTz.value.timezone));
     const calendars = ref<ICalendarData[]>([{ month: getMonth(today), year: getYear(today) }]);
 
     // Time values

src/VueDatePicker/composables/validation.ts

@@ -8,13 +8,15 @@ import {
     isDateAfter,
     isDateBefore,
     isDateEqual,
+    resetDate,
     setTimeValue,
 } from '@/utils/date-utils';
 import { useDefaults } from '@/composables/defaults';
 import { convertType, getMapDate } from '@/utils/util';
 
 import type { InternalModuleValue, DisabledTimesFn, DisabledTime, TimeModel, MaybeDate } from '@/interfaces';
 import type { PickerBasePropsType, AllPropsType } from '@/props';
+import { computed } from 'vue';
 
 export const useValidation = (props: PickerBasePropsType | AllPropsType) => {
     const { defaultedFilters, defaultedRange, propDates } = useDefaults(props);
@@ -125,14 +127,16 @@ export const useValidation = (props: PickerBasePropsType | AllPropsType) => {
         return true;
     };
 
-    // If min or max range is set, validate given range
-    const checkMinMaxRange = (secondDate: Date, modelValue: InternalModuleValue, index = 0): boolean => {
-        if (
-            Array.isArray(modelValue) &&
+    const shouldCheckMinMaxRange = (modelValue: InternalModuleValue, index: number): modelValue is Array<Date> => {
+        return (Array.isArray(modelValue) &&
             modelValue[index] &&
             (defaultedRange.value.maxRange || defaultedRange.value.minRange) &&
-            isValidYear(modelValue[index])
-        ) {
+            isValidYear(modelValue[index])) as boolean;
+    };
+
+    // If min or max range is set, validate given range
+    const checkMinMaxRange = (secondDate: Date, modelValue: InternalModuleValue, index = 0): boolean => {
+        if (shouldCheckMinMaxRange(modelValue, index)) {
             const absoluteDiff = differenceInCalendarDays(secondDate, modelValue[index]);
             const daysInBetween = getDaysInBetween(modelValue[index], secondDate);
             const disabledDates =
@@ -241,12 +245,54 @@ export const useValidation = (props: PickerBasePropsType | AllPropsType) => {
         return checkDisabledTimes(date, isValid);
     };
 
+    const isMonthWithinRange = (date: Date | string): boolean => {
+        if (!props.monthPicker) return true;
+        let valid = true;
+        const dateToCompare = getDate(resetDate(date));
+        if (propDates.value.minDate && propDates.value.maxDate) {
+            const minDate = getDate(resetDate(propDates.value.minDate));
+            const maxDate = getDate(resetDate(propDates.value.maxDate));
+            return (
+                (isDateAfter(dateToCompare, minDate) && isDateBefore(dateToCompare, maxDate)) ||
+                isDateEqual(dateToCompare, minDate) ||
+                isDateEqual(dateToCompare, maxDate)
+            );
+        }
+        if (propDates.value.minDate) {
+            const minDate = getDate(resetDate(propDates.value.minDate));
+
+            valid = isDateAfter(dateToCompare, minDate) || isDateEqual(dateToCompare, minDate);
+        }
+        if (propDates.value.maxDate) {
+            const maxDate = getDate(resetDate(propDates.value.maxDate));
+            valid = isDateBefore(dateToCompare, maxDate) || isDateEqual(dateToCompare, maxDate);
+        }
+
+        return valid;
+    };
+
+    const isTimeValid = computed(() => (internalModelValue: InternalModuleValue): boolean => {
+        if (!props.enableTimePicker || props.ignoreTimeValidation) return true;
+        return isValidTime(internalModelValue);
+    });
+
+    const isMonthValid = computed(() => (internalModelValue: InternalModuleValue): boolean => {
+        if (!props.monthPicker) return true;
+        if (defaultedRange.value.enabled && Array.isArray(internalModelValue)) {
+            const invalid = internalModelValue.filter((value) => !isMonthWithinRange(value));
+            return !invalid.length;
+        }
+        return isMonthWithinRange(internalModelValue as Date);
+    });
+
     return {
         isDisabled,
         validateDate,
         validateMonthYearInRange,
         isDateRangeAllowed,
         checkMinMaxRange,
         isValidTime,
+        isTimeValid,
+        isMonthValid,
     };
 };

src/VueDatePicker/utils/date-utils.ts

@@ -15,7 +15,6 @@ import {
     getSeconds,
     getYear,
     getMonth,
-    parseISO,
     eachDayOfInterval,
     addMonths,
     startOfWeek,

src/VueDatePicker/utils/timezone.ts

@@ -15,14 +15,14 @@ export const dateToTimezoneSafe = (date: Date | string | number, tz?: TimeZoneCo
     return d;
 };
 
+const getDateInTz = (date: Date | number | string, tz: TimeZoneConfig) => {
+    return tz.dateInTz ? localToTz(new Date(date), tz.dateInTz) : getDate(date);
+};
+
 // Converts specific date to a Date object based on a provided timezone
 export const sanitizeDateToLocal = (date: MaybeDate, tz?: TimeZoneConfig) => {
     if (!date) return null;
     if (!tz) return getDate(date);
     const local = getDate(date);
-    return tz.exactMatch
-        ? tz.dateInTz
-            ? localToTz(new Date(date), tz.dateInTz)
-            : getDate(date)
-        : localToTz(local, tz.timezone);
+    return tz.exactMatch ? getDateInTz(date, tz) : localToTz(local, tz.timezone);
 };