update TimePicker

update TimePicker

src/components/date-picker/base/time-spinner.vue

@@ -27,15 +27,15 @@
         mixins: [Options],
         props: {
             hours: {
-                type: Number,
+                type: [Number, String],
                 default: 0
             },
             minutes: {
-                type: Number,
+                type: [Number, String],
                 default: 0
             },
             seconds: {
-                type: Number,
+                type: [Number, String],
                 default: 0
             },
             showSeconds: {

src/components/date-picker/panel/time.vue

@@ -26,6 +26,8 @@
 
     import Mixin from './mixin';
 
+    import { initTimeDate } from '../util';
+
     const prefixCls = 'ivu-picker-panel';
     const timePrefixCls = 'ivu-time-picker';
 
@@ -37,11 +39,11 @@
                 prefixCls: prefixCls,
                 timePrefixCls: timePrefixCls,
                 format: 'HH:mm:ss',
-                date: new Date(),
+                date: initTimeDate(),
                 value: '',
-                hours: 0,
-                minutes: 0,
-                seconds: 0,
+                hours: '',
+                minutes: '',
+                seconds: '',
                 disabledHours: [],
                 disabledMinutes: [],
                 disabledSeconds: [],
@@ -68,6 +70,13 @@
             }
         },
         methods: {
+            handleClear() {
+                this.date = initTimeDate();
+                this.hours = '';
+                this.minutes = '';
+                this.seconds = '';
+                this.$emit('on-pick', '');
+            },
             handleChange (date, emit = true) {
                 if (date.hours !== undefined) {
                     this.date.setHours(date.hours);

src/components/date-picker/picker.vue

@@ -30,7 +30,7 @@
     import Drop from '../../components/select/dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
     import { oneOf } from '../../utils/assist';
-    import { formatDate, parseDate } from './util';
+    import { formatDate, parseDate, initTimeDate } from './util';
 
     const prefixCls = 'ivu-date-picker';
 
@@ -413,6 +413,15 @@
             value: {
                 immediate: true,
                 handler (val) {
+                    const type = this.type;
+                    if (type === 'time') {
+                        const parser = (
+                            TYPE_VALUE_RESOLVER_MAP[type] ||
+                            TYPE_VALUE_RESOLVER_MAP['default']
+                        ).parser;
+
+                        val = parser(val, this.format || DEFAULT_FORMATS[type]);
+                    }
                     this.internalValue = val;
                 }
             },

src/components/date-picker/util.js

@@ -74,4 +74,12 @@ export const nextMonth = function(src) {
     src.setFullYear(newYear);
 
     return new Date(src.getTime());
+};
+
+export const initTimeDate = function (time) {
+    const date = new Date();
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setSeconds(0);
+    return date;
 };

test/routers/date.vue

@@ -12,12 +12,14 @@
             <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
         </i-col>
         <i-col span="12">
+            <span>123,{{value}},456</span>
             <time-picker
                 :value="value"
                 placeholder="选择时间"
                 format="HH:mm:ss"
                 :hide-disabled-options="false"
                 :disabled-hours="[1,2,5,10,11]"
+                @on-change="c"
                 style="width: 168px"></time-picker>
         </i-col>
     </row>
@@ -26,7 +28,14 @@
     export default {
         data () {
             return {
-                value: '2016-12-12 03:03:03'
+//                value: '2016-12-12 03:03:03'
+                value: '15:12:01'
+            }
+        },
+        methods: {
+            c (s) {
+                console.log(s)
+                this.value = s;
             }
         }
     }