fix: start-time not being initialized properly in time-picker (fixes

#535)
Vuepic · Aug 24, 2023 · 500392f · 500392f
1 parent 18d0e04
commit 500392f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/src/VueDatePicker/components/TimePicker/time-picker.ts b/src/VueDatePicker/components/TimePicker/time-picker.ts
@@ -1,11 +1,12 @@
 import { onMounted } from 'vue';
+import { set } from 'date-fns';
 
 import { useDefaults, useModel } from '@/composables';
 import { useTimePickerUtils } from '@/components/TimePicker/time-picker-utils';
 import { getDate, getTimeObj } from '@/utils/date-utils';
 
 import type { PickerBasePropsType } from '@/props';
-import type { VueEmit } from '@/interfaces';
+import type { TimeModel, VueEmit } from '@/interfaces';
 
 export const useTimePicker = (props: PickerBasePropsType, emit: VueEmit) => {
     const { modelValue, time } = useModel(props, emit);
@@ -16,11 +17,30 @@ export const useTimePicker = (props: PickerBasePropsType, emit: VueEmit) => {
         modelValue,
     );
 
+    const parseStartTime = (startTime: TimeModel) => {
+        const { hours, minutes, seconds } = startTime;
+        return { hours: +hours, minutes: +minutes, seconds: seconds ? +seconds : 0 };
+    };
+
+    const getDateFromStartTime = () => {
+        if (props.startTime) {
+            if (Array.isArray(props.startTime)) {
+                const parsedFirst = parseStartTime(props.startTime[0]);
+                const parsedSecond = parseStartTime(props.startTime[1]);
+                return [set(getDate(), parsedFirst), set(getDate(), parsedSecond)];
+            }
+            const parsed = parseStartTime(props.startTime);
+            return set(getDate(), parsed);
+        }
+        return props.range ? [null, null] : null;
+    };
+
     const assignEmptyModel = () => {
         if (props.range) {
-            modelValue.value = [getSetDateTime(null, 0), getSetDateTime(null, 1)];
+            const [firstStartTime, secondStartTime] = getDateFromStartTime() as Date[];
+            modelValue.value = [getSetDateTime(firstStartTime, 0), getSetDateTime(secondStartTime, 1)];
         } else {
-            modelValue.value = getSetDateTime(null);
+            modelValue.value = getSetDateTime(getDateFromStartTime() as Date);
         }
     };
 

diff --git a/tests/unit/behaviour.spec.ts b/tests/unit/behaviour.spec.ts
@@ -5,6 +5,8 @@ import { utcToZonedTime } from 'date-fns-tz/esm';
 import { resetDateTime } from '@/utils/date-utils';
 
 import { openMenu } from '../utils';
+import type { TimeModel } from '@/interfaces';
+import type { VueWrapper } from '@vue/test-utils';
 
 describe('It should validate various picker scenarios', () => {
     it('Should dynamically disable times', async () => {
@@ -191,5 +193,24 @@ describe('It should validate various picker scenarios', () => {
 
         await dp.find(`[data-test="minutes-time-inc-btn-1"]`).trigger('click');
         expect(selectBtn.attributes().disabled).toBeFalsy();
+        dp.unmount();
+    });
+
+    it('Should properly set start time value on internal model value in time-picker mode (#535)', async () => {
+        const startTime = { hours: 0, minutes: 0, seconds: 0 };
+        const dp = await openMenu({ timePicker: true, startTime });
+
+        const validate = async (time: TimeModel | TimeModel[], instance: VueWrapper) => {
+            await instance.find(`[data-test="select-button"]`).trigger('click');
+            expect(instance.emitted()).toHaveProperty('update:model-value', [[time]]);
+            instance.unmount();
+        };
+
+        await validate(startTime, dp);
+
+        const startTimes = [startTime, { ...startTime, hours: 1 }];
+        const dpRange = await openMenu({ timePicker: true, range: true, startTime: startTimes });
+
+        await validate(startTimes, dpRange);
     });
 });