feat(DatetimePicker): add default-value prop to fix incorrecrt inital value (#7832)

src/datetime-picker/DatePicker.js

@@ -36,7 +36,7 @@ export default createComponent({
     value(val) {
       val = this.formatValue(val);
 
-      if (val.valueOf() !== this.innerValue.valueOf()) {
+      if (val && val.valueOf() !== this.innerValue.valueOf()) {
         this.innerValue = val;
       }
     },
@@ -50,7 +50,10 @@ export default createComponent({
         maxMonth,
         maxHour,
         maxMinute,
-      } = this.getBoundary('max', this.innerValue);
+      } = this.getBoundary(
+        'max',
+        this.innerValue ? this.innerValue : this.minDate
+      );
 
       const {
         minYear,
@@ -58,7 +61,10 @@ export default createComponent({
         minMonth,
         minHour,
         minMinute,
-      } = this.getBoundary('min', this.innerValue);
+      } = this.getBoundary(
+        'min',
+        this.innerValue ? this.innerValue : this.minDate
+      );
 
       let result = [
         {
@@ -114,7 +120,7 @@ export default createComponent({
   methods: {
     formatValue(value) {
       if (!isDate(value)) {
-        value = this.minDate;
+        return null;
       }
 
       value = Math.max(value, this.minDate.getTime());
@@ -178,7 +184,7 @@ export default createComponent({
       let month;
       let day;
       if (type === 'month-day') {
-        year = this.innerValue.getFullYear();
+        year = (this.innerValue ? this.innerValue : this.minDate).getFullYear();
         month = getValue('month');
         day = getValue('day');
       } else {
@@ -218,7 +224,7 @@ export default createComponent({
     },
 
     updateColumnValue() {
-      const value = this.innerValue;
+      const value = this.innerValue ? this.innerValue : this.minDate;
       const { formatter } = this;
 
       const values = this.originColumns.map((column) => {

src/datetime-picker/shared.js

@@ -56,8 +56,12 @@ export const TimePickerMixin = {
   watch: {
     columns: 'updateColumnValue',
 
-    innerValue(val) {
-      this.$emit('input', val);
+    innerValue(val, oldVal) {
+      if (!oldVal) {
+        this.$emit('input', null);
+      } else {
+        this.$emit('input', val)
+      }
     },
   },
 
@@ -76,6 +80,7 @@ export const TimePickerMixin = {
     },
 
     onConfirm() {
+      this.$emit('input', this.innerValue)
       this.$emit('confirm', this.innerValue);
     },
 

src/datetime-picker/test/date-picker.spec.js

@@ -212,3 +212,39 @@ test('use min-date with filter', async () => {
   wrapper.find('.van-picker__confirm').trigger('click');
   expect(wrapper.emitted('confirm')[0][0]).toEqual(new Date(2030, 0, 0, 0, 30));
 });
+
+test('v-model', async () => {
+  const minDate = new Date(2030, 0, 0, 0, 3);
+  
+  const wrapper = mount({
+    template: `
+      <van-datetime-picker
+          v-model="date"
+          :min-date="minDate"
+      ></van-datetime-picker>
+    `,
+    data() {
+      return {
+        date: null,
+        minDate: new Date(2030, 0, 0, 0, 3)
+      };
+    },
+  });
+
+  await later();
+  
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.vm.date).toEqual(minDate);
+});
+
+test('value has an inital value', () => {
+  const defaultValue = new Date(2020, 0, 0, 0, 0);
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: defaultValue,
+    },
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue);
+});