fix(DatePicker): allow modelValue to be empty

packages/vant/src/calendar/CalendarMonth.tsx

@@ -15,7 +15,7 @@ import {
   createNamespace,
   makeRequiredProp,
 } from '../utils';
-import { getMonthEndDay } from '../datetime-picker/utils';
+import { getMonthEndDay } from '../date-picker/utils';
 import {
   t,
   bem,

packages/vant/src/date-picker/DatePicker.tsx

@@ -17,12 +17,7 @@ import {
   makeArrayProp,
   createNamespace,
 } from '../utils';
-import {
-  times,
-  sharedProps,
-  getMonthEndDay,
-  pickerInheritKeys,
-} from '../datetime-picker/utils';
+import { times, sharedProps, getMonthEndDay, pickerInheritKeys } from './utils';
 
 // Components
 import { Picker } from '../picker';
@@ -88,8 +83,21 @@ export default defineComponent({
       month === props.maxDate.getMonth() + 1;
 
     const getValue = (type: DatePickerColumnType) => {
-      const index = props.columnsType.indexOf(type);
-      return +currentValues.value[index];
+      const { minDate, columnsType } = props;
+      const index = columnsType.indexOf(type);
+      const value = currentValues.value[index];
+      if (value) {
+        return +value;
+      }
+
+      switch (type) {
+        case 'year':
+          return minDate.getFullYear();
+        case 'month':
+          return minDate.getMonth() + 1;
+        case 'day':
+          return minDate.getDate();
+      }
     };
 
     const genMonthOptions = () => {

packages/vant/src/date-picker/test/date-picker.legacy.ts

@@ -0,0 +1,220 @@
+// import DatePicker from '../../datetime-picker/DatePicker';
+// import { mount, later, triggerDrag } from '../../../test';
+
+// function filter(type: string, options: string[]): string[] {
+//   const mod = type === 'year' ? 10 : 5;
+//   return options.filter((option: string) => Number(option) % mod === 0);
+// }
+
+// function formatter(type: string, value: string): string {
+//   return `${value} ${type}`;
+// }
+
+// test('filter prop', async () => {
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       filter,
+//       minDate: new Date(2020, 0, 1),
+//       maxDate: new Date(2025, 10, 1),
+//       modelValue: new Date(2020, 10, 1, 0, 0),
+//     },
+//   });
+
+//   expect(wrapper.html()).toMatchSnapshot();
+// });
+
+// test('formatter prop', async () => {
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       filter,
+//       formatter,
+//       minDate: new Date(2010, 0, 1),
+//       maxDate: new Date(2025, 10, 1),
+//       modelValue: new Date(2020, 10, 1, 0, 0),
+//     },
+//   });
+
+//   expect(wrapper.html()).toMatchSnapshot();
+
+//   triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+//   wrapper.find('.van-picker-column ul').trigger('transitionend');
+//   await later();
+
+//   expect((wrapper.vm as Record<string, any>).getPicker().getValues()).toEqual([
+//     '2020 year',
+//     '05 month',
+//     '05 day',
+//     '00 hour',
+//     '00 minute',
+//   ]);
+// });
+
+// test('confirm event', () => {
+//   const date = new Date(2020, 10, 1, 0, 0);
+
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       modelValue: date,
+//       minDate: new Date(2020, 0, 1),
+//       maxDate: new Date(2025, 10, 1),
+//     },
+//   });
+
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2020);
+
+//   triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
+// });
+
+// test('year-month type', async () => {
+//   const date = new Date(2020, 10, 1, 0, 0);
+
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       type: 'year-month',
+//       modelValue: date,
+//       minDate: new Date(2020, 0, 1),
+//       maxDate: new Date(2025, 10, 1),
+//     },
+//   });
+
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2020);
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
+
+//   triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
+//   expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(0);
+
+//   triggerDrag(wrapper.findAll('.van-picker-column')[0], 0, -100);
+//   await later();
+//   triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -100);
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![2][0].getFullYear()).toEqual(2025);
+//   expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(10);
+// });
+
+// 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),
+//     },
+//   });
+
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0].getDate()).toEqual(1);
+
+//   triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![1][0].getMonth()).toEqual(11);
+//   expect(wrapper.emitted<[Date]>('confirm')![1][0].getDate()).toEqual(1);
+
+//   triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
+//   await later();
+//   triggerDrag(wrapper.findAll('.van-picker-column')[1], 0, -300);
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![2][0].getMonth()).toEqual(11);
+//   expect(wrapper.emitted<[Date]>('confirm')![2][0].getDate()).toEqual(31);
+// });
+
+// test('datehour type', () => {
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       minDate: new Date(2010, 0, 1),
+//       maxDate: new Date(2025, 10, 1),
+//       modelValue: new Date(2020, 10, 1, 0, 0),
+//     },
+//   });
+
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0].getHours()).toEqual(0);
+
+//   triggerDrag(wrapper.findAll('.van-picker-column')[3], 0, -300);
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![1][0].getHours()).toEqual(23);
+// });
+
+// test('cancel event', () => {
+//   const wrapper = mount(DatePicker);
+
+//   wrapper.find('.van-picker__cancel').trigger('click');
+//   expect(wrapper.emitted('cancel')).toBeTruthy();
+// });
+
+// test('max-date prop', () => {
+//   const maxDate = new Date(2010, 5, 0, 0, 0);
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       modelValue: new Date(2020, 10, 30, 30, 30),
+//       maxDate,
+//     },
+//   });
+
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(maxDate);
+// });
+
+// test('min-date prop', () => {
+//   const minDate = new Date(2030, 0, 0, 0, 0);
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       modelValue: new Date(2020, 0, 0, 0, 0),
+//       minDate,
+//     },
+//   });
+
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(minDate);
+// });
+
+// test('dynamic set value', async () => {
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       modelValue: new Date(2019, 1, 1),
+//     },
+//   });
+
+//   await wrapper.setProps({ modelValue: new Date(2019, 1, 1) });
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   await wrapper.setProps({ modelValue: new Date(2025, 1, 1) });
+//   wrapper.find('.van-picker__confirm').trigger('click');
+
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0].getFullYear()).toEqual(2019);
+//   expect(wrapper.emitted<[Date]>('confirm')![1][0].getFullYear()).toEqual(2025);
+// });
+
+// test('use min-date with filter', async () => {
+//   const minDate = new Date(2030, 0, 0, 0, 3);
+//   const maxDate = new Date(2040, 0, 0, 0, 0);
+
+//   const wrapper = mount(DatePicker, {
+//     props: {
+//       minDate,
+//       maxDate,
+//       modelValue: new Date(2020, 0, 0, 0, 0),
+//       filter(type: string, values: string[]) {
+//         if (type === 'minute') {
+//           return values.filter((value) => Number(value) % 30 === 0);
+//         }
+
+//         return values;
+//       },
+//     },
+//   });
+
+//   await later();
+
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(
+//     new Date(2030, 0, 0, 0, 30)
+//   );
+// });

packages/vant/src/date-picker/test/datetime-picker.legacy.tsx

@@ -0,0 +1,116 @@
+// import { DatetimePicker } from '../../datetime-picker';
+// import { mount, later } from '../../../test';
+// import { reactive } from 'vue';
+// import { useExpose } from '../../composables/use-expose';
+
+// test('should emit confirm event after clicking the confirm button', () => {
+//   const onConfirm = jest.fn();
+//   const wrapper = mount(DatetimePicker, {
+//     props: {
+//       onConfirm,
+//     },
+//   });
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(onConfirm).toHaveBeenCalledTimes(1);
+// });
+
+// test('should emit cancel event after clicking the confirm button', () => {
+//   const onCancel = jest.fn();
+//   const wrapper = mount(DatetimePicker, {
+//     props: {
+//       onCancel,
+//     },
+//   });
+//   wrapper.find('.van-picker__cancel').trigger('click');
+//   expect(onCancel).toHaveBeenCalledTimes(1);
+// });
+
+// test('should allow to call getPicker method', () => {
+//   const wrapper = mount(DatetimePicker);
+
+//   expect(wrapper.vm.getPicker()).toBeTruthy();
+// });
+
+// test('should render title slot correctly', () => {
+//   const wrapper = mount(DatetimePicker, {
+//     props: {
+//       showToolbar: true,
+//     },
+//     slots: {
+//       title: () => 'Custom title',
+//     },
+//   });
+
+//   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 () => (
+//         <DatetimePicker
+//           v-model={state.date}
+//           minDate={state.minDate}
+//           onConfirm={(value: Date) => emit('confirm', value)}
+//         />
+//       );
+//     },
+//   });
+
+//   await later();
+//   (wrapper.vm as Record<string, any>).onChange();
+//   await later();
+//   wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(defaultValue);
+// });
+
+// test('should update value correctly after calling setColumnIndex method', async () => {
+//   const onConfirm = jest.fn();
+//   const defaultDate = new Date(2020, 0, 1);
+//   const wrapper = mount(DatetimePicker, {
+//     props: {
+//       type: 'date',
+//       minDate: defaultDate,
+//       maxDate: new Date(2020, 0, 30),
+//       modelValue: defaultDate,
+//       onConfirm,
+//     },
+//   });
+
+//   wrapper.vm.getPicker().setColumnIndex(2, 14);
+//   await wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(onConfirm.mock.calls[0]).toEqual([new Date(2020, 0, 15)]);
+// });
+
+// test('should update value correctly after calling setColumnValue method', async () => {
+//   const onConfirm = jest.fn();
+//   const defaultDate = new Date(2020, 0, 1);
+//   const wrapper = mount(DatetimePicker, {
+//     props: {
+//       type: 'date',
+//       minDate: defaultDate,
+//       maxDate: new Date(2020, 0, 30),
+//       modelValue: defaultDate,
+//       onConfirm,
+//     },
+//   });
+
+//   wrapper.vm.getPicker().setColumnValue(2, '15');
+//   await wrapper.find('.van-picker__confirm').trigger('click');
+//   expect(onConfirm.mock.calls[0]).toEqual([new Date(2020, 0, 15)]);
+// });

packages/vant/src/date-picker/test/demo.spec.ts

@@ -0,0 +1,4 @@
+import Demo from '../demo/index.vue';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

packages/vant/src/date-picker/test/index.legacy.ts

@@ -0,0 +1,59 @@
+// import { later, mount, triggerDrag } from '../../../test';
+// import DatePicker from '../../datetime-picker/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<[Date]>('confirm')![0][0].getMonth()).toEqual(10);
+//   expect(wrapper.emitted<[Date]>('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<[Date]>('confirm')![1][0].getMonth()).toEqual(11);
+//   expect(wrapper.emitted<[Date]>('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<[Date]>('confirm')![2][0].getMonth()).toEqual(11);
+//   expect(wrapper.emitted<[Date]>('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<[Date]>('confirm')![0][0]).toEqual(minDate);
+// });
+
+// test('value has an initial 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<[Date]>('confirm')![0][0]).toEqual(defaultValue);
+// });

packages/vant/src/date-picker/utils.ts

@@ -0,0 +1,38 @@
+import { extend } from '../utils';
+import { pickerSharedProps } from '../picker/Picker';
+import type { PropType } from 'vue';
+import type { PickerOption } from '../picker';
+
+export const sharedProps = extend({}, pickerSharedProps, {
+  filter: Function as PropType<
+    (columnType: string, options: PickerOption[]) => PickerOption[]
+  >,
+  formatter: {
+    type: Function as PropType<
+      (type: string, option: PickerOption) => PickerOption
+    >,
+    default: (type: string, option: PickerOption) => option,
+  },
+});
+
+export const pickerInheritKeys = Object.keys(pickerSharedProps) as Array<
+  keyof typeof pickerSharedProps
+>;
+
+export function times<T>(n: number, iteratee: (index: number) => T) {
+  if (n < 0) {
+    return [];
+  }
+
+  const result: T[] = Array(n);
+
+  let index = -1;
+  while (++index < n) {
+    result[index] = iteratee(index);
+  }
+
+  return result;
+}
+
+export const getMonthEndDay = (year: number, month: number): number =>
+  32 - new Date(year, month - 1, 32).getDate();

packages/vant/src/time-picker/TimePicker.tsx

@@ -15,11 +15,7 @@ import {
   createNamespace,
   makeNumericProp,
 } from '../utils';
-import {
-  times,
-  sharedProps,
-  pickerInheritKeys,
-} from '../datetime-picker/utils';
+import { times, sharedProps, pickerInheritKeys } from '../date-picker/utils';
 
 // Components
 import { Picker } from '../picker';