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 | } | ... | ... |