DatePicker: add validate-event attribute (#13531)

examples/docs/en-US/date-picker.md

@@ -495,6 +495,7 @@ When picking a date range, you can assign the time part for start date and end d
 | unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
 | prefix-icon | Custom prefix icon class | string | — | el-icon-date |
 | clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
+| validate-event | whether to trigger form validation | boolean | - | true |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/en-US/input.md

@@ -666,7 +666,7 @@ Search data from server-side.
 |form | same as `form` in native input | string | — | — |
 | label | label text | string | — | — |
 | tabindex | input tabindex | string | - | - |
-| validate-event | whether to trigger form validation | boolean | - | - |
+| validate-event | whether to trigger form validation | boolean | - | true |
 
 ### Input slots
 

examples/docs/es/datetime-picker.md

@@ -302,6 +302,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 | unlink-panels      | desconectar dos date-panels en range-picker | boolean           | —                                        | false                |
 | prefix-icon        | Clase personalizada para el icono prefijado | string            | —                                        | el-icon-date         |
 | clear-icon         | Clase personalizada para el icono `clear` | string              | —                                        | el-icon-circle-close |
+| validate-event     | whether to trigger form validation        | boolean             | -                                        | true                 |
 
 ### Picker Options
 | Atributo       | Descripción                              | Tipo     | Valores aceptados | Por defecto |

examples/docs/es/input.md

@@ -704,7 +704,7 @@ Búsqueda de datos desde el servidor.
 | suffix-icon           | suffix icon class                                                                                                                                  | string                          | —                                                              | —            |
 | hide-loading          | si se debe ocultar el icono de loading en la búsqueda remota                                                                                       | boolean                         | —                                                              | false        |
 | popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false                 | boolean                         | -                                                              | true         |
-| validate-event        | si se debe lanzar la validación de formulario                                                                                                                 | boolean                         | -                                                              | -            |
+| validate-event        | si se debe lanzar la validación de formulario                                                                                                                 | boolean                         | -                                                   | true         |
 
 ### Autocomplete Slots
 

examples/docs/zh-CN/date-picker.md

@@ -450,6 +450,7 @@
 | unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
 | prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
 | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
+| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/zh-CN/input.md

@@ -822,7 +822,7 @@ export default {
 | form | 原生属性 | string | — | — |
 | label | 输入框关联的label文字 | string | — | — |
 | tabindex | 输入框的tabindex | string | - | - |
-| validate-event | 输入时是否触发表单的校验 | boolean | - | - |
+| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
 
 ### Input Slots
 | name | 说明 |

packages/date-picker/src/picker.vue

@@ -386,7 +386,11 @@ export default {
       default: '-'
     },
     pickerOptions: {},
-    unlinkPanels: Boolean
+    unlinkPanels: Boolean,
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
   },
 
   components: { ElInput },
@@ -413,7 +417,9 @@ export default {
         this.hidePicker();
         this.emitChange(this.value);
         this.userInput = null;
+        if (this.validateEvent) {
           this.dispatch('ElFormItem', 'el.form.blur');
+        }
         this.$emit('blur', this);
         this.blur();
       }
@@ -433,7 +439,7 @@ export default {
       }
     },
     value(val, oldVal) {
-      if (!valueEquals(val, oldVal) && !this.pickerVisible) {
+      if (!valueEquals(val, oldVal) && !this.pickerVisible && this.validateEvent) {
         this.dispatch('ElFormItem', 'el.form.change', val);
       }
     }
@@ -897,8 +903,10 @@ 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;
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', val);
+        }
       }
     },