Commit 2dbbd7dea6fd15611cc05db52fdcc2eab89e0cbe
1 parent
91505561
update TimePicker
update TimePicker
Showing
5 changed files
with
44 additions
and
9 deletions
Show diff stats
src/components/date-picker/base/time-spinner.vue
| ... | ... | @@ -27,15 +27,15 @@ |
| 27 | 27 | mixins: [Options], |
| 28 | 28 | props: { |
| 29 | 29 | hours: { |
| 30 | - type: Number, | |
| 30 | + type: [Number, String], | |
| 31 | 31 | default: 0 |
| 32 | 32 | }, |
| 33 | 33 | minutes: { |
| 34 | - type: Number, | |
| 34 | + type: [Number, String], | |
| 35 | 35 | default: 0 |
| 36 | 36 | }, |
| 37 | 37 | seconds: { |
| 38 | - type: Number, | |
| 38 | + type: [Number, String], | |
| 39 | 39 | default: 0 |
| 40 | 40 | }, |
| 41 | 41 | showSeconds: { | ... | ... |
src/components/date-picker/panel/time.vue
| ... | ... | @@ -26,6 +26,8 @@ |
| 26 | 26 | |
| 27 | 27 | import Mixin from './mixin'; |
| 28 | 28 | |
| 29 | + import { initTimeDate } from '../util'; | |
| 30 | + | |
| 29 | 31 | const prefixCls = 'ivu-picker-panel'; |
| 30 | 32 | const timePrefixCls = 'ivu-time-picker'; |
| 31 | 33 | |
| ... | ... | @@ -37,11 +39,11 @@ |
| 37 | 39 | prefixCls: prefixCls, |
| 38 | 40 | timePrefixCls: timePrefixCls, |
| 39 | 41 | format: 'HH:mm:ss', |
| 40 | - date: new Date(), | |
| 42 | + date: initTimeDate(), | |
| 41 | 43 | value: '', |
| 42 | - hours: 0, | |
| 43 | - minutes: 0, | |
| 44 | - seconds: 0, | |
| 44 | + hours: '', | |
| 45 | + minutes: '', | |
| 46 | + seconds: '', | |
| 45 | 47 | disabledHours: [], |
| 46 | 48 | disabledMinutes: [], |
| 47 | 49 | disabledSeconds: [], |
| ... | ... | @@ -68,6 +70,13 @@ |
| 68 | 70 | } |
| 69 | 71 | }, |
| 70 | 72 | methods: { |
| 73 | + handleClear() { | |
| 74 | + this.date = initTimeDate(); | |
| 75 | + this.hours = ''; | |
| 76 | + this.minutes = ''; | |
| 77 | + this.seconds = ''; | |
| 78 | + this.$emit('on-pick', ''); | |
| 79 | + }, | |
| 71 | 80 | handleChange (date, emit = true) { |
| 72 | 81 | if (date.hours !== undefined) { |
| 73 | 82 | this.date.setHours(date.hours); | ... | ... |
src/components/date-picker/picker.vue
| ... | ... | @@ -30,7 +30,7 @@ |
| 30 | 30 | import Drop from '../../components/select/dropdown.vue'; |
| 31 | 31 | import clickoutside from '../../directives/clickoutside'; |
| 32 | 32 | import { oneOf } from '../../utils/assist'; |
| 33 | - import { formatDate, parseDate } from './util'; | |
| 33 | + import { formatDate, parseDate, initTimeDate } from './util'; | |
| 34 | 34 | |
| 35 | 35 | const prefixCls = 'ivu-date-picker'; |
| 36 | 36 | |
| ... | ... | @@ -413,6 +413,15 @@ |
| 413 | 413 | value: { |
| 414 | 414 | immediate: true, |
| 415 | 415 | handler (val) { |
| 416 | + const type = this.type; | |
| 417 | + if (type === 'time') { | |
| 418 | + const parser = ( | |
| 419 | + TYPE_VALUE_RESOLVER_MAP[type] || | |
| 420 | + TYPE_VALUE_RESOLVER_MAP['default'] | |
| 421 | + ).parser; | |
| 422 | + | |
| 423 | + val = parser(val, this.format || DEFAULT_FORMATS[type]); | |
| 424 | + } | |
| 416 | 425 | this.internalValue = val; |
| 417 | 426 | } |
| 418 | 427 | }, | ... | ... |
src/components/date-picker/util.js
| ... | ... | @@ -74,4 +74,12 @@ export const nextMonth = function(src) { |
| 74 | 74 | src.setFullYear(newYear); |
| 75 | 75 | |
| 76 | 76 | return new Date(src.getTime()); |
| 77 | +}; | |
| 78 | + | |
| 79 | +export const initTimeDate = function (time) { | |
| 80 | + const date = new Date(); | |
| 81 | + date.setHours(0); | |
| 82 | + date.setMinutes(0); | |
| 83 | + date.setSeconds(0); | |
| 84 | + return date; | |
| 77 | 85 | }; |
| 78 | 86 | \ No newline at end of file | ... | ... |
test/routers/date.vue
| ... | ... | @@ -12,12 +12,14 @@ |
| 12 | 12 | <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker> |
| 13 | 13 | </i-col> |
| 14 | 14 | <i-col span="12"> |
| 15 | + <span>123,{{value}},456</span> | |
| 15 | 16 | <time-picker |
| 16 | 17 | :value="value" |
| 17 | 18 | placeholder="选择时间" |
| 18 | 19 | format="HH:mm:ss" |
| 19 | 20 | :hide-disabled-options="false" |
| 20 | 21 | :disabled-hours="[1,2,5,10,11]" |
| 22 | + @on-change="c" | |
| 21 | 23 | style="width: 168px"></time-picker> |
| 22 | 24 | </i-col> |
| 23 | 25 | </row> |
| ... | ... | @@ -26,7 +28,14 @@ |
| 26 | 28 | export default { |
| 27 | 29 | data () { |
| 28 | 30 | return { |
| 29 | - value: '2016-12-12 03:03:03' | |
| 31 | +// value: '2016-12-12 03:03:03' | |
| 32 | + value: '15:12:01' | |
| 33 | + } | |
| 34 | + }, | |
| 35 | + methods: { | |
| 36 | + c (s) { | |
| 37 | + console.log(s) | |
| 38 | + this.value = s; | |
| 30 | 39 | } |
| 31 | 40 | } |
| 32 | 41 | } | ... | ... |