update TimePicker

update TimePicker

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

@@ -2,21 +2,29 @@
     <div :class="classes">
         <div :class="[prefixCls+ '-wrapper']">
             <ul :class="[prefixCls + '-list']">
-                <li v-for="item in hoursList"></li>
+                <li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide">{{ item.text }}</li>
             </ul>
         </div>
         <div :class="[prefixCls+ '-wrapper']">
-            <li v-for="item in minutesList"></li>
+            <ul :class="[prefixCls + '-list']">
+                <li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide">{{ item.text }}</li>
+            </ul>
         </div>
         <div :class="[prefixCls+ '-wrapper']" v-show="showSeconds">
-            <li v-for="item in secondsList"></li>
+            <ul :class="[prefixCls + '-list']">
+                <li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide">{{ item.text }}</li>
+            </ul>
         </div>
     </div>
 </template>
 <script>
+    import Options from '../time-mixins';
+    import { deepCopy } from '../../../utils/assist';
+
     const prefixCls = 'ivu-time-picker-cells';
 
     export default {
+        mixins: [Options],
         props: {
             hours: {
                 type: Number,
@@ -50,17 +58,82 @@
                 ];
             },
             hoursList () {
-                return [];
+                let hours = [];
+                const hour_tmpl = {
+                    text: '',
+                    selected: false,
+                    disabled: false,
+                    hide: false
+                };
+
+                for (let i = 0; i < 24; i++) {
+                    const hour = deepCopy(hour_tmpl);
+                    hour.text = i;
+
+                    if (this.disabledHours && this.disabledHours.indexOf(i) > -1) {
+                        hour.disabled = true;
+                        if (this.hideDisabledOptions) hour.hide = true;
+                    }
+                    hours.push(hour);
+                }
+
+                return hours;
             },
             minutesList () {
-                return [];
+                let minutes = [];
+                const minute_tmpl = {
+                    text: '',
+                    selected: false,
+                    disabled: false,
+                    hide: false
+                };
+
+                for (let i = 0; i < 60; i++) {
+                    const minute = deepCopy(minute_tmpl);
+                    minute.text = i;
+
+                    if (this.disabledMinutes && this.disabledMinutes.indexOf(i) > -1) {
+                        minute.disabled = true;
+                        if (this.hideDisabledOptions) minute.hide = true;
+                    }
+                    minutes.push(minute);
+                }
+
+                return minutes;
             },
             secondsList () {
-                return [];
+                let seconds = [];
+                const second_tmpl = {
+                    text: '',
+                    selected: false,
+                    disabled: false,
+                    hide: false
+                };
+
+                for (let i = 0; i < 60; i++) {
+                    const second = deepCopy(second_tmpl);
+                    second.text = i;
+
+                    if (this.disabledSeconds && this.disabledSeconds.indexOf(i) > -1) {
+                        second.disabled = true;
+                        if (this.hideDisabledOptions) second.hide = true;
+                    }
+                    seconds.push(second);
+                }
+
+                return seconds;
             }
         },
         methods: {
-
+            getCellCls (cell) {
+                return [
+                    `${prefixCls}-cell`,
+                    {
+                        [`${prefixCls}-cell-selected`]: cell.selected,
+                        [`${prefixCls}-cell-disabled`]: cell.disabled
+                    }
+                ];
+            }
         }
     };
 </script>

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

@@ -7,6 +7,10 @@
                     :hours="hours"
                     :minutes="minutes"
                     :seconds="seconds"
+                    :disabled-hours="disabledHours"
+                    :disabled-minutes="disabledMinutes"
+                    :disabled-seconds="disabledSeconds"
+                    :hide-disabled-options="hideDisabledOptions"
                     @on-change="handleChange"
                     @on-pick-click="handlePickClick"></time-spinner>
             </div>

test/routers/date.vue

@@ -7,7 +7,7 @@
             <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
         </i-col>
         <i-col span="12">
-            <time-picker placeholder="选择时间" :disabled-hours="[1,2]" style="width: 200px"></time-picker>
+            <time-picker placeholder="选择时间" :hide-disabled-options="false" :disabled-hours="[1,2]" style="width: 200px"></time-picker>
         </i-col>
     </row>
 </template>