Commit e1874103ad46f664075ed59ba51ea77d01de0aed
1 parent
f46ebc38
update DatePicker
update DatePicker
Showing
4 changed files
with
37 additions
and
9 deletions
Show diff stats
src/components/date-picker/panel/date.vue
| @@ -103,7 +103,6 @@ | @@ -103,7 +103,6 @@ | ||
| 103 | }, | 103 | }, |
| 104 | watch: { | 104 | watch: { |
| 105 | value (newVal) { | 105 | value (newVal) { |
| 106 | - console.log(12331) | ||
| 107 | if (!newVal) return; | 106 | if (!newVal) return; |
| 108 | newVal = new Date(newVal); | 107 | newVal = new Date(newVal); |
| 109 | if (!isNaN(newVal)) { | 108 | if (!isNaN(newVal)) { |
src/components/date-picker/picker.vue
| @@ -181,7 +181,6 @@ | @@ -181,7 +181,6 @@ | ||
| 181 | return { | 181 | return { |
| 182 | prefixCls: prefixCls, | 182 | prefixCls: prefixCls, |
| 183 | showClose: false, | 183 | showClose: false, |
| 184 | - visualValue: '', | ||
| 185 | visible: false, | 184 | visible: false, |
| 186 | picker: null, | 185 | picker: null, |
| 187 | internalValue: '' | 186 | internalValue: '' |
| @@ -226,7 +225,6 @@ | @@ -226,7 +225,6 @@ | ||
| 226 | TYPE_VALUE_RESOLVER_MAP['default'] | 225 | TYPE_VALUE_RESOLVER_MAP['default'] |
| 227 | ).parser; | 226 | ).parser; |
| 228 | const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); | 227 | const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); |
| 229 | - | ||
| 230 | if (parsedValue) { | 228 | if (parsedValue) { |
| 231 | if (this.picker) this.picker.value = parsedValue; | 229 | if (this.picker) this.picker.value = parsedValue; |
| 232 | } | 230 | } |
| @@ -241,13 +239,36 @@ | @@ -241,13 +239,36 @@ | ||
| 241 | this.visible = false; | 239 | this.visible = false; |
| 242 | }, | 240 | }, |
| 243 | handleFocus () { | 241 | handleFocus () { |
| 242 | + if (this.readonly) return; | ||
| 244 | this.visible = true; | 243 | this.visible = true; |
| 245 | }, | 244 | }, |
| 246 | handleBlur () { | 245 | handleBlur () { |
| 247 | 246 | ||
| 248 | }, | 247 | }, |
| 249 | - handleInputChange (val) { | ||
| 250 | - this.visualValue = val; | 248 | + handleInputChange (event) { |
| 249 | + const oldValue = this.visualValue; | ||
| 250 | + const value = event.target.value; | ||
| 251 | + | ||
| 252 | + let correctValue = ''; | ||
| 253 | + const format = this.format || DEFAULT_FORMATS[this.type]; | ||
| 254 | + const parsedDate = parseDate(value, format); | ||
| 255 | + | ||
| 256 | + if (parsedDate instanceof Date) { | ||
| 257 | + const options = this.options; | ||
| 258 | + if (options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) { | ||
| 259 | + correctValue = oldValue; | ||
| 260 | + } else { | ||
| 261 | + correctValue = formatDate(parsedDate, format); | ||
| 262 | + } | ||
| 263 | + } else { | ||
| 264 | + correctValue = oldValue; | ||
| 265 | + } | ||
| 266 | + | ||
| 267 | + const correctDate = parseDate(correctValue, format); | ||
| 268 | + | ||
| 269 | + this.visualValue = correctValue; | ||
| 270 | + event.target.value = correctValue; | ||
| 271 | + this.internalValue = correctDate; | ||
| 251 | }, | 272 | }, |
| 252 | handleInputMouseenter () { | 273 | handleInputMouseenter () { |
| 253 | if (this.readonly || this.disabled) return; | 274 | if (this.readonly || this.disabled) return; |
| @@ -277,9 +298,10 @@ | @@ -277,9 +298,10 @@ | ||
| 277 | } | 298 | } |
| 278 | 299 | ||
| 279 | this.picker.$on('on-pick', (date, visible = false) => { | 300 | this.picker.$on('on-pick', (date, visible = false) => { |
| 280 | - this.$emit('on-change', date); | 301 | + this.$emit('on-change', formatDate(date, this.format || DEFAULT_FORMATS[this.type])); |
| 281 | this.value = date; | 302 | this.value = date; |
| 282 | this.visible = visible; | 303 | this.visible = visible; |
| 304 | + this.picker.value = date; | ||
| 283 | this.picker.resetView && this.picker.resetView(); | 305 | this.picker.resetView && this.picker.resetView(); |
| 284 | }); | 306 | }); |
| 285 | 307 |
src/components/input/input.vue
| @@ -141,8 +141,8 @@ | @@ -141,8 +141,8 @@ | ||
| 141 | handleBlur () { | 141 | handleBlur () { |
| 142 | this.$emit('on-blur'); | 142 | this.$emit('on-blur'); |
| 143 | }, | 143 | }, |
| 144 | - handleChange () { | ||
| 145 | - this.$emit('on-change', this.value); | 144 | + handleChange (event) { |
| 145 | + this.$emit('on-change', event); | ||
| 146 | }, | 146 | }, |
| 147 | resizeTextarea () { | 147 | resizeTextarea () { |
| 148 | const autosize = this.autosize; | 148 | const autosize = this.autosize; |
test/routers/date.vue
| @@ -3,7 +3,14 @@ | @@ -3,7 +3,14 @@ | ||
| 3 | <br> | 3 | <br> |
| 4 | <row> | 4 | <row> |
| 5 | <i-col span="4"> | 5 | <i-col span="4"> |
| 6 | - <date-picker style="width:200px" placeholder="请选择日期" :value.sync="value" :options="options" @on-change="change" @on-open-change="change2" :format="format"></date-picker> | 6 | + <date-picker |
| 7 | + style="width:200px" | ||
| 8 | + placeholder="请选择日期" | ||
| 9 | + :value.sync="value" | ||
| 10 | + :options="options" | ||
| 11 | + @on-change="change" | ||
| 12 | + :format="format" | ||
| 13 | + @on-open-change="change2"></date-picker> | ||
| 7 | </i-col> | 14 | </i-col> |
| 8 | <i-col span="4"> | 15 | <i-col span="4"> |
| 9 | <date-picker type="year" style="width:200px" placeholder="请选择日期" :value.sync="value" :options="options"></date-picker> | 16 | <date-picker type="year" style="width:200px" placeholder="请选择日期" :value.sync="value" :options="options"></date-picker> |