diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
new file mode 100644
index 00000000..052ce87b
--- /dev/null
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -0,0 +1,162 @@
+<template>
+    <div :class="classes" @mousedown.prevent>
+        <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
+            <div
+                :class="[prefixCls + '-shortcut']"
+                v-for="shortcut in shortcuts"
+                @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
+        </div>
+        <div :class="[prefixCls + '-body']">
+            <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
+                <span
+                    :class="iconBtnCls('prev', '-double')"
+                    @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
+                <span
+                    :class="iconBtnCls('prev')"
+                    @click="changeMonth(-1)"
+                    v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
+                <date-panel-label
+                    :date-panel-label="datePanelLabel"
+                    :current-view="currentView"
+                    :date-prefix-cls="datePrefixCls"></date-panel-label>
+                <span
+                    :class="iconBtnCls('next', '-double')"
+                    @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
+                <span
+                    :class="iconBtnCls('next')"
+                    @click="changeMonth(+1)"
+                    v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
+            </div>
+            <div :class="[prefixCls + '-content']">
+                <component
+                    :is="pickerTable"
+                    ref="pickerTable"
+                    v-if="currentView !== 'time'"
+                    :table-date="panelDate"
+                    :value="dates"
+                    :selection-mode="selectionMode"
+                    :disabled-date="disabledDate"
+                    @on-pick="handlePick"
+                    @on-pick-click="handlePickClick"
+                ></component>
+            </div>
+            <div :class="[prefixCls + '-content']" v-show="isTime">
+                <time-picker
+                    ref="timePicker"
+                    v-if="currentView === 'time'"
+                    :value="dates"
+                    :format="format"
+                    :time-disabled="timeDisabled"
+                    @on-pick="handlePick"
+                    @on-pick-click="handlePickClick"
+                    @on-pick-clear="handlePickClear"
+                    @on-pick-success="handlePickSuccess"
+                    @on-pick-toggle-time="handleToggleTime"
+                ></time-picker>
+            </div>
+            <Confirm
+                v-if="confirm"
+                :show-time="showTime"
+                :is-time="isTime"
+                @on-pick-toggle-time="handleToggleTime"
+                @on-pick-clear="handlePickClear"
+                @on-pick-success="handlePickSuccess"
+            ></Confirm>
+        </div>
+    </div>
+</template>
+<script>
+    import Icon from '../../../icon/icon.vue';
+    import DateTable from '../../base/date-table.vue';
+    import YearTable from '../../base/year-table.vue';
+    import MonthTable from '../../base/month-table.vue';
+    import TimePicker from '../Time/time.vue';
+    import Confirm from '../../base/confirm.vue';
+    import datePanelLabel from './date-panel-label.vue';
+
+    import Mixin from '../panel-mixin';
+    import DateMixin from './date-panel-mixin';
+    import Locale from '../../../../mixins/locale';
+
+    import { siblingMonth, formatDateLabels } from '../../util';
+
+    const prefixCls = 'ivu-picker-panel';
+    const datePrefixCls = 'ivu-date-picker';
+
+    export default {
+        name: 'DatePickerPanel',
+        mixins: [ Mixin, Locale, DateMixin ],
+        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
+        props: {
+            // in the mixin
+        },
+        data () {
+            const dates = this.value.slice().sort();
+            return {
+                prefixCls: prefixCls,
+                datePrefixCls: datePrefixCls,
+                currentView: this.selectionMode || 'date',
+                dates: dates,
+                panelDate: dates[0] || new Date()
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-body-wrapper`,
+                    {
+                        [`${prefixCls}-with-sidebar`]: this.shortcuts.length
+                    }
+                ];
+            },
+            pickerTable(){
+                return this.currentView.match(/^time/) ? 'time-picker' : `${this.currentView}-table`;
+            },
+            datePanelLabel () {
+                const locale = this.t('i.locale');
+                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
+                const date = this.panelDate;
+                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
+
+                const handler = type => {
+                    return () => (this.currentView = type);
+                };
+
+                return {
+                    separator: separator,
+                    labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
+                };
+            },
+            timeDisabled(){
+                return !this.dates[0];
+            }
+        },
+        watch: {
+            value (newVal) {
+                this.dates = newVal;
+            },
+            selectionMode(){
+                this.currentView = this.selectionMode;
+            },
+            currentView (val) {
+                this.$emit('on-selection-mode-change', val);
+            }
+        },
+        methods: {
+            changeYear(dir){
+                this.panelDate = siblingMonth(this.panelDate, dir * 12);
+            },
+            changeMonth(dir){
+                this.panelDate = siblingMonth(this.panelDate, dir);
+            },
+            handlePick (value) {
+                const {selectionMode} = this;
+                if (selectionMode === 'year') value = new Date(value, 0, 1);
+                else if (selectionMode === 'month') value = new Date(this.panelDate.getFullYear(), value, 1);
+                else value = new Date(value);
+
+                this.$emit('on-pick', value);
+            },
+        },
+    };
+</script>
diff --git a/src/components/date-picker/panel/date.vue b/src/components/date-picker/panel/date.vue
deleted file mode 100644
index 980720ef..00000000
--- a/src/components/date-picker/panel/date.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-    <div :class="classes" @mousedown.prevent>
-        <div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
-            <div
-                :class="[prefixCls + '-shortcut']"
-                v-for="shortcut in shortcuts"
-                @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
-        </div>
-        <div :class="[prefixCls + '-body']">
-            <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
-                <span
-                    :class="iconBtnCls('prev', '-double')"
-                    @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
-                <span
-                    :class="iconBtnCls('prev')"
-                    @click="changeMonth(-1)"
-                    v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
-                <date-panel-label
-                    :date-panel-label="datePanelLabel"
-                    :current-view="currentView"
-                    :date-prefix-cls="datePrefixCls"/>
-                <span
-                    :class="iconBtnCls('next', '-double')"
-                    @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
-                <span
-                    :class="iconBtnCls('next')"
-                    @click="changeMonth(+1)"
-                    v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
-            </div>
-            <div :class="[prefixCls + '-content']">
-                <date-table
-                    v-show="currentView === 'date'"
-                    :year="year"
-                    :month="month"
-                    :date="date"
-                    :value="value"
-                    :selection-mode="selectionMode"
-                    :disabled-date="disabledDate"
-                    @on-pick="handleDatePick"
-                    @on-pick-click="handlePickClick"></date-table>
-                <year-table
-                    ref="yearTable"
-                    v-show="currentView === 'year'"
-                    :year="year"
-                    :date="date"
-                    :selection-mode="selectionMode"
-                    :disabled-date="disabledDate"
-                    @on-pick="handleYearPick"
-                    @on-pick-click="handlePickClick"></year-table>
-                <month-table
-                    ref="monthTable"
-                    v-show="currentView === 'month'"
-                    :month="month"
-                    :date="date"
-                    :selection-mode="selectionMode"
-                    :disabled-date="disabledDate"
-                    @on-pick="handleMonthPick"
-                    @on-pick-click="handlePickClick"></month-table>
-                <time-picker
-                    ref="timePicker"
-                    show-date
-                    v-show="currentView === 'time'"
-                    @on-pick="handleTimePick"
-                    @on-pick-click="handlePickClick"></time-picker>
-            </div>
-            <Confirm
-                v-if="confirm"
-                :show-time="showTime"
-                :is-time="isTime"
-                @on-pick-toggle-time="handleToggleTime"
-                @on-pick-clear="handlePickClear"
-                @on-pick-success="handlePickSuccess"></Confirm>
-        </div>
-    </div>
-</template>
-<script>
-    import Icon from '../../icon/icon.vue';
-    import DateTable from '../base/date-table.vue';
-    import YearTable from '../base/year-table.vue';
-    import MonthTable from '../base/month-table.vue';
-    import TimePicker from './time.vue';
-    import Confirm from '../base/confirm.vue';
-    import datePanelLabel from './date-panel-label.vue';
-
-    import Mixin from './mixin';
-    import Locale from '../../../mixins/locale';
-
-    import { initTimeDate, siblingMonth, formatDateLabels } from '../util';
-
-    const prefixCls = 'ivu-picker-panel';
-    const datePrefixCls = 'ivu-date-picker';
-
-    export default {
-        name: 'DatePicker',
-        mixins: [ Mixin, Locale ],
-        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
-        data () {
-            return {
-                prefixCls: prefixCls,
-                datePrefixCls: datePrefixCls,
-                shortcuts: [],
-                currentView: 'date',
-                date: initTimeDate(),
-                value: '',
-                showTime: false,
-                selectionMode: 'day',
-                disabledDate: '',
-                year: null,
-                month: null,
-                confirm: false,
-                isTime: false,
-                format: 'yyyy-MM-dd'
-            };
-        },
-        computed: {
-            classes () {
-                return [
-                    `${prefixCls}-body-wrapper`,
-                    {
-                        [`${prefixCls}-with-sidebar`]: this.shortcuts.length
-                    }
-                ];
-            },
-            datePanelLabel () {
-                if (!this.year) return null; // not ready yet
-                const locale = this.t('i.locale');
-                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
-                const date = new Date(this.year, this.month);
-                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
-
-                const handler = type => {
-                    return () => (this.currentView = type);
-                };
-
-                return {
-                    separator: separator,
-                    labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
-                };
-            }
-        },
-        watch: {
-            value (newVal) {
-                if (!newVal) return;
-                newVal = new Date(newVal);
-                if (!isNaN(newVal)) {
-                    this.date = newVal;
-                    this.setMonthYear(newVal);
-                }
-                if (this.showTime) this.$refs.timePicker.value = newVal;
-            },
-            date (val) {
-                if (this.showTime) this.$refs.timePicker.date = val;
-            },
-            format (val) {
-                if (this.showTime) this.$refs.timePicker.format = val;
-            },
-            currentView (val) {
-                if (val === 'time') this.$refs.timePicker.updateScroll();
-            }
-        },
-        methods: {
-            resetDate () {
-                this.date = new Date(this.date);
-            },
-            setMonthYear(date){
-                this.month = date.getMonth();
-                this.year = date.getFullYear();
-            },
-            handleClear () {
-                this.date = new Date();
-                this.$emit('on-pick', '');
-                if (this.showTime) this.$refs.timePicker.handleClear();
-            },
-            resetView (reset = false) {
-                if (this.currentView !== 'time' || reset) {
-                    if (this.selectionMode === 'month') {
-                        this.currentView = 'month';
-                    } else if (this.selectionMode === 'year') {
-                        this.currentView = 'year';
-                    } else {
-                        this.currentView = 'date';
-                    }
-                }
-                this.setMonthYear(this.date);
-                if (reset) this.isTime = false;
-            },
-            changeYear(dir){
-                if (this.currentView === 'year') {
-                    this.$refs.yearTable[dir == 1 ? 'nextTenYear' : 'prevTenYear']();
-                } else {
-                    this.year+= dir;
-                    this.date = siblingMonth(this.date, dir * 12);
-                }
-            },
-            changeMonth(dir){
-                this.date = siblingMonth(this.date, dir);
-                this.setMonthYear(this.date);
-            },
-            handleToggleTime () {
-                if (this.currentView === 'date') {
-                    this.currentView = 'time';
-                    this.isTime = true;
-                } else if (this.currentView === 'time') {
-                    this.currentView = 'date';
-                    this.isTime = false;
-                }
-            },
-            handleYearPick(year, close = true) {
-                this.year = year;
-                if (!close) return;
-
-                this.date.setFullYear(year);
-                if (this.selectionMode === 'year') {
-                    this.$emit('on-pick', new Date(year, 0, 1));
-                } else {
-                    this.currentView = 'month';
-                }
-
-                this.resetDate();
-            },
-            handleMonthPick (month) {
-                this.month = month;
-                this.date.setMonth(month);
-                if (this.selectionMode !== 'month') {
-                    this.currentView = 'date';
-                    this.resetDate();
-                } else {
-                    this.year && this.date.setFullYear(this.year);
-                    this.resetDate();
-                    const value = new Date(this.date.getFullYear(), month, 1);
-                    this.$emit('on-pick', value);
-                }
-            },
-            handleDatePick (value) {
-                if (this.selectionMode === 'day') {
-                    this.$emit('on-pick', new Date(value.getTime()));
-                    this.date = new Date(value);
-                }
-            },
-            handleTimePick (date) {
-                this.handleDatePick(date);
-            }
-        },
-        mounted () {
-            if (this.selectionMode === 'month') {
-                this.currentView = 'month';
-            }
-
-            if (this.date && !this.year) {
-                this.setMonthYear(this.date);
-            }
-            if (this.showTime) {
-                // todo 这里可能有问题，并不能进入到这里，但不影响正常使用
-                this.$refs.timePicker.date = this.date;
-                this.$refs.timePicker.value = this.value;
-                this.$refs.timePicker.format = this.format;
-                this.$refs.timePicker.showDate = true;
-            }
-        }
-    };
-</script>