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