feat: Allow partial range selection (#42)

Author: Jasenkoo

index.d.ts

@@ -138,6 +138,7 @@ interface Vue3DatePicker {
     allowedDates?: string[] | Date[];
     showNowButton?: boolean;
     nowButtonLabel?: string;
+    partialRange?: boolean;
 }
 
 interface PublicMethods extends MethodOptions {

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -198,6 +198,7 @@
         allowedDates: { type: Array as PropType<string[] | Date[]>, default: () => [] },
         showNowButton: { type: Boolean as PropType<boolean>, default: false },
         nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
+        partialRange: { type: Boolean as PropType<boolean>, default: true },
     });
     const slots = useSlots();
     const isOpen = ref(false);
@@ -248,6 +249,7 @@
             props.timePicker,
             props.monthPicker,
             props.range,
+            props.partialRange,
             props.is24,
             props.enableTimePicker,
             emit,

src/Vue3DatePicker/components/ActionRow.vue

@@ -50,7 +50,7 @@
         if (!props.internalModelValue || !props.menuMount) return '';
         if (typeof props.previewFormat === 'string') {
             if (isModelValueRange(props.internalModelValue)) {
-                if (props.internalModelValue.length === 2) {
+                if (props.internalModelValue.length === 2 && props.internalModelValue[1]) {
                     if (props.twoCalendars) {
                         return `${formatDate(props.internalModelValue[0], props.previewFormat)} - ${formatDate(
                             props.internalModelValue[1],

src/Vue3DatePicker/components/composition/external-internal-mapper.ts

@@ -10,7 +10,7 @@ import {
     setDateMonthOrYear,
 } from '../../utils/date-utils';
 import { IFormat, ModelValue, VueEmit } from '../../interfaces';
-import { isMonth, isRange, isSingle, isTime, isTimeArray } from '../../utils/type-guard';
+import { isMonth, isRangeArray, isSingle, isTime, isTimeArray } from '../../utils/type-guard';
 
 interface IExternalInternalMapper {
     parseExternalModelValue: (value: ModelValue) => void;
@@ -29,6 +29,7 @@ export const useExternalInternalMapper = (
     timePicker: boolean,
     monthPicker: boolean,
     range: boolean,
+    partialRange: boolean,
     is24: boolean,
     enableTimePicker: boolean,
     emit: VueEmit,
@@ -58,8 +59,8 @@ export const useExternalInternalMapper = (
                     mappedDate = setDateMonthOrYear(null, +value.month, +value.year);
                 }
             } else if (range) {
-                if (isRange(value)) {
-                    mappedDate = [new Date(value[0]), new Date(value[1])];
+                if (isRangeArray(value, partialRange)) {
+                    mappedDate = [new Date(value[0]), value[1] ? new Date(value[1]) : (null as unknown as Date)];
                 }
             } else if (isSingle(value)) {
                 mappedDate = new Date(value);
@@ -96,6 +97,7 @@ export const useExternalInternalMapper = (
     const checkBeforeEmit = (): boolean => {
         if (internalModelValue.value) {
             if (range) {
+                if (partialRange) return internalModelValue.value.length >= 1;
                 return internalModelValue.value.length === 2;
             }
             return !!internalModelValue.value;
@@ -112,6 +114,9 @@ export const useExternalInternalMapper = (
         } else if (timePicker) {
             emit('update:modelValue', getTImeForExternal(internalModelValue.value));
         } else {
+            if (range && partialRange && internalModelValue.value.length === 1) {
+                internalModelValue.value.push(null);
+            }
             emit('update:modelValue', internalModelValue.value);
         }
         formatInputValue();

src/Vue3DatePicker/utils/date-utils.ts

@@ -61,7 +61,7 @@ export const parseDate = (date: string, pattern: string): Date => {
  */
 export const isValidDate = (value: Date | Date[] | null): boolean => {
     if (Array.isArray(value)) {
-        return isValid(value[0]) && isValid(value[1]);
+        return isValid(value[0]) && (value[1] ? isValid(value[1]) : true);
     }
     return value ? isValid(value) : false;
 };
@@ -157,7 +157,7 @@ export const getMonthForExternal = (date: Date): IMonthValue => {
  */
 export const formatDate = (value: Date | Date[], pattern: string): string => {
     if (Array.isArray(value)) {
-        return `${format(value[0], pattern)} - ${format(value[1], pattern)}`;
+        return `${format(value[0], pattern)} - ${value[1] ? format(value[1], pattern) : ''}`;
     }
 
     return format(value, pattern);

src/Vue3DatePicker/utils/type-guard.ts

@@ -30,6 +30,11 @@ export const isRange = (value: ModelValue): value is Date[] => {
     return Array.isArray(value) && value.length === 2;
 };
 
+export const isRangeArray = (value: ModelValue, partialRange: boolean): value is Date[] => {
+    if (partialRange) return Array.isArray(value);
+    return isRange(value);
+};
+
 export const isTimeArr = (value: ITimeValue | ITimeValue[]): value is ITimeValue[] => {
     return Array.isArray(value);
 };