update TimePicker

update TimePicker

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

@@ -0,0 +1,158 @@
+<template>
+    <div :class="classes">
+        <div :class="[prefixCls + '-body']">
+            <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
+                <div :class="[timePrefixCls + '-header']">开始时间</div>
+                <time-spinner
+                    :show-seconds="showSeconds"
+                    :hours="hours"
+                    :minutes="minutes"
+                    :seconds="seconds"
+                    :disabled-hours="disabledHours"
+                    :disabled-minutes="disabledMinutes"
+                    :disabled-seconds="disabledSeconds"
+                    :hide-disabled-options="hideDisabledOptions"
+                    @on-change="handleStartChange"
+                    @on-pick-click="handlePickClick"></time-spinner>
+            </div>
+            <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
+                <div :class="[timePrefixCls + '-header']">结束时间</div>
+                <time-spinner
+                    :show-seconds="showSeconds"
+                    :hours="hoursEnd"
+                    :minutes="minutesEnd"
+                    :seconds="secondsEnd"
+                    :disabled-hours="disabledHours"
+                    :disabled-minutes="disabledMinutes"
+                    :disabled-seconds="disabledSeconds"
+                    :hide-disabled-options="hideDisabledOptions"
+                    @on-change="handleEndChange"
+                    @on-pick-click="handlePickClick"></time-spinner>
+            </div>
+            <Confirm
+                @on-pick-clear="handlePickClear"
+                @on-pick-success="handlePickSuccess"></Confirm>
+        </div>
+    </div>
+</template>
+<script>
+    import TimeSpinner from '../base/time-spinner.vue';
+    import Confirm from '../base/confirm.vue';
+
+    import Mixin from './mixin';
+
+    import { initTimeDate, toDate } from '../util';
+
+    const prefixCls = 'ivu-picker-panel';
+    const timePrefixCls = 'ivu-time-picker';
+
+    export default {
+        mixins: [Mixin],
+        components: { TimeSpinner, Confirm },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                timePrefixCls: timePrefixCls,
+                format: 'HH:mm:ss',
+                date: initTimeDate(),
+                dateEnd: initTimeDate(),
+                value: '',
+                hours: '',
+                minutes: '',
+                seconds: '',
+                hoursEnd: '',
+                minutesEnd: '',
+                secondsEnd: '',
+                disabledHours: [],
+                disabledMinutes: [],
+                disabledSeconds: [],
+                hideDisabledOptions: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-body-wrapper`,
+                    `${timePrefixCls}-with-range`,
+                    {
+                        [`${timePrefixCls}-with-seconds`]: this.showSeconds
+                    }
+                ];
+            },
+            showSeconds () {
+                return (this.format || '').indexOf('ss') !== -1;
+            }
+        },
+        watch: {
+            value (newVal) {
+                if (!newVal) {
+                    return;
+                } else if (Array.isArray(newVal)) {
+                    const valStart = newVal[0] ? toDate(newVal[0]) : false;
+                    const valEnd = newVal[1] ? toDate(newVal[1]) : false;
+
+                    if (valStart && valEnd) {
+                        this.handleChange(
+                            {
+                                hours: valStart.getHours(),
+                                minutes: valStart.getMinutes(),
+                                seconds: valStart.getSeconds()
+                            },
+                            {
+                                hours: valEnd.getHours(),
+                                minutes: valEnd.getMinutes(),
+                                seconds: valEnd.getSeconds()
+                            },
+                            false
+                        )
+                    }
+                }
+            }
+        },
+        methods: {
+            handleClear() {
+                this.date = initTimeDate();
+                this.dateEnd = initTimeDate();
+                this.hours = '';
+                this.minutes = '';
+                this.seconds = '';
+                this.hoursEnd = '';
+                this.minutesEnd = '';
+                this.secondsEnd = '';
+            },
+            handleChange (date, dateEnd, emit = true) {
+                if (date.hours !== undefined) {
+                    this.date.setHours(date.hours);
+                    this.hours = this.date.getHours();
+                }
+                if (date.minutes !== undefined) {
+                    this.date.setMinutes(date.minutes);
+                    this.minutes = this.date.getMinutes();
+                }
+                if (date.seconds !== undefined) {
+                    this.date.setSeconds(date.seconds);
+                    this.seconds = this.date.getSeconds();
+                }
+                if (dateEnd.hours !== undefined) {
+                    this.dateEnd.setHours(dateEnd.hours);
+                    this.hoursEnd = this.dateEnd.getHours();
+                }
+                if (dateEnd.minutes !== undefined) {
+                    this.dateEnd.setMinutes(dateEnd.minutes);
+                    this.minutesEnd = this.dateEnd.getMinutes();
+                }
+                if (dateEnd.seconds !== undefined) {
+                    this.dateEnd.setSeconds(dateEnd.seconds);
+                    this.secondsEnd = this.dateEnd.getSeconds();
+                }
+                if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
+            },
+            handleStartChange (date) {
+                this.handleChange(date, {});
+            },
+            handleEndChange (date) {
+                this.handleChange({}, date);
+            }
+        }
+    };
+</script>

src/components/date-picker/picker.vue

@@ -201,7 +201,7 @@
             },
             iconType () {
                 let icon = 'ios-calendar-outline';
-                if (this.type === 'time') icon = 'ios-clock-outline';
+                if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline';
                 if (this.showClose) icon = 'ios-close';
                 return icon;
             },
@@ -408,14 +408,16 @@
                 this.picker.resetView && this.picker.resetView();
             },
             emitChange (date) {
-                const format = this.format || DEFAULT_FORMATS[this.type];
+                const type = this.type;
+                const format = this.format || DEFAULT_FORMATS[type];
                 const formatter = (
-                    TYPE_VALUE_RESOLVER_MAP[this.type] ||
+                    TYPE_VALUE_RESOLVER_MAP[type] ||
                     TYPE_VALUE_RESOLVER_MAP['default']
                 ).formatter;
 
                 let newDate = formatter(date, format);
-                if (this.type === 'daterange') {
+                if (type === 'daterange' || type === 'timerange') {
+                    console.log(newDate);
                     newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
                 }
 
@@ -443,12 +445,12 @@
                 immediate: true,
                 handler (val) {
                     const type = this.type;
-                    if (type === 'time') {
+                    if (type === 'time' || type === 'timerange') {
                         const parser = (
                             TYPE_VALUE_RESOLVER_MAP[type] ||
                             TYPE_VALUE_RESOLVER_MAP['default']
                         ).parser;
-
+                        if (type === 'timerange') val = val.join(RANGE_SEPARATOR);
                         val = parser(val, this.format || DEFAULT_FORMATS[type]);
                     }
                     this.internalValue = val;

src/components/date-picker/picker/time-picker.js

@@ -1,18 +1,36 @@
 import Picker from '../picker.vue';
 import TimePanel from '../panel/time.vue';
+import TimeRangePanel from '../panel/time-range.vue';
 import Options from '../time-mixins';
 
+const getPanel = function (type) {
+    if (type === 'timerange') {
+        return TimeRangePanel;
+    }
+    return TimePanel;
+};
+
+import { oneOf } from '../../../utils/assist';
+
 export default {
     mixins: [Picker, Options],
     props: {
+        type: {
+            validator (value) {
+                return oneOf(value, ['time', 'timerange']);
+            },
+            default: 'time'
+        },
         value: {}
     },
-    data () {
-        return {
-            type: 'time'
-        };
-    },
     created () {
-        this.panel = TimePanel;
+        if (!this.value) {
+            if (this.type === 'timerange') {
+                this.value = ['',''];
+            } else {
+                this.value = '';
+            }
+        }
+        this.panel = getPanel(this.type);
     }
 };

src/styles/components/time-picker.less

@@ -1,9 +1,12 @@
 @time-picker-prefix-cls: ~"@{css-prefix}time-picker";
+@time-picker-cells-width: 112px;
+@time-picker-cells-width-with-seconds: @time-picker-cells-width + 56px;
+
 .@{time-picker-prefix-cls} {
     &-cells{
-        min-width: 112px;
+        min-width: @time-picker-cells-width;
         &-with-seconds{
-            min-width: 168px;
+            min-width: @time-picker-cells-width-with-seconds;
         }
 
         &-list{
@@ -61,4 +64,59 @@
             }
         }
     }
+
+    &-header{
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    &-with-range{
+        .@{picker-prefix-cls}-panel{
+            &-body{
+                min-width: @time-picker-cells-width * 2 + 4px;
+            }
+            &-content{
+                float: left;
+                position: relative;
+
+                &:after{
+                    content: '';
+                    display: block;
+                    width: 2px;
+                    position: absolute;
+                    top: 31px;
+                    bottom: 0;
+                    right: -2px;
+                    background: @border-color-split
+                }
+
+                &-right{
+                    float: right;
+                    &:after{
+                        right: auto;
+                        left: -2px;
+                    }
+                }
+            }
+        }
+        .@{time-picker-prefix-cls}-cells{
+            &-list{
+                &:first-child{
+                    border-radius: 0;
+                }
+                &:last-child{
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+    &-with-range&-with-seconds{
+        .@{picker-prefix-cls}-panel{
+            &-body{
+                min-width: @time-picker-cells-width-with-seconds * 2 + 4px;
+            }
+        }
+    }
 }

test/routers/date.vue

@@ -6,19 +6,29 @@
 <template>
     <row>
         <i-col span="12">
-            <date-picker type="date" placeholder="选择日期" style="width: 200px" @on-ok="ok" confirm @on-clear="clear"></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>
+            <date-picker :value="value3" type="daterange" placement="bottom-start" 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]"
+                :disabled-hours="[1,2,10,11]"
+                @on-change="c"
+                @on-ok="ok"
+                @on-clear="clear"
+                style="width: 168px"></time-picker>
+        </i-col>
+        <i-col span="12">
+            <time-picker
+                :value="value2"
+                type="timerange"
+                placeholder="选择时间"
+                :hide-disabled-options="false"
                 @on-change="c"
                 @on-ok="ok"
                 @on-clear="clear"
@@ -31,7 +41,10 @@
         data () {
             return {
 //                value: '2016-12-12 03:03:03'
-                value: '15:12:01'
+                value: '15:12:01',
+                value2: ['08:40:00', '09:40:00'],
+//                value2: [new Date(), new Date()],
+                value3: ['2016-12-01', '2016-12-25']
             }
         },
         methods: {