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 | 359 | this.internalValue = ''; |
| 360 | 360 | this.value = ''; |
| 361 | 361 | this.$emit('on-clear'); |
| 362 | + this.$dispatch('on-form-change', ''); | |
| 362 | 363 | }, |
| 363 | 364 | showPicker () { |
| 364 | 365 | if (!this.picker) { |
| ... | ... | @@ -387,11 +388,10 @@ |
| 387 | 388 | |
| 388 | 389 | this.picker.$on('on-pick', (date, visible = false) => { |
| 389 | 390 | if (!this.confirm) this.visible = visible; |
| 390 | - | |
| 391 | - this.emitChange(date); | |
| 392 | 391 | this.value = date; |
| 393 | 392 | this.picker.value = date; |
| 394 | 393 | this.picker.resetView && this.picker.resetView(); |
| 394 | + this.emitChange(date); | |
| 395 | 395 | }); |
| 396 | 396 | |
| 397 | 397 | this.picker.$on('on-pick-clear', () => { |
| ... | ... | @@ -424,6 +424,7 @@ |
| 424 | 424 | } |
| 425 | 425 | |
| 426 | 426 | this.$emit('on-change', newDate); |
| 427 | + this.$dispatch('on-form-change', newDate); | |
| 427 | 428 | } |
| 428 | 429 | }, |
| 429 | 430 | watch: { |
| ... | ... | @@ -478,6 +479,14 @@ |
| 478 | 479 | }, |
| 479 | 480 | ready () { |
| 480 | 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 | 492 | </script> | ... | ... |
test/routers/date.vue
| 1 | 1 | <template> |
| 2 | + {{value1}} -- {{ value2 }} | |
| 2 | 3 | <row> |
| 3 | 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 | 6 | </i-col> |
| 6 | 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 | 9 | </i-col> |
| 9 | 10 | </row> |
| 10 | 11 | </template> |
| ... | ... | @@ -12,7 +13,8 @@ |
| 12 | 13 | export default { |
| 13 | 14 | data () { |
| 14 | 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 | 63 | <form-item label="多选滑块" prop="slider"> |
| 64 | 64 | <Slider :value.sync="form.slider" range></Slider> |
| 65 | 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 | 74 | <form-item> |
| 67 | 75 | <i-button type="primary" @click="onSubmit('form')">提交</i-button> |
| 68 | 76 | </form-item> |
| ... | ... | @@ -108,7 +116,9 @@ |
| 108 | 116 | checkboxgroup: [], |
| 109 | 117 | select: '', |
| 110 | 118 | selectm: [], |
| 111 | - slider: [40, 50] | |
| 119 | + slider: [40, 50], | |
| 120 | + date: '', | |
| 121 | + date2: '' | |
| 112 | 122 | }, |
| 113 | 123 | rules: { |
| 114 | 124 | mail: [ |
| ... | ... | @@ -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 | 203 | return false; |
| 173 | 204 | } |
| 174 | 205 | }); |
| 206 | + }, | |
| 207 | + c (s) { | |
| 208 | + console.log(this.form.date) | |
| 175 | 209 | } |
| 176 | 210 | } |
| 177 | 211 | }; | ... | ... |