fix: Can't combine text input and range with dash used in format (fixes #101)

Author: Jasenkoo

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -349,6 +349,7 @@
             formatLocaleRef,
             props.multiDates,
             props.utc,
+            props.textInputOptions,
             emit,
         );
 

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

@@ -9,7 +9,7 @@ import {
     setDateMonthOrYear,
     setDateTime,
 } from '../../utils/date-utils';
-import { IFormat, ModelValue, VueEmit } from '../../interfaces';
+import { IFormat, ITextInputOptions, ModelValue, VueEmit } from '../../interfaces';
 import { isMonth, isRangeArray, isSingle, isTime, isTimeArray } from '../../utils/type-guard';
 import { getMonthVal } from '../../utils/date-utils';
 import { Locale } from 'date-fns';
@@ -38,6 +38,7 @@ export const useExternalInternalMapper = (
     formatLocale: ComputedRef<Locale>,
     multiDates: boolean,
     utc: boolean,
+    textInputOptions: ITextInputOptions,
     emit: VueEmit,
 ): IExternalInternalMapper => {
     const inputValue = ref('');
@@ -103,7 +104,12 @@ export const useExternalInternalMapper = (
                     .map((date) => formatDate(date, pattern, formatLocale?.value))
                     .join('; ');
             } else {
-                inputValue.value = formatDate(internalModelValue.value, pattern, formatLocale?.value);
+                inputValue.value = formatDate(
+                    internalModelValue.value,
+                    pattern,
+                    formatLocale?.value,
+                    textInputOptions.rangeSeparator,
+                );
             }
         } else if (timePicker) {
             inputValue.value = format(getTImeForExternal(internalModelValue.value));

src/Vue3DatePicker/utils/date-utils.ts

@@ -141,9 +141,16 @@ const formatFn = (value: Date, pattern: string, locale?: Locale | null): string
     return format(value, pattern);
 };
 
-export const formatDate = (value: Date | Date[], pattern: string, locale?: Locale | null): string => {
+export const formatDate = (
+    value: Date | Date[],
+    pattern: string,
+    locale?: Locale | null,
+    textInputSeparator?: string,
+): string => {
     if (Array.isArray(value)) {
-        return `${formatFn(value[0], pattern, locale)} - ${value[1] ? formatFn(value[1], pattern, locale) : ''}`;
+        return `${formatFn(value[0], pattern, locale)} ${textInputSeparator ? textInputSeparator : '-'} ${
+            value[1] ? formatFn(value[1], pattern, locale) : ''
+        }`;
     }
 
     return formatFn(value, pattern, locale);

src/Vue3DatePicker/utils/util.ts

@@ -129,7 +129,7 @@ export const getDefaultTextInputOptions = (): ITextInputOptions => ({
     enterSubmit: true,
     tabSubmit: true,
     openMenu: true,
-    rangeSeparator: '-',
+    rangeSeparator: ' - ',
 });
 
 /**