date-picker: fix form change validation (#12328)

packages/date-picker/src/picker.vue

@@ -428,6 +428,11 @@ export default {
       if (this.picker) {
         this.picker.defaultValue = val;
       }
+    },
+    value(val, oldVal) {
+      if (!valueEquals(val, oldVal)) {
+        this.dispatch('ElFormItem', 'el.form.change', val);
+      }
     }
   },
 
@@ -894,7 +899,6 @@ export default {
       // determine user real change only
       if (!valueEquals(val, this.valueOnOpen)) {
         this.$emit('change', val);
-        this.dispatch('ElFormItem', 'el.form.change', val);
         this.valueOnOpen = val;
       }
     },

test/unit/specs/form.spec.js

@@ -483,11 +483,11 @@ describe('Form', () => {
         expect(valid).to.not.true;
         setTimeout(_ => {
           expect(field.validateMessage).to.equal('请选择日期');
-          // programatic modification does not trigger change
-          vm.value = new Date();
+          // programatic modification triggers change validation
+          vm.form.date = new Date();
           setTimeout(_ => {
-            expect(field.validateMessage).to.equal('请选择日期');
-            vm.value = '';
+            expect(field.validateMessage).to.equal('');
+            vm.form.date = '';
             // user modification triggers change
             const input = vm.$refs.picker.$el.querySelector('input');
             input.blur();