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
src/components/date-picker/picker.vue
| ... | ... | @@ -181,7 +181,6 @@ |
| 181 | 181 | return { |
| 182 | 182 | prefixCls: prefixCls, |
| 183 | 183 | showClose: false, |
| 184 | - visualValue: '', | |
| 185 | 184 | visible: false, |
| 186 | 185 | picker: null, |
| 187 | 186 | internalValue: '' |
| ... | ... | @@ -226,7 +225,6 @@ |
| 226 | 225 | TYPE_VALUE_RESOLVER_MAP['default'] |
| 227 | 226 | ).parser; |
| 228 | 227 | const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); |
| 229 | - | |
| 230 | 228 | if (parsedValue) { |
| 231 | 229 | if (this.picker) this.picker.value = parsedValue; |
| 232 | 230 | } |
| ... | ... | @@ -241,13 +239,36 @@ |
| 241 | 239 | this.visible = false; |
| 242 | 240 | }, |
| 243 | 241 | handleFocus () { |
| 242 | + if (this.readonly) return; | |
| 244 | 243 | this.visible = true; |
| 245 | 244 | }, |
| 246 | 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 | 273 | handleInputMouseenter () { |
| 253 | 274 | if (this.readonly || this.disabled) return; |
| ... | ... | @@ -277,9 +298,10 @@ |
| 277 | 298 | } |
| 278 | 299 | |
| 279 | 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 | 302 | this.value = date; |
| 282 | 303 | this.visible = visible; |
| 304 | + this.picker.value = date; | |
| 283 | 305 | this.picker.resetView && this.picker.resetView(); |
| 284 | 306 | }); |
| 285 | 307 | ... | ... |
src/components/input/input.vue
| ... | ... | @@ -141,8 +141,8 @@ |
| 141 | 141 | handleBlur () { |
| 142 | 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 | 147 | resizeTextarea () { |
| 148 | 148 | const autosize = this.autosize; | ... | ... |
test/routers/date.vue
| ... | ... | @@ -3,7 +3,14 @@ |
| 3 | 3 | <br> |
| 4 | 4 | <row> |
| 5 | 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 | 14 | </i-col> |
| 8 | 15 | <i-col span="4"> |
| 9 | 16 | <date-picker type="year" style="width:200px" placeholder="请选择日期" :value.sync="value" :options="options"></date-picker> | ... | ... |