update TimePicker

update TimePicker

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

@@ -45,7 +45,8 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                compiled: false
             };
         },
         computed: {
@@ -155,11 +156,16 @@
                     data[type] = cell.text;
                     this.$emit('on-change', data);
 
-                    const from = this.$els[type].scrollTop;
+//                    const from = this.$els[type].scrollTop;
-                    const to = 24 * this.getScrollIndex(type, cell.text);
+//                    const to = 24 * this.getScrollIndex(type, cell.text);
-                    scrollTop(this.$els[type], from, to, 500);
+//                    scrollTop(this.$els[type], from, to, 500);
                 }
             },
+            scroll (type, index) {
+                const from = this.$els[type].scrollTop;
+                const to = 24 * this.getScrollIndex(type, index);
+                scrollTop(this.$els[type], from, to, 500);
+            },
             getScrollIndex (type, index) {
                 const Type = firstUpperCase(type);
                 const disabled = this[`disabled${Type}`];
@@ -181,8 +187,23 @@
                 });
             }
         },
+        watch: {
+            hours (val) {
+                if (!this.compiled) return;
+                this.scroll('hours', val);
+            },
+            minutes (val) {
+                if (!this.compiled) return;
+                this.scroll('minutes', val);
+            },
+            seconds (val) {
+                if (!this.compiled) return;
+                this.scroll('seconds', val);
+            }
+        },
         compiled () {
             this.updateScroll();
+            this.$nextTick(() => this.compiled = true);
         }
     };
 </script>

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

@@ -75,7 +75,6 @@
                 this.hours = '';
                 this.minutes = '';
                 this.seconds = '';
-                this.$emit('on-pick', '');
             },
             handleChange (date, emit = true) {
                 if (date.hours !== undefined) {

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, initTimeDate } from './util';
+    import { formatDate, parseDate } from './util';
 
     const prefixCls = 'ivu-date-picker';
 
@@ -294,6 +294,30 @@
                     }
 
                     correctDate = parser(correctValue, format);
+                } else if (type === 'time') {
+                    const parsedDate = parseDate(value, format);
+
+                    if (parsedDate instanceof Date) {
+                        if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
+                            const hours = parsedDate.getHours();
+                            const minutes = parsedDate.getMinutes();
+                            const seconds = parsedDate.getSeconds();
+
+                            if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
+                                (this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
+                                (this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
+                                correctValue = oldValue;
+                            } else {
+                                correctValue = formatDate(parsedDate, format);
+                            }
+                        } else {
+                            correctValue = formatDate(parsedDate, format);
+                        }
+                    } else {
+                        correctValue = oldValue;
+                    }
+
+                    correctDate = parseDate(correctValue, format);
                 } else {
                     const parsedDate = parseDate(value, format);
 

src/components/date-picker/util.js

@@ -76,7 +76,7 @@ export const nextMonth = function(src) {
     return new Date(src.getTime());
 };
 
-export const initTimeDate = function (time) {
+export const initTimeDate = function () {
     const date = new Date();
     date.setHours(0);
     date.setMinutes(0);

src/utils/assist.js

@@ -144,7 +144,7 @@ export function scrollTop(el, from = 0, to, duration = 500) {
             function (callback) {
                 return window.setTimeout(callback, 1000/60);
             }
-        )
+        );
     }
     const difference = Math.abs(from - to);
     const step = Math.ceil(difference / duration * 50);

test/routers/date.vue

@@ -6,7 +6,7 @@
 <template>
     <row>
         <i-col span="12">
-            <date-picker type="date" placeholder="选择日期" style="width: 200px"></date-picker>
+            <date-picker type="date" placeholder="选择日期" style="width: 200px" @on-ok="ok" confirm @on-clear="clear"></date-picker>
         </i-col>
         <i-col span="12">
             <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
@@ -20,6 +20,8 @@
                 :hide-disabled-options="false"
                 :disabled-hours="[1,2,5,10,11]"
                 @on-change="c"
+                @on-ok="ok"
+                @on-clear="clear"
                 style="width: 168px"></time-picker>
         </i-col>
     </row>
@@ -34,8 +36,14 @@
         },
         methods: {
             c (s) {
-                console.log(s)
+                console.log(1,s);
                 this.value = s;
+            },
+            ok () {
+                console.log('ok');
+            },
+            clear () {
+                console.log('clear');
             }
         }
     }