Commit 73d10c280be5c99c94cf09411da09d7aa925044a
1 parent
d1703993
update DatePicker
update DatePicker
Showing
3 changed files
with
51 additions
and
6 deletions
Show diff stats
src/components/date-picker/picker.vue
| @@ -359,6 +359,7 @@ | @@ -359,6 +359,7 @@ | ||
| 359 | this.internalValue = ''; | 359 | this.internalValue = ''; |
| 360 | this.value = ''; | 360 | this.value = ''; |
| 361 | this.$emit('on-clear'); | 361 | this.$emit('on-clear'); |
| 362 | + this.$dispatch('on-form-change', ''); | ||
| 362 | }, | 363 | }, |
| 363 | showPicker () { | 364 | showPicker () { |
| 364 | if (!this.picker) { | 365 | if (!this.picker) { |
| @@ -387,11 +388,10 @@ | @@ -387,11 +388,10 @@ | ||
| 387 | 388 | ||
| 388 | this.picker.$on('on-pick', (date, visible = false) => { | 389 | this.picker.$on('on-pick', (date, visible = false) => { |
| 389 | if (!this.confirm) this.visible = visible; | 390 | if (!this.confirm) this.visible = visible; |
| 390 | - | ||
| 391 | - this.emitChange(date); | ||
| 392 | this.value = date; | 391 | this.value = date; |
| 393 | this.picker.value = date; | 392 | this.picker.value = date; |
| 394 | this.picker.resetView && this.picker.resetView(); | 393 | this.picker.resetView && this.picker.resetView(); |
| 394 | + this.emitChange(date); | ||
| 395 | }); | 395 | }); |
| 396 | 396 | ||
| 397 | this.picker.$on('on-pick-clear', () => { | 397 | this.picker.$on('on-pick-clear', () => { |
| @@ -424,6 +424,7 @@ | @@ -424,6 +424,7 @@ | ||
| 424 | } | 424 | } |
| 425 | 425 | ||
| 426 | this.$emit('on-change', newDate); | 426 | this.$emit('on-change', newDate); |
| 427 | + this.$dispatch('on-form-change', newDate); | ||
| 427 | } | 428 | } |
| 428 | }, | 429 | }, |
| 429 | watch: { | 430 | watch: { |
| @@ -478,6 +479,14 @@ | @@ -478,6 +479,14 @@ | ||
| 478 | }, | 479 | }, |
| 479 | ready () { | 480 | ready () { |
| 480 | if (this.open !== null) this.visible = this.open; | 481 | if (this.open !== null) this.visible = this.open; |
| 482 | + }, | ||
| 483 | + events: { | ||
| 484 | + 'on-form-blur' () { | ||
| 485 | + return false; | ||
| 486 | + }, | ||
| 487 | + 'on-form-change' () { | ||
| 488 | + return false; | ||
| 489 | + } | ||
| 481 | } | 490 | } |
| 482 | }; | 491 | }; |
| 483 | </script> | 492 | </script> |
test/routers/date.vue
| 1 | <template> | 1 | <template> |
| 2 | + {{value1}} -- {{ value2 }} | ||
| 2 | <row> | 3 | <row> |
| 3 | <i-col span="12"> | 4 | <i-col span="12"> |
| 4 | - <Time-picker :value="val" type="time" placeholder="选择时间" style="width: 168px"></Time-picker> | 5 | + <Date-picker :value.sync="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 200px"></Date-picker> |
| 5 | </i-col> | 6 | </i-col> |
| 6 | <i-col span="12"> | 7 | <i-col span="12"> |
| 7 | - <Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker> | 8 | + <Date-picker :value.sync="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker> |
| 8 | </i-col> | 9 | </i-col> |
| 9 | </row> | 10 | </row> |
| 10 | </template> | 11 | </template> |
| @@ -12,7 +13,8 @@ | @@ -12,7 +13,8 @@ | ||
| 12 | export default { | 13 | export default { |
| 13 | data () { | 14 | data () { |
| 14 | return { | 15 | return { |
| 15 | - val: new Date | 16 | + value1: '2016-01-01', |
| 17 | + value2: ['2016-01-01', '2016-02-15'] | ||
| 16 | } | 18 | } |
| 17 | } | 19 | } |
| 18 | } | 20 | } |
test/routers/form.vue
| @@ -63,6 +63,14 @@ | @@ -63,6 +63,14 @@ | ||
| 63 | <form-item label="多选滑块" prop="slider"> | 63 | <form-item label="多选滑块" prop="slider"> |
| 64 | <Slider :value.sync="form.slider" range></Slider> | 64 | <Slider :value.sync="form.slider" range></Slider> |
| 65 | </form-item> | 65 | </form-item> |
| 66 | + <form-item label="日期" prop="date"> | ||
| 67 | + {{ form.date }} | ||
| 68 | + <Time-picker :value.sync="form.date" type="time" placeholder="选择时间" style="width: 168px"></Time-picker> | ||
| 69 | + </form-item> | ||
| 70 | + <form-item label="两个日期" prop="date2"> | ||
| 71 | + {{ form.date2 | json}} | ||
| 72 | + <Date-picker :value.sync="form.date2" type="daterange" placement="bottom-end" placeholder="选择日期" @on-change="c"></Date-picker> | ||
| 73 | + </form-item> | ||
| 66 | <form-item> | 74 | <form-item> |
| 67 | <i-button type="primary" @click="onSubmit('form')">提交</i-button> | 75 | <i-button type="primary" @click="onSubmit('form')">提交</i-button> |
| 68 | </form-item> | 76 | </form-item> |
| @@ -108,7 +116,9 @@ | @@ -108,7 +116,9 @@ | ||
| 108 | checkboxgroup: [], | 116 | checkboxgroup: [], |
| 109 | select: '', | 117 | select: '', |
| 110 | selectm: [], | 118 | selectm: [], |
| 111 | - slider: [40, 50] | 119 | + slider: [40, 50], |
| 120 | + date: '', | ||
| 121 | + date2: '' | ||
| 112 | }, | 122 | }, |
| 113 | rules: { | 123 | rules: { |
| 114 | mail: [ | 124 | mail: [ |
| @@ -157,6 +167,27 @@ | @@ -157,6 +167,27 @@ | ||
| 157 | } | 167 | } |
| 158 | } | 168 | } |
| 159 | } | 169 | } |
| 170 | + ], | ||
| 171 | + date: [ | ||
| 172 | + { | ||
| 173 | + required: true | ||
| 174 | + }, | ||
| 175 | + { | ||
| 176 | + type: 'date' | ||
| 177 | + } | ||
| 178 | + ], | ||
| 179 | + date2: [ | ||
| 180 | + { | ||
| 181 | + type: 'array', len: 2, | ||
| 182 | + fields: { | ||
| 183 | + 0: { | ||
| 184 | + type: 'date', required: true | ||
| 185 | + }, | ||
| 186 | + 1: { | ||
| 187 | + type: 'date', required: true | ||
| 188 | + } | ||
| 189 | + } | ||
| 190 | + } | ||
| 160 | ] | 191 | ] |
| 161 | } | 192 | } |
| 162 | } | 193 | } |
| @@ -172,6 +203,9 @@ | @@ -172,6 +203,9 @@ | ||
| 172 | return false; | 203 | return false; |
| 173 | } | 204 | } |
| 174 | }); | 205 | }); |
| 206 | + }, | ||
| 207 | + c (s) { | ||
| 208 | + console.log(this.form.date) | ||
| 175 | } | 209 | } |
| 176 | } | 210 | } |
| 177 | }; | 211 | }; |