Commit 2dbbd7dea6fd15611cc05db52fdcc2eab89e0cbe

Authored by 梁灏
1 parent 91505561

update TimePicker

update TimePicker
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 }