diff --git a/src/datetime-picker/DatePicker.tsx b/src/datetime-picker/DatePicker.tsx index 817f71ccd..5007ffe4e 100644 --- a/src/datetime-picker/DatePicker.tsx +++ b/src/datetime-picker/DatePicker.tsx @@ -299,7 +299,14 @@ export default defineComponent({ emit('update:modelValue', oldValue ? value : null) ); - watch(() => [props.filter, props.minDate, props.maxDate], updateInnerValue); + watch(() => [props.filter, props.maxDate], updateInnerValue); + + watch( + () => props.minDate, + () => { + nextTick(updateInnerValue); + } + ); watch( () => props.modelValue, diff --git a/src/datetime-picker/TimePicker.tsx b/src/datetime-picker/TimePicker.tsx index f11aa60a5..bb068c4b2 100644 --- a/src/datetime-picker/TimePicker.tsx +++ b/src/datetime-picker/TimePicker.tsx @@ -146,16 +146,17 @@ export default defineComponent({ watch(columns, updateColumnValue); watch( - () => [ - props.filter, - props.minHour, - props.maxHour, - props.minMinute, - props.maxMinute, - ], + () => [props.filter, props.maxHour, props.minMinute, props.maxMinute], updateInnerValue ); + watch( + () => props.minHour, + () => { + nextTick(updateInnerValue); + } + ); + watch(currentDate, (value) => emit('update:modelValue', value)); watch( diff --git a/src/datetime-picker/test/__snapshots__/datetime-picker.spec.ts.snap b/src/datetime-picker/test/__snapshots__/datetime-picker.spec.tsx.snap similarity index 100% rename from src/datetime-picker/test/__snapshots__/datetime-picker.spec.ts.snap rename to src/datetime-picker/test/__snapshots__/datetime-picker.spec.tsx.snap diff --git a/src/datetime-picker/test/datetime-picker.spec.ts b/src/datetime-picker/test/datetime-picker.spec.tsx similarity index 51% rename from src/datetime-picker/test/datetime-picker.spec.ts rename to src/datetime-picker/test/datetime-picker.spec.tsx index 6bdb19643..929b4931c 100644 --- a/src/datetime-picker/test/datetime-picker.spec.ts +++ b/src/datetime-picker/test/datetime-picker.spec.tsx @@ -1,5 +1,7 @@ import { DatetimePicker } from '..'; -import { mount } from '../../../test'; +import { mount, later } from '../../../test'; +import { reactive } from 'vue'; +import { useExpose } from '../../composables/use-expose'; test('confirm & cancel event', () => { const onConfirm = jest.fn(); @@ -49,3 +51,38 @@ test('should render title slot correctly', () => { expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot(); }); + +test('should emit value correctly when dynamic change min-date', async () => { + const defaultValue = new Date(2020, 10, 2, 10, 30); + const wrapper = mount({ + emits: ['confirm'], + setup(_, { emit }) { + const state = reactive({ + date: defaultValue, + minDate: new Date(2010, 0, 1, 10, 30), + }); + + const onChange = () => { + state.minDate = state.date; + }; + + useExpose({ + onChange, + }); + + return () => ( + emit('confirm', value)} + /> + ); + }, + }); + + await later(); + (wrapper.vm as Record).onChange(); + await later(); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(defaultValue); +}); diff --git a/src/datetime-picker/test/time-picker.spec.tsx b/src/datetime-picker/test/time-picker.spec.tsx index dd4b17210..d53c270c5 100644 --- a/src/datetime-picker/test/time-picker.spec.tsx +++ b/src/datetime-picker/test/time-picker.spec.tsx @@ -1,6 +1,7 @@ import TimePicker from '../TimePicker'; import { mount, later, triggerDrag } from '../../../test'; -import { ref } from 'vue'; +import { ref, reactive } from 'vue'; +import { useExpose } from '../../composables/use-expose'; function filter(type: string, options: string[]): string[] { const mod = type === 'minute' ? 10 : 5; @@ -150,3 +151,37 @@ test('set min-minute dynamically', async () => { await later(); expect(wrapper.emitted<[string]>('change')![0][0]).toEqual('13:00'); }); + +test('should emit value correctly when dynamic change min-hour', async () => { + const wrapper = mount({ + emits: ['confirm'], + setup(_, { emit }) { + const state = reactive({ + time: '10:30', + minHour: 1, + }); + + const onChange = () => { + state.minHour = 11; + }; + + useExpose({ + onChange, + }); + + return () => ( + emit('confirm', value)} + /> + ); + }, + }); + + await later(); + (wrapper.vm as Record).onChange(); + await later(); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual('11:30'); +});