update DatePicker

update DatePicker

src/components/date-picker/picker.vue

@@ -359,6 +359,7 @@
                 this.internalValue = '';
                 this.value = '';
                 this.$emit('on-clear');
+                this.$dispatch('on-form-change', '');
             },
             showPicker () {
                 if (!this.picker) {
@@ -387,11 +388,10 @@
 
                     this.picker.$on('on-pick', (date, visible = false) => {
                         if (!this.confirm) this.visible = visible;
-
-                        this.emitChange(date);
                         this.value = date;
                         this.picker.value = date;
                         this.picker.resetView && this.picker.resetView();
+                        this.emitChange(date);
                     });
 
                     this.picker.$on('on-pick-clear', () => {
@@ -424,6 +424,7 @@
                 }
 
                 this.$emit('on-change', newDate);
+                this.$dispatch('on-form-change', newDate);
             }
         },
         watch: {
@@ -478,6 +479,14 @@
         },
         ready () {
             if (this.open !== null) this.visible = this.open;
+        },
+        events: {
+            'on-form-blur' () {
+                return false;
+            },
+            'on-form-change' () {
+                return false;
+            }
         }
     };
 </script>

test/routers/date.vue

@@ -1,10 +1,11 @@
 <template>
+    {{value1}} -- {{ value2 }}
     <row>
         <i-col span="12">
-            <Time-picker :value="val" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
+            <Date-picker :value.sync="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
         </i-col>
         <i-col span="12">
-            <Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>
+            <Date-picker :value.sync="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
         </i-col>
     </row>
 </template>
@@ -12,7 +13,8 @@
     export default {
         data () {
             return {
-                val: new Date
+                value1: '2016-01-01',
+                value2: ['2016-01-01', '2016-02-15']
             }
         }
     }

test/routers/form.vue

@@ -63,6 +63,14 @@
             <form-item label="多选滑块" prop="slider">
                 <Slider :value.sync="form.slider" range></Slider>
             </form-item>
+            <form-item label="日期" prop="date">
+                {{ form.date }}
+                <Time-picker :value.sync="form.date" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
+            </form-item>
+            <form-item label="两个日期" prop="date2">
+                {{ form.date2 | json}}
+                <Date-picker :value.sync="form.date2" type="daterange" placement="bottom-end" placeholder="选择日期" @on-change="c"></Date-picker>
+            </form-item>
             <form-item>
                 <i-button type="primary" @click="onSubmit('form')">提交</i-button>
             </form-item>
@@ -108,7 +116,9 @@
                     checkboxgroup: [],
                     select: '',
                     selectm: [],
-                    slider: [40, 50]
+                    slider: [40, 50],
+                    date: '',
+                    date2: ''
                 },
                 rules: {
                     mail: [
@@ -157,6 +167,27 @@
                                 }
                             }
                         }
+                    ],
+                    date: [
+                        {
+                            required: true
+                        },
+                        {
+                            type: 'date'
+                        }
+                    ],
+                    date2: [
+                        {
+                            type: 'array', len: 2,
+                            fields: {
+                                0: {
+                                    type: 'date', required: true
+                                },
+                                1: {
+                                    type: 'date', required: true
+                                }
+                            }
+                        }
                     ]
                 }
             }
@@ -172,6 +203,9 @@
                         return false;
                     }
                 });
+            },
+            c (s) {
+                console.log(this.form.date)
             }
         }
     };