diff --git a/src/components/date-picker/base/month-table.vue b/src/components/date-picker/base/month-table.vue
deleted file mode 100644
index c01556b..0000000
--- a/src/components/date-picker/base/month-table.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <div :class="classes" @click="handleClick">
-        <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span>
-    </div>
-</template>
-<script>
-    import { deepCopy } from '../../../utils/assist';
-    import Locale from '../../../mixins/locale';
-    const prefixCls = 'ivu-date-picker-cells';
-
-    export default {
-        mixins: [ Locale ],
-        props: {
-            date: {},
-            month: {
-                type: Number
-            },
-            disabledDate: {},
-            selectionMode: {
-                default: 'month'
-            }
-        },
-        computed: {
-            classes () {
-                return [
-                    `${prefixCls}`,
-                    `${prefixCls}-month`
-                ];
-            },
-            cells () {
-                let cells = [];
-                const cell_tmpl = {
-                    text: '',
-                    selected: false,
-                    disabled: false
-                };
-
-                for (let i = 0; i < 12; i++) {
-                    const cell = deepCopy(cell_tmpl);
-                    cell.text = i + 1;
-
-                    const date = new Date(this.date);
-                    date.setMonth(i);
-                    cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date)  && this.selectionMode === 'month';
-
-                    cell.selected = Number(this.month) === i;
-                    cells.push(cell);
-                }
-
-                return cells;
-            }
-        },
-        methods: {
-            getCellCls (cell) {
-                return [
-                    `${prefixCls}-cell`,
-                    {
-                        [`${prefixCls}-cell-selected`]: cell.selected,
-                        [`${prefixCls}-cell-disabled`]: cell.disabled
-                    }
-                ];
-            },
-            handleClick (event) {
-                const target = event.target;
-                if (target.tagName === 'EM') {
-                    const index = parseInt(event.target.getAttribute('index'));
-                    const cell = this.cells[index];
-                    if (cell.disabled) return;
-
-                    this.$emit('on-pick', index);
-                }
-                this.$emit('on-pick-click');
-            },
-            tCell (cell) {
-                return this.t(`i.datepicker.months.m${cell}`);
-            }
-        }
-    };
-</script>
diff --git a/src/components/date-picker/base/year-table.vue b/src/components/date-picker/base/year-table.vue
index 6bc8467..00ab9f5 100644
--- a/src/components/date-picker/base/year-table.vue
+++ b/src/components/date-picker/base/year-table.vue
@@ -1,30 +1,34 @@
 <template>
-    <div :class="classes" @click="handleClick">
-        <span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span>
+    <div :class="classes">
+        <span
+            :class="getCellCls(cell)"
+            v-for="cell in cells"
+            @click="handleClick(cell)"
+            @mouseenter="handleMouseMove(cell)"
+        >
+            <em>{{ cell.date.getFullYear() }}</em>
+        </span>
     </div>
 </template>
 <script>
+    import { clearHours, isInRange } from '../util';
     import { deepCopy } from '../../../utils/assist';
-    const prefixCls = 'ivu-date-picker-cells';
+    import mixin from './mixin';
+    import prefixCls from './prefixCls';
 
     export default {
-        props: {
-            date: {},
-            year: {},
-            disabledDate: {},
-            selectionMode: {
-                default: 'year'
-            }
-        },
+        mixins: [ mixin ],
+
+        props: {/* in mixin */},
         computed: {
-            classes () {
+            classes() {
                 return [
                     `${prefixCls}`,
                     `${prefixCls}-year`
                 ];
             },
             startYear() {
-                return Math.floor(this.year / 10) * 10;
+                return Math.floor(this.tableDate.getFullYear() / 10) * 10;
             },
             cells () {
                 let cells = [];
@@ -34,15 +38,18 @@
                     disabled: false
                 };
 
-                for (let i = 0; i < 10; i++) {
-                    const cell = deepCopy(cell_tmpl);
-                    cell.text = this.startYear + i;
+                const rangeStart = this.rangeState.from && clearHours(new Date(this.rangeState.from.getFullYear(), 0, 1));
+                const rangeEnd = this.rangeState.to && clearHours(new Date(this.rangeState.to.getFullYear(), 0, 1));
+                const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), 0, 1)));
 
-                    const date = new Date(this.date);
-                    date.setFullYear(cell.text);
-                    cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'year';
 
-                    cell.selected = Number(this.year) === cell.text;
+                for (let i = 0; i < 10; i++) {
+                    const cell = deepCopy(cell_tmpl);
+                    cell.date = new Date(this.startYear + i, 0, 1);
+                    cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'year';
+                    const time = clearHours(cell.date);
+                    cell.range = isInRange(time, rangeStart, rangeEnd);
+                    cell.selected = selectedDays.includes(time);
                     cells.push(cell);
                 }
 
@@ -55,26 +62,11 @@
                     `${prefixCls}-cell`,
                     {
                         [`${prefixCls}-cell-selected`]: cell.selected,
-                        [`${prefixCls}-cell-disabled`]: cell.disabled
+                        [`${prefixCls}-cell-disabled`]: cell.disabled,
+                        [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
                     }
                 ];
             },
-            nextTenYear() {
-                this.$emit('on-pick', Number(this.year) + 10, false);
-            },
-            prevTenYear() {
-                this.$emit('on-pick', Number(this.year) - 10, false);
-            },
-            handleClick (event) {
-                const target = event.target;
-                if (target.tagName === 'EM') {
-                    const cell = this.cells[parseInt(event.target.getAttribute('index'))];
-                    if (cell.disabled) return;
-
-                    this.$emit('on-pick', cell.text);
-                }
-                this.$emit('on-pick-click');
-            }
         }
     };
 </script>
diff --git a/src/components/date-picker/panel/Date/date-panel-label.vue b/src/components/date-picker/panel/Date/date-panel-label.vue
new file mode 100644
index 0000000..91f0fc4
--- /dev/null
+++ b/src/components/date-picker/panel/Date/date-panel-label.vue
@@ -0,0 +1,25 @@
+<template>
+    <span>
+        <span
+            v-if="datePanelLabel"
+            v-show="datePanelLabel.labels[0].type === 'year' || currentView === 'date'"
+            :class="[datePrefixCls + '-header-label']"
+            @click="datePanelLabel.labels[0].handler">{{ datePanelLabel.labels[0].label }}</span>
+        <template v-if="datePanelLabel && currentView === 'date'">{{ datePanelLabel.separator }}</template>
+        <span
+            v-if="datePanelLabel"
+            v-show="datePanelLabel.labels[1].type === 'year' || currentView === 'date'"
+            :class="[datePrefixCls + '-header-label']"
+            @click="datePanelLabel.labels[1].handler">{{ datePanelLabel.labels[1].label }}</span>
+    </span>
+</template>
+
+<script>
+export default {
+    props: {
+        datePanelLabel: Object,
+        currentView: String,
+        datePrefixCls: String
+    }
+};
+</script>
diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js
new file mode 100644
index 0000000..3c4ec99
--- /dev/null
+++ b/src/components/date-picker/panel/Date/date-panel-mixin.js
@@ -0,0 +1,50 @@
+
+import { oneOf } from '../../../../utils/assist';
+import {initTimeDate } from '../../util';
+
+
+export default {
+    props: {
+        confirm: {
+            type: Boolean,
+            default: false
+        },
+        showTime: {
+            type: Boolean,
+            default: false
+        },
+        format: {
+            type: String,
+            default: 'yyyy-MM-dd'
+        },
+        selectionMode: {
+            type: String,
+            validator (value) {
+                return oneOf(value, ['year', 'month', 'date', 'time']);
+            },
+            default: 'date'
+        },
+        shortcuts: {
+            type: Array,
+            default: () => []
+        },
+        disabledDate: {
+            type: Function,
+            default: () => false
+        },
+        value: {
+            type: Array,
+            default: () => [initTimeDate(), initTimeDate()]
+        }
+    },
+    computed: {
+        isTime(){
+            return this.currentView === 'time';
+        }
+    },
+    methods: {
+        handleToggleTime(){
+            this.currentView = this.currentView === 'time' ? this.selectionMode : 'time';
+        },
+    }
+};
diff --git a/src/components/date-picker/panel/Time/time-range.vue b/src/components/date-picker/panel/Time/time-range.vue
new file mode 100644
index 0000000..aea53d2
--- /dev/null
+++ b/src/components/date-picker/panel/Time/time-range.vue
@@ -0,0 +1,163 @@
+<template>
+    <div :class="classes" @mousedown.prevent>
+        <div :class="[prefixCls + '-body']">
+            <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
+                <div :class="[timePrefixCls + '-header']">
+                    <template v-if="showDate">{{ leftDatePanelLabel }}</template>
+                    <template v-else>{{ t('i.datepicker.startTime') }}</template>
+                </div>
+                <time-spinner
+                    ref="timeSpinner"
+                    :steps="steps"
+                    :show-seconds="showSeconds"
+                    :hours="dateStart.getHours()"
+                    :minutes="dateStart.getMinutes()"
+                    :seconds="dateStart.getSeconds()"
+                    :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']">
+                    <template v-if="showDate">{{ rightDatePanelLabel }}</template>
+                    <template v-else>{{ t('i.datepicker.endTime') }}</template>
+                </div>
+                <time-spinner
+                    ref="timeSpinnerEnd"
+                    :steps="steps"
+                    :show-seconds="showSeconds"
+                    :hours="dateEnd.getHours()"
+                    :minutes="dateEnd.getMinutes()"
+                    :seconds="dateEnd.getSeconds()"
+                    :disabled-hours="disabledHours"
+                    :disabled-minutes="disabledMinutes"
+                    :disabled-seconds="disabledSeconds"
+                    :hide-disabled-options="hideDisabledOptions"
+                    @on-change="handleEndChange"
+                    @on-pick-click="handlePickClick"></time-spinner>
+            </div>
+            <Confirm
+                v-if="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 Options from '../../time-mixins';
+
+
+    import Mixin from '../panel-mixin';
+    import Locale from '../../../../mixins/locale';
+
+    import { initTimeDate, formatDateLabels } from '../../util';
+
+    const prefixCls = 'ivu-picker-panel';
+    const timePrefixCls = 'ivu-time-picker';
+
+    const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
+
+    export default {
+        name: 'RangeTimePickerPanel',
+        mixins: [ Mixin, Locale, Options ],
+        components: { TimeSpinner, Confirm },
+        props: {
+            steps: {
+                type: Array,
+                default: () => []
+            },
+            format: {
+                type: String,
+                default: 'HH:mm:ss'
+            },
+            value: {
+                type: Array,
+                required: true
+            },
+        },
+        data () {
+            const [dateStart, dateEnd] = this.value.slice();
+            return {
+                prefixCls: prefixCls,
+                timePrefixCls: timePrefixCls,
+                showDate: false,
+                dateStart: dateStart || initTimeDate(),
+                dateEnd: dateEnd || initTimeDate(),
+                confirm: false
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-body-wrapper`,
+                    `${timePrefixCls}-with-range`,
+                    {
+                        [`${timePrefixCls}-with-seconds`]: this.showSeconds
+                    }
+                ];
+            },
+            showSeconds () {
+                return (this.format || '').indexOf('ss') !== -1;
+            },
+            leftDatePanelLabel () {
+                return this.panelLabelConfig(this.date);
+            },
+            rightDatePanelLabel () {
+                return this.panelLabelConfig(this.dateEnd);
+            }
+        },
+        watch: {
+            value (dates) {
+                const [dateStart, dateEnd] = dates.slice();
+                this.dateStart = dateStart || initTimeDate();
+                this.dateEnd = dateEnd || initTimeDate();
+            }
+        },
+        methods: {
+            panelLabelConfig (date) {
+                const locale = this.t('i.locale');
+                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
+                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
+                return [labels[0].label, separator, labels[1].label].join('');
+            },
+            handleChange (start, end, emit = true) {
+
+                const dateStart = new Date(this.dateStart);
+                let dateEnd = new Date(this.dateEnd);
+
+                // set dateStart
+                Object.keys(start).forEach(type => {
+                    dateStart[`set${capitalize(type)}`](start[type])
+                });
+
+                // set dateEnd
+                Object.keys(end).forEach(type => {
+                    dateEnd[`set${capitalize(type)}`](end[type]);
+                });
+
+                // judge endTime > startTime?
+                if (dateEnd < dateStart) dateEnd = dateStart;
+
+                if (emit) this.$emit('on-pick', [dateStart, dateEnd], true);
+            },
+            handleStartChange (date) {
+                this.handleChange(date, {});
+            },
+            handleEndChange (date) {
+                this.handleChange({}, date);
+            },
+            updateScroll () {
+                this.$refs.timeSpinner.updateScroll();
+                this.$refs.timeSpinnerEnd.updateScroll();
+            }
+        },
+        mounted () {
+            if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
+        }
+    };
+</script>
diff --git a/src/components/date-picker/panel/Time/time.vue b/src/components/date-picker/panel/Time/time.vue
new file mode 100644
index 0000000..35a2688
--- /dev/null
+++ b/src/components/date-picker/panel/Time/time.vue
@@ -0,0 +1,104 @@
+<template>
+    <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
+        <div :class="[prefixCls + '-body']">
+            <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
+            <div :class="[prefixCls + '-content']">
+                <time-spinner
+                    ref="timeSpinner"
+                    :show-seconds="showSeconds"
+                    :steps="steps"
+                    :hours="date.getHours()"
+                    :minutes="date.getMinutes()"
+                    :seconds="date.getSeconds()"
+                    :disabled-hours="disabledHours"
+                    :disabled-minutes="disabledMinutes"
+                    :disabled-seconds="disabledSeconds"
+                    :hide-disabled-options="hideDisabledOptions"
+                    @on-change="handleChange"
+                    @on-pick-click="handlePickClick"></time-spinner>
+            </div>
+            <Confirm
+                v-if="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 Options from '../../time-mixins';
+
+
+    import Mixin from '../panel-mixin';
+    import Locale from '../../../../mixins/locale';
+
+    import { initTimeDate } from '../../util';
+
+    const prefixCls = 'ivu-picker-panel';
+    const timePrefixCls = 'ivu-time-picker';
+
+    const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
+
+    export default {
+        name: 'TimePickerPanel',
+        mixins: [ Mixin, Locale, Options ],
+        components: { TimeSpinner, Confirm },
+        props: {
+            steps: {
+                type: Array,
+                default: () => []
+            },
+            format: {
+                type: String,
+                default: 'HH:mm:ss'
+            },
+            value: {
+                type: Array,
+                required: true
+            },
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                timePrefixCls: timePrefixCls,
+                date: this.value[0] || initTimeDate(),
+                showDate: false,
+                confirm: false
+            };
+        },
+        computed: {
+            showSeconds () {
+                return (this.format || '').indexOf('ss') !== -1;
+            },
+            visibleDate () { // TODO
+                const date = this.date;
+                const month = date.getMonth() + 1;
+                const tYear = this.t('i.datepicker.year');
+                const tMonth = this.t(`i.datepicker.month${month}`);
+                return `${date.getFullYear()}${tYear} ${tMonth}`;
+            }
+        },
+        watch: {
+            value (dates) {
+                let newVal = dates[0] || initTimeDate();
+                newVal = new Date(newVal);
+                this.date = newVal;
+            }
+        },
+        methods: {
+            handleChange (date, emit = true) {
+
+                const newDate = new Date(this.date);
+                Object.keys(date).forEach(
+                    type => newDate[`set${capitalize(type)}`](date[type])
+                );
+
+                if (emit) this.$emit('on-pick', newDate, true);
+            },
+        },
+        mounted () {
+            if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
+        }
+    };
+</script>
diff --git a/src/components/date-picker/panel/date-panel-label.vue b/src/components/date-picker/panel/date-panel-label.vue
deleted file mode 100644
index 91f0fc4..0000000
--- a/src/components/date-picker/panel/date-panel-label.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <span>
-        <span
-            v-if="datePanelLabel"
-            v-show="datePanelLabel.labels[0].type === 'year' || currentView === 'date'"
-            :class="[datePrefixCls + '-header-label']"
-            @click="datePanelLabel.labels[0].handler">{{ datePanelLabel.labels[0].label }}</span>
-        <template v-if="datePanelLabel && currentView === 'date'">{{ datePanelLabel.separator }}</template>
-        <span
-            v-if="datePanelLabel"
-            v-show="datePanelLabel.labels[1].type === 'year' || currentView === 'date'"
-            :class="[datePrefixCls + '-header-label']"
-            @click="datePanelLabel.labels[1].handler">{{ datePanelLabel.labels[1].label }}</span>
-    </span>
-</template>
-
-<script>
-export default {
-    props: {
-        datePanelLabel: Object,
-        currentView: String,
-        datePrefixCls: String
-    }
-};
-</script>
diff --git a/src/components/date-picker/panel/mixin.js b/src/components/date-picker/panel/mixin.js
deleted file mode 100644
index bc93a9c..0000000
--- a/src/components/date-picker/panel/mixin.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const prefixCls = 'ivu-picker-panel';
-const datePrefixCls = 'ivu-date-picker';
-
-export default {
-    methods: {
-        iconBtnCls (direction, type = '') {
-            return [
-                `${prefixCls}-icon-btn`,
-                `${datePrefixCls}-${direction}-btn`,
-                `${datePrefixCls}-${direction}-btn-arrow${type}`,
-            ];
-        },
-        handleShortcutClick (shortcut) {
-            if (shortcut.value) this.$emit('on-pick', shortcut.value());
-            if (shortcut.onClick) shortcut.onClick(this);
-        },
-        handlePickClear () {
-            this.$emit('on-pick-clear');
-        },
-        handlePickSuccess () {
-            this.$emit('on-pick-success');
-        },
-        handlePickClick () {
-            this.$emit('on-pick-click');
-        }
-    }
-};
diff --git a/src/components/date-picker/panel/panel-mixin.js b/src/components/date-picker/panel/panel-mixin.js
new file mode 100644
index 0000000..d227725
--- /dev/null
+++ b/src/components/date-picker/panel/panel-mixin.js
@@ -0,0 +1,46 @@
+const prefixCls = 'ivu-picker-panel';
+const datePrefixCls = 'ivu-date-picker';
+
+export default {
+    methods: {
+        iconBtnCls (direction, type = '') {
+            return [
+                `${prefixCls}-icon-btn`,
+                `${datePrefixCls}-${direction}-btn`,
+                `${datePrefixCls}-${direction}-btn-arrow${type}`,
+            ];
+        },
+        handleShortcutClick (shortcut) {
+            if (shortcut.value) this.$emit('on-pick', shortcut.value());
+            if (shortcut.onClick) shortcut.onClick(this);
+        },
+        handlePickClear () {
+            this.resetView();
+            this.$emit('on-pick-clear');
+        },
+        handlePickSuccess () {
+            this.resetView();
+            this.$emit('on-pick-success');
+        },
+        handlePickClick () {
+            this.$emit('on-pick-click');
+        },
+        resetView(){
+            setTimeout(
+                () => this.currentView = this.selectionMode,
+                500 // 500ms so the dropdown can close before changing
+            );
+        },
+        handleClear() {
+            this.dates = this.dates.map(() => null);
+            this.rangeState = {};
+            this.$emit('on-pick', this.dates);
+            this.handleConfirm();
+            //  if (this.showTime) this.$refs.timePicker.handleClear();
+        },
+        handleConfirm(visible) {
+            this.$emit('on-pick', this.dates, visible);
+        },
+
+    }
+};
diff --git a/src/components/date-picker/panel/time-range.vue b/src/components/date-picker/panel/time-range.vue
deleted file mode 100644
index 3aad9e3..0000000
--- a/src/components/date-picker/panel/time-range.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<template>
-    <div :class="classes" @mousedown.prevent>
-        <div :class="[prefixCls + '-body']">
-            <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
-                <div :class="[timePrefixCls + '-header']">
-                    <template v-if="showDate">{{ leftDatePanelLabel }}</template>
-                    <template v-else>{{ t('i.datepicker.startTime') }}</template>
-                </div>
-                <time-spinner
-                    ref="timeSpinner"
-                    :steps="steps"
-                    :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']">
-                    <template v-if="showDate">{{ rightDatePanelLabel }}</template>
-                    <template v-else>{{ t('i.datepicker.endTime') }}</template>
-                </div>
-                <time-spinner
-                    ref="timeSpinnerEnd"
-                    :steps="steps"
-                    :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
-                v-if="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 Locale from '../../../mixins/locale';
-
-    import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util';
-
-    const prefixCls = 'ivu-picker-panel';
-    const timePrefixCls = 'ivu-time-picker';
-
-    export default {
-        name: 'TimePicker',
-        mixins: [ Mixin, Locale ],
-        components: { TimeSpinner, Confirm },
-        props: {
-            steps: {
-                type: Array,
-                default: () => []
-            }
-        },
-        data () {
-            return {
-                prefixCls: prefixCls,
-                timePrefixCls: timePrefixCls,
-                format: 'HH:mm:ss',
-                showDate: false,
-                date: initTimeDate(),
-                dateEnd: initTimeDate(),
-                value: '',
-                hours: '',
-                minutes: '',
-                seconds: '',
-                hoursEnd: '',
-                minutesEnd: '',
-                secondsEnd: '',
-                disabledHours: [],
-                disabledMinutes: [],
-                disabledSeconds: [],
-                hideDisabledOptions: false,
-                confirm: false
-            };
-        },
-        computed: {
-            classes () {
-                return [
-                    `${prefixCls}-body-wrapper`,
-                    `${timePrefixCls}-with-range`,
-                    {
-                        [`${timePrefixCls}-with-seconds`]: this.showSeconds
-                    }
-                ];
-            },
-            showSeconds () {
-                return (this.format || '').indexOf('ss') !== -1;
-            },
-            leftDatePanelLabel () {
-                return this.panelLabelConfig(this.date);
-            },
-            rightDatePanelLabel () {
-                return this.panelLabelConfig(this.dateEnd);
-            }
-        },
-        watch: {
-            value (newVal) {
-                if (!newVal) return;
-                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: {
-            panelLabelConfig (date) {
-                const locale = this.t('i.locale');
-                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
-                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
-                return [labels[0].label, separator, labels[1].label].join('');
-            },
-            handleClear() {
-                this.date = initTimeDate();
-                this.dateEnd = initTimeDate();
-                this.hours = '';
-                this.minutes = '';
-                this.seconds = '';
-                this.hoursEnd = '';
-                this.minutesEnd = '';
-                this.secondsEnd = '';
-            },
-            handleChange (date, dateEnd, emit = true) {
-                const oldDateEnd = new Date(this.dateEnd);
-
-                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();
-                }
-                // judge endTime > startTime?
-                if (this.dateEnd < this.date) {
-                    this.$nextTick(() => {
-                        this.dateEnd = new Date(this.date);
-                        this.hoursEnd = this.dateEnd.getHours();
-                        this.minutesEnd = this.dateEnd.getMinutes();
-                        this.secondsEnd = this.dateEnd.getSeconds();
-
-                        const format = 'yyyy-MM-dd HH:mm:ss';
-                        if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {
-                            if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
-                        }
-                    });
-                } else {
-                    if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
-                }
-            },
-            handleStartChange (date) {
-                this.handleChange(date, {});
-            },
-            handleEndChange (date) {
-                this.handleChange({}, date);
-            },
-            updateScroll () {
-                this.$refs.timeSpinner.updateScroll();
-                this.$refs.timeSpinnerEnd.updateScroll();
-            }
-        },
-        mounted () {
-            if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
-        }
-    };
-</script>
diff --git a/src/components/date-picker/panel/time.vue b/src/components/date-picker/panel/time.vue
deleted file mode 100644
index e6646b5..0000000
--- a/src/components/date-picker/panel/time.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-    <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
-        <div :class="[prefixCls + '-body']">
-            <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
-            <div :class="[prefixCls + '-content']">
-                <time-spinner
-                    ref="timeSpinner"
-                    :show-seconds="showSeconds"
-                    :steps="steps"
-                    :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>
-            <Confirm
-                v-if="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 Locale from '../../../mixins/locale';
-
-    import { initTimeDate } from '../util';
-
-    const prefixCls = 'ivu-picker-panel';
-    const timePrefixCls = 'ivu-time-picker';
-
-    export default {
-        name: 'TimePicker',
-        mixins: [ Mixin, Locale ],
-        components: { TimeSpinner, Confirm },
-        props: {
-            steps: {
-                type: Array,
-                default: () => []
-            }
-        },
-        data () {
-            return {
-                prefixCls: prefixCls,
-                timePrefixCls: timePrefixCls,
-                date: initTimeDate(),
-                value: '',
-                showDate: false,
-                format: 'HH:mm:ss',
-                hours: '',
-                minutes: '',
-                seconds: '',
-                disabledHours: [],
-                disabledMinutes: [],
-                disabledSeconds: [],
-                hideDisabledOptions: false,
-                confirm: false
-            };
-        },
-        computed: {
-            showSeconds () {
-                return (this.format || '').indexOf('ss') !== -1;
-            },
-            visibleDate () {
-                const date = this.date;
-                const month = date.getMonth() + 1;
-                const tYear = this.t('i.datepicker.year');
-                const tMonth = this.t(`i.datepicker.month${month}`);
-                return `${date.getFullYear()}${tYear} ${tMonth}`;
-            }
-        },
-        watch: {
-            value (newVal) {
-                if (!newVal) return;
-                newVal = new Date(newVal);
-                if (!isNaN(newVal)) {
-                    this.date = newVal;
-                    this.handleChange({
-                        hours: newVal.getHours(),
-                        minutes: newVal.getMinutes(),
-                        seconds: newVal.getSeconds()
-                    }, false);
-                }
-            }
-        },
-        methods: {
-            handleClear() {
-                this.date = initTimeDate();
-                this.hours = '';
-                this.minutes = '';
-                this.seconds = '';
-            },
-            handleChange (date, 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 (emit) this.$emit('on-pick', this.date, true);
-            },
-            updateScroll () {
-                this.$refs.timeSpinner.updateScroll();
-            }
-        },
-        mounted () {
-            if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
-        }
-    };
-</script>
--
libgit2 0.21.4