DatePicker: Add change event return input value, resolve #1841

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

@@ -273,4 +273,10 @@ Picking a date range is supported.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | title of the shortcut | string | — | — |
-| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
+| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | triggers when input value changes, return format value | |

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

@@ -229,3 +229,10 @@ Select date and time in one picker.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | title of the shortcut | string | — | — |
 | onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | triggers when input value changes, return format value | |
+

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

@@ -166,3 +166,10 @@ Can pick an arbitrary time range.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
+
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | triggers when input value changes, return format value | |
+

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

@@ -308,3 +308,9 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | text | 标题文本 | string | — | — |
 | onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | 当 input 的值改变时触发，返回值和文本框一致 | format value |
+

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

@@ -254,3 +254,9 @@
 | onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
 
 
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | 当 input 的值改变时触发，返回值和文本框一致 | format value |
+
+

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

@@ -174,3 +174,11 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
 
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| change | 当 input 的值改变时触发，返回值和文本框一致 | format value |
+
+
+

examples/play/component.vue

@@ -1,19 +1,25 @@
 <template>
   <div>
     <el-button>Test</el-button>
+    <el-date-picker v-model="abc" type="daterange" format="yyyy-MM" @change="eee"></el-date-picker>
   </div>
 </template>
 
 <style scoped>
 </style>
 
-<script type="text/ecmascript-6">
+<script type="text/babel">
   export default {
     methods: {
+      eee(a) {
+        console.log(a);
+      }
     },
 
     data() {
-      return {};
+      return {
+        abc: ''
+      };
     }
   };
 </script>

packages/date-picker/src/picker.vue

@@ -304,13 +304,11 @@ export default {
 
           if (parsedValue && this.picker) {
             this.picker.value = parsedValue;
-          } else {
-            this.$forceUpdate();
           }
         } else {
           this.picker.value = value;
-          this.$forceUpdate();
         }
+        this.$forceUpdate();
       }
     }
   },
@@ -437,6 +435,8 @@ export default {
         this.picker.$on('dodestroy', this.doDestroy);
         this.picker.$on('pick', (date, visible = false) => {
           if (this.dateIsUpdated(date)) this.$emit('input', date);
+
+          this.$nextTick(() => this.$emit('change', this.visualValue));
           this.pickerVisible = this.picker.visible = visible;
           this.picker.resetView && this.picker.resetView();
         });