feat: Add iso support in model-type (resolves #804)

Vuepic · Apr 4, 2024 · eae475c · eae475c
1 parent 48115f4
commit eae475c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -270,7 +270,7 @@ export interface VueDatePickerProps {
      */
     disableTimeRangeValidation?: boolean;
     dayNames?: ((lang: string, weekStart: number) => string[]) | string[];
-    modelType?: 'timestamp' | 'format' | string;
+    modelType?: 'timestamp' | 'iso' | 'format' | string;
     modelAuto?: boolean;
     highlight?:
         | ((date: Date[], disabled?: boolean) => boolean)

diff --git a/src/VueDatePicker/composables/external-internal-mapper.ts b/src/VueDatePicker/composables/external-internal-mapper.ts
@@ -19,6 +19,7 @@ import type { ModelValue, VueEmit, TimeModel, MonthModel, ModelTypeConverted } f
 import type { AllPropsType } from '@/props';
 import type { Ref } from 'vue';
 import { getTimezoneOffset, localToTz } from '@/utils/timezone';
+import { modelTypePredefined } from '@/constants';
 
 /**
  * Handles values from external to internal and vise versa
@@ -310,12 +311,16 @@ export const useExternalInternalMapper = (emit: VueEmit, props: AllPropsType, is
             return props.utc === 'preserve' ? new Date(toDate.getTime() + toDate.getTimezoneOffset() * 60000) : toDate;
         }
         if (props.modelType) {
-            if (props.modelType === 'date' || props.modelType === 'timestamp') return convertModelToTz(new Date(value));
+            if (modelTypePredefined.includes(props.modelType)) return convertModelToTz(new Date(value));
 
             if (props.modelType === 'format' && (typeof props.format === 'string' || !props.format))
-                return convertModelToTz(parse(value as string, getDefaultPattern(), new Date(), { locale: formatLocale.value }));
+                return convertModelToTz(
+                    parse(value as string, getDefaultPattern(), new Date(), { locale: formatLocale.value }),
+                );
 
-            return convertModelToTz(parse(value as string, props.modelType, new Date(), { locale: formatLocale.value }));
+            return convertModelToTz(
+                parse(value as string, props.modelType, new Date(), { locale: formatLocale.value }),
+            );
         }
 
         return convertModelToTz(new Date(value));
@@ -328,6 +333,7 @@ export const useExternalInternalMapper = (emit: VueEmit, props: AllPropsType, is
         }
         if (props.modelType) {
             if (props.modelType === 'timestamp') return +convertZonedModelToLocal(val);
+            if (props.modelType === 'iso') return convertZonedModelToLocal(val).toISOString();
 
             if (props.modelType === 'format' && (typeof props.format === 'string' || !props.format))
                 return formatDateFn(convertZonedModelToLocal(val));

diff --git a/src/VueDatePicker/constants/index.ts b/src/VueDatePicker/constants/index.ts
@@ -23,3 +23,5 @@ export enum FlowStep {
     hours = 'hours',
     seconds = 'seconds',
 }
+
+export const modelTypePredefined = ['timestamp', 'date', 'iso'];
diff --git a/tests/unit/v-model.spec.ts b/tests/unit/v-model.spec.ts
@@ -249,6 +249,13 @@ describe('v-model mapping', () => {
         secondWrapper.vm.emitModelValue();
         expect(secondWrapper.emitted()).toHaveProperty('update:model-value');
         expect((secondWrapper.emitted()['update:model-value'][0] as any)[0]).toEqual(format(date, 'dd.mm.yyyy'));
+
+        const thirdWrapper = shallowMountDp({ modelType: 'iso' });
+        thirdWrapper.vm.internalModelValue = date;
+        thirdWrapper.vm.emitModelValue();
+
+        expect(thirdWrapper.emitted()).toHaveProperty('update:model-value');
+        expect(thirdWrapper.emitted()['update:model-value']).toEqual([[date.toISOString()]]);
     });
 
     it('Should emit single date on model-auto 1 selection', () => {