diff --git a/src/datetime-picker/DatePicker.tsx b/src/datetime-picker/DatePicker.tsx index 0523b37cb..e7e5f8ea1 100644 --- a/src/datetime-picker/DatePicker.tsx +++ b/src/datetime-picker/DatePicker.tsx @@ -60,7 +60,8 @@ export default createComponent({ ); return new Date(timestamp); } - return props.minDate; + + return undefined; }; const picker = ref(); @@ -106,12 +107,12 @@ export default createComponent({ const ranges = computed(() => { const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary( 'max', - currentDate.value + currentDate.value || props.minDate ); const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary( 'min', - currentDate.value + currentDate.value || props.minDate ); let result: Array<{ type: ColumnType; range: number[] }> = [ @@ -191,7 +192,7 @@ export default createComponent({ ); const updateColumnValue = () => { - const { value } = currentDate; + const value = currentDate.value || props.minDate; const { formatter } = props; const values = originColumns.value.map((column) => { @@ -236,7 +237,7 @@ export default createComponent({ let month; let day; if (type === 'month-day') { - year = currentDate.value.getFullYear(); + year = (currentDate.value || props.minDate).getFullYear(); month = getValue('month'); day = getValue('day'); } else { @@ -265,6 +266,7 @@ export default createComponent({ }; const onConfirm = () => { + emit('update:modelValue', currentDate.value); emit('confirm', currentDate.value); }; @@ -288,8 +290,8 @@ export default createComponent({ watch(columns, updateColumnValue); - watch(currentDate, (value) => { - emit('update:modelValue', value); + watch(currentDate, (value, oldValue) => { + emit('update:modelValue', oldValue ? value : null); }); watch( @@ -302,7 +304,7 @@ export default createComponent({ (value) => { value = formatValue(value); - if (value.valueOf() !== currentDate.value.valueOf()) { + if (value && value.valueOf() !== currentDate.value?.valueOf()) { currentDate.value = value; } } diff --git a/src/datetime-picker/test/date-picker.legacy.js b/src/datetime-picker/test/date-picker.legacy.js index c5b6fc3a4..0a7880a99 100644 --- a/src/datetime-picker/test/date-picker.legacy.js +++ b/src/datetime-picker/test/date-picker.legacy.js @@ -208,7 +208,7 @@ test('use min-date with filter', async () => { }); await later(); - + wrapper.find('.van-picker__confirm').trigger('click'); expect(wrapper.emitted('confirm')[0][0]).toEqual(new Date(2030, 0, 0, 0, 30)); }); diff --git a/src/datetime-picker/test/index.spec.js b/src/datetime-picker/test/index.spec.js new file mode 100644 index 000000000..129af4848 --- /dev/null +++ b/src/datetime-picker/test/index.spec.js @@ -0,0 +1,59 @@ +import {later, mount, triggerDrag} from "../../../test" +import DatePicker from "../DatePicker" + +test('month-day type', async () => { + const date = new Date(2020, 10, 1, 0, 0); + + const wrapper = mount(DatePicker, { + props: { + type: 'month-day', + modelValue: date, + minDate: new Date(2020, 0, 1), + maxDate: new Date(2025, 10, 1), + }, + }); + + await later(); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10); + expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1); + + await later(); + triggerDrag(wrapper.find('.van-picker-column'), 0, -300); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11); + expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1); + + await later(); + triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11); + expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31); +}); + +test('v-model', async () => { + const minDate = new Date(2030, 0, 0, 0, 3); + + const wrapper = mount(DatePicker, { + props: { + minDate, + } + }) + + await later(); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[0][0]).toEqual(minDate); +}); + +test('value has an inital value', async () => { + const defaultValue = new Date(2020, 0, 0, 0, 0); + const wrapper = mount(DatePicker, { + propsData: { + modelValue: defaultValue, + }, + }); + + await later(); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue); +});