From e32b86e97f1239114d82ad37bdc2361895925426 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Tue, 16 Jan 2018 22:22:49 +0100
Subject: [PATCH 01/48] move date.vue to subfolder

---
 .../date-picker/panel/Date/date.vue           | 162 +++++++++++
 src/components/date-picker/panel/date.vue     | 261 ------------------
 2 files changed, 162 insertions(+), 261 deletions(-)
 create mode 100644 src/components/date-picker/panel/Date/date.vue
 delete mode 100644 src/components/date-picker/panel/date.vue

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>

From c4e3fe331f8e4db897652a46f4ace5b6f231698a Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Tue, 16 Jan 2018 22:23:58 +0100
Subject: [PATCH 02/48] move date-range.vue to subfolder

---
 .../date-picker/panel/Date/date-range.vue     | 268 ++++++++++++
 .../date-picker/panel/date-range.vue          | 414 ------------------
 2 files changed, 268 insertions(+), 414 deletions(-)
 create mode 100644 src/components/date-picker/panel/Date/date-range.vue
 delete mode 100644 src/components/date-picker/panel/date-range.vue

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
new file mode 100644
index 00000000..f0225d3f
--- /dev/null
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -0,0 +1,268 @@
+<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="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
+                <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
+                    <span
+                        :class="iconBtnCls('prev', '-double')"
+                        @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
+                    <span
+                        :class="iconBtnCls('prev')"
+                        @click="prevMonth('left')"
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
+                    <date-panel-label
+                        :date-panel-label="leftDatePanelLabel"
+                        :current-view="currentView"
+                        :date-prefix-cls="datePrefixCls"></date-panel-label>
+                    <span
+                        :class="iconBtnCls('next', '-double')"
+                        @click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
+                    <span
+                        :class="iconBtnCls('next')"
+                        @click="nextMonth('left')"
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
+                </div>
+                <component
+                    :is="pickerTable"
+                    ref="leftYearTable"
+                    v-if="currentView !== 'time'"
+                    :table-date="leftPanelDate"
+                    selection-mode="range"
+                    :disabled-date="disabledDate"
+                    :range-state="rangeState"
+                    :value="dates"
+                    @on-change-range="handleChangeRange"
+                    @on-pick="handleRangePick"
+                    @on-pick-click="handlePickClick"
+                ></component>
+            </div>
+            <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
+                <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
+                    <span
+                        :class="iconBtnCls('prev', '-double')"
+                        @click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
+                    <span
+                        :class="iconBtnCls('prev')"
+                        @click="prevMonth('right')"
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
+                    <date-panel-label
+                        :date-panel-label="rightDatePanelLabel"
+                        :current-view="currentView"
+                        :date-prefix-cls="datePrefixCls"></date-panel-label>
+                    <span
+                        :class="iconBtnCls('next', '-double')"
+                        @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
+                    <span
+                        :class="iconBtnCls('next')"
+                        @click="nextMonth('right')"
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
+                </div>
+                <component
+                    :is="pickerTable"
+                    ref="rightYearTable"
+                    v-if="currentView !== 'time'"
+                    :table-date="rightPanelDate"
+                    selection-mode="range"
+                    :range-state="rangeState"
+                    :disabled-date="disabledDate"
+                    :value="dates"
+                    @on-change-range="handleChangeRange"
+                    @on-pick="handleRangePick"
+                    @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="handleRangePick"
+                    @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"
+                :time-disabled="timeDisabled"
+                @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-range.vue';
+    import Confirm from '../../base/confirm.vue';
+
+    import { toDate, initTimeDate, formatDateLabels } from '../../util';
+    import datePanelLabel from './date-panel-label.vue';
+
+    import Mixin from '../panel-mixin';
+    import DateMixin from './date-panel-mixin';
+    import Locale from '../../../../mixins/locale';
+
+    const prefixCls = 'ivu-picker-panel';
+    const datePrefixCls = 'ivu-date-picker';
+
+
+    export default {
+        name: 'RangeDatePickerPanel',
+        mixins: [ Mixin, Locale, DateMixin ],
+        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
+        props: {
+            // in the mixin
+        },
+        data(){
+            const [minDate, maxDate] = this.value.map(date => date || initTimeDate());
+            return {
+                prefixCls: prefixCls,
+                datePrefixCls: datePrefixCls,
+                dates: this.value,
+                rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
+                currentView: this.selectionMode || 'range',
+                leftPanelDate: minDate,
+                rightPanelDate: new Date(minDate.getFullYear(), minDate.getMonth() + 1, minDate.getDate())
+            };
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}-body-wrapper`,
+                    `${datePrefixCls}-with-range`,
+                    {
+                        [`${prefixCls}-with-sidebar`]: this.shortcuts.length
+                    }
+                ];
+            },
+            pickerTable(){
+                return `${this.currentView}-table`;
+            },
+            leftDatePanelLabel(){
+                return this.panelLabelConfig('left');
+            },
+            rightDatePanelLabel(){
+                return this.panelLabelConfig('right');
+            },
+            timeDisabled(){
+                return !(this.dates[0] && this.dates[1]);
+            }
+        },
+        watch: {
+            value(newVal) {
+                const minDate = newVal[0] ? toDate(newVal[0]) : null;
+                const maxDate = newVal[1] ? toDate(newVal[1]) : null;
+                this.dates = [minDate, maxDate];
+                this.rangeState = {
+                    from: minDate,
+                    to: maxDate,
+                    selecting: false
+                };
+            },
+            currentView(currentView){
+                const leftMonth = this.leftPanelDate.getMonth();
+                const rightMonth = this.rightPanelDate.getMonth();
+                const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
+
+                if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
+                    this.changePanelDate('right', 'Month', 1);
+                }
+                if (currentView === 'month' && isSameYear){
+                    this.changePanelDate('right', 'FullYear', 1);
+                }
+                if (currentView === 'year' && isSameYear){
+                    this.changePanelDate('right', 'FullYear', 10);
+                }
+            }
+        },
+        methods: {
+            panelLabelConfig (direction) {
+                const locale = this.t('i.locale');
+                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
+                const handler = type => {
+                    const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
+                    return () => fn(direction);
+                };
+
+                const date = this[`${direction}PanelDate`];
+                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
+
+                return {
+                    separator: separator,
+                    labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
+                };
+            },
+            prevYear (direction) {
+                this.changePanelDate(direction, 'FullYear', -1);
+            },
+            nextYear (direction) {
+                this.changePanelDate(direction, 'FullYear', 1);
+            },
+            prevMonth(direction){
+                this.changePanelDate(direction, 'Month', -1);
+            },
+            nextMonth(direction){
+                this.changePanelDate(direction, 'Month', 1);
+            },
+            changePanelDate(panel, type, increment){
+                const current = new Date(this[`${panel}PanelDate`]);
+                current[`set${type}`](current[`get${type}`]() + increment);
+                this[`${panel}PanelDate`] = current;
+
+                // change other panels if they overlap
+                const otherPanel = panel === 'left' ? 'right' : 'left';
+                if (panel === 'left' && this.leftPanelDate >= this.rightPanelDate){
+                    this.changePanelDate(otherPanel, type, 1);
+                }
+                if (panel === 'right' && this.rightPanelDate <= this.leftPanelDate){
+                    this.changePanelDate(otherPanel, type, -1);
+                }
+            },
+            showYearPicker () {
+                this.currentView = 'year';
+            },
+            showMonthPicker () {
+                this.currentView = 'month';
+            },
+            handleRangePick (val) {
+                if (this.rangeState.selecting || this.currentView === 'time'){
+                    const [minDate, maxDate] = [this.rangeState.from, val].sort((a, b) => a - b);
+                    this.dates = [minDate, maxDate];
+                    if (this.currentView === 'time'){
+                        this.dates = val;
+                    } else {
+                        this.rangeState = {
+                            from: minDate,
+                            to: maxDate,
+                            selecting: false
+                        };
+                    }
+                    this.handleConfirm(false);
+                } else {
+                    this.rangeState = {
+                        from: val,
+                        to: null,
+                        selecting: true
+                    };
+                }
+            },
+            handleChangeRange (val) {
+                this.rangeState.to = val;
+            },
+        },
+    };
+</script>
diff --git a/src/components/date-picker/panel/date-range.vue b/src/components/date-picker/panel/date-range.vue
deleted file mode 100644
index cd55b125..00000000
--- a/src/components/date-picker/panel/date-range.vue
+++ /dev/null
@@ -1,414 +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="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
-                <div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
-                    <span
-                        :class="iconBtnCls('prev', '-double')"
-                        @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
-                    <span
-                        :class="iconBtnCls('prev')"
-                        @click="prevMonth"
-                        v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
-                    <date-panel-label
-                        :date-panel-label="leftDatePanelLabel"
-                        :current-view="leftCurrentView"
-                        :date-prefix-cls="datePrefixCls"/>
-                    <span
-                        :class="iconBtnCls('next', '-double')"
-                        @click="nextYear('left')"
-                        v-show="leftCurrentView === 'year' || leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
-                </div>
-                <date-table
-                    v-show="leftCurrentView === 'date'"
-                    :year="leftYear"
-                    :month="leftMonth"
-                    :date="date"
-                    :min-date="minDate"
-                    :max-date="maxDate"
-                    :range-state="rangeState"
-                    selection-mode="range"
-                    :disabled-date="disabledDate"
-                    @on-changerange="handleChangeRange"
-                    @on-pick="handleRangePick"
-                    @on-pick-click="handlePickClick"></date-table>
-                <year-table
-                    ref="leftYearTable"
-                    v-show="leftCurrentView === 'year'"
-                    :year="leftTableYear"
-                    :date="leftTableDate"
-                    selection-mode="range"
-                    :disabled-date="disabledDate"
-                    @on-pick="handleLeftYearPick"
-                    @on-pick-click="handlePickClick"></year-table>
-                <month-table
-                    ref="leftMonthTable"
-                    v-show="leftCurrentView === 'month'"
-                    :month="leftMonth"
-                    :date="leftTableDate"
-                    selection-mode="range"
-                    :disabled-date="disabledDate"
-                    @on-pick="handleLeftMonthPick"
-                    @on-pick-click="handlePickClick"></month-table>
-            </div>
-            <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
-                <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
-                     <span
-                         :class="iconBtnCls('prev', '-double')"
-                         @click="prevYear('right')"
-                         v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
-                    <date-panel-label
-                        :date-panel-label="rightDatePanelLabel"
-                        :current-view="rightCurrentView"
-                        :date-prefix-cls="datePrefixCls"/>
-                    <span
-                        :class="iconBtnCls('next', '-double')"
-                        @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
-                    <span
-                        :class="iconBtnCls('next')"
-                        @click="nextMonth"
-                        v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
-                </div>
-                <date-table
-                    v-show="rightCurrentView === 'date'"
-                    :year="rightYear"
-                    :month="rightMonth"
-                    :date="rightDate"
-                    :min-date="minDate"
-                    :max-date="maxDate"
-                    :range-state="rangeState"
-                    selection-mode="range"
-                    :disabled-date="disabledDate"
-                    @on-changerange="handleChangeRange"
-                    @on-pick="handleRangePick"
-                    @on-pick-click="handlePickClick"></date-table>
-                <year-table
-                    ref="rightYearTable"
-                    v-show="rightCurrentView === 'year'"
-                    :year="rightTableYear"
-                    :date="rightTableDate"
-                    selection-mode="range"
-                    :disabled-date="disabledDate"
-                    @on-pick="handleRightYearPick"
-                    @on-pick-click="handlePickClick"></year-table>
-                <month-table
-                    ref="rightMonthTable"
-                    v-show="rightCurrentView === 'month'"
-                    :month="rightMonth"
-                    :date="rightTableDate"
-                    selection-mode="range"
-                    :disabled-date="disabledDate"
-                    @on-pick="handleRightMonthPick"
-                    @on-pick-click="handlePickClick"></month-table>
-            </div>
-            <div :class="[prefixCls + '-content']" v-show="isTime">
-                <time-picker
-                    ref="timePicker"
-                    v-show="isTime"
-                    @on-pick="handleTimePick"
-                    @on-pick-click="handlePickClick"></time-picker>
-            </div>
-            <Confirm
-                v-if="confirm"
-                :show-time="showTime"
-                :is-time="isTime"
-                :time-disabled="timeDisabled"
-                @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-range.vue';
-    import Confirm from '../base/confirm.vue';
-    import { toDate, prevMonth, nextMonth, initTimeDate, formatDateLabels } from '../util';
-    import datePanelLabel from './date-panel-label.vue';
-
-    import Mixin from './mixin';
-    import Locale from '../../../mixins/locale';
-
-    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: [],
-                date: initTimeDate(),
-                value: '',
-                minDate: '',
-                maxDate: '',
-                confirm: false,
-                rangeState: {
-                    endDate: null,
-                    selecting: false
-                },
-                showTime: false,
-                disabledDate: '',
-                leftCurrentView: 'date',
-                rightCurrentView: 'date',
-                selectionMode: 'range',
-                leftTableYear: null,
-                rightTableYear: null,
-                isTime: false,
-                format: 'yyyy-MM-dd'
-            };
-        },
-        computed: {
-            classes () {
-                return [
-                    `${prefixCls}-body-wrapper`,
-                    `${datePrefixCls}-with-range`,
-                    {
-                        [`${prefixCls}-with-sidebar`]: this.shortcuts.length
-                    }
-                ];
-            },
-            leftYear () {
-                return this.date.getFullYear();
-            },
-            leftTableDate () {
-                if (this.leftCurrentView === 'year' || this.leftCurrentView === 'month') {
-                    return new Date(this.leftTableYear);
-                } else {
-                    return this.date;
-                }
-            },
-            leftMonth () {
-                return this.date.getMonth();
-            },
-            rightYear () {
-                return this.rightDate.getFullYear();
-            },
-            rightTableDate () {
-                if (this.rightCurrentView === 'year' || this.rightCurrentView === 'month') {
-                    return new Date(this.rightTableYear);
-                } else {
-                    return this.date;
-                }
-            },
-            rightMonth () {
-                return this.rightDate.getMonth();
-            },
-            rightDate () {
-                const newDate = new Date(this.date);
-                const month = newDate.getMonth();
-                newDate.setDate(1);
-
-                if (month === 11) {
-                    newDate.setFullYear(newDate.getFullYear() + 1);
-                    newDate.setMonth(0);
-                } else {
-                    newDate.setMonth(month + 1);
-                }
-                return newDate;
-            },
-            leftDatePanelLabel () {
-                if (!this.leftYear) return null; // not ready yet
-                return this.panelLabelConfig('left');
-            },
-            rightDatePanelLabel () {
-                if (!this.leftYear) return null; // not ready yet
-                return this.panelLabelConfig('right');
-            },
-            timeDisabled () {
-                return !(this.minDate && this.maxDate);
-            }
-        },
-        watch: {
-            value(newVal) {
-                if (!newVal) {
-                    this.minDate = null;
-                    this.maxDate = null;
-                } else if (Array.isArray(newVal)) {
-                    this.minDate = newVal[0] ? toDate(newVal[0]) : null;
-                    this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
-                    if (this.minDate) this.date = new Date(this.minDate);
-                }
-                if (this.showTime) this.$refs.timePicker.value = newVal;
-            },
-            minDate (val) {
-                if (this.showTime) this.$refs.timePicker.date = val;
-            },
-            maxDate (val) {
-                if (this.showTime) this.$refs.timePicker.dateEnd = val;
-            },
-            format (val) {
-                if (this.showTime) this.$refs.timePicker.format = val;
-            },
-            isTime (val) {
-                if (val) this.$refs.timePicker.updateScroll();
-            }
-        },
-        methods: {
-            panelLabelConfig (direction) {
-                const locale = this.t('i.locale');
-                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
-                const handler = type => {
-                    const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
-                    return () => fn(direction);
-                };
-
-                const date = new Date(this[`${direction}Year`], this[`${direction}Month`]);
-                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
-
-                return {
-                    separator: separator,
-                    labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
-                };
-            },
-            resetDate () {
-                this.date = new Date(this.date);
-                this.leftTableYear = this.date.getFullYear();
-                this.rightTableYear = this.rightDate.getFullYear();
-            },
-            handleClear() {
-                this.minDate = null;
-                this.maxDate = null;
-                this.date = new Date();
-                this.handleConfirm();
-                if (this.showTime) this.$refs.timePicker.handleClear();
-            },
-            resetView(reset = false) {
-                this.leftCurrentView = 'date';
-                this.rightCurrentView = 'date';
-
-                this.leftTableYear = this.leftYear;
-                this.rightTableYear = this.rightYear;
-
-                if (reset) this.isTime = false;
-            },
-            prevYear (direction) {
-                if (this[`${direction}CurrentView`] === 'year') {
-                    this.$refs[`${direction}YearTable`].prevTenYear();
-                } else if (this[`${direction}CurrentView`] === 'month') {
-                    this[`${direction}TableYear`]--;
-                } else {
-                    const date = this.date;
-                    date.setFullYear(date.getFullYear() - 1);
-                    this.resetDate();
-                }
-            },
-            nextYear (direction) {
-                if (this[`${direction}CurrentView`] === 'year') {
-                    this.$refs[`${direction}YearTable`].nextTenYear();
-                } else if (this[`${direction}CurrentView`] === 'month') {
-                    this[`${direction}TableYear`]++;
-                } else {
-                    const date = this.date;
-                    date.setFullYear(date.getFullYear() + 1);
-                    this.resetDate();
-                }
-            },
-            prevMonth () {
-                this.date = prevMonth(this.date);
-            },
-            nextMonth () {
-                this.date = nextMonth(this.date);
-            },
-            handleLeftYearPick (year, close = true) {
-                this.handleYearPick(year, close, 'left');
-            },
-            handleRightYearPick (year, close = true) {
-                this.handleYearPick(year, close, 'right');
-            },
-            handleYearPick (year, close, direction) {
-                this[`${direction}TableYear`] = year;
-                if (!close) return;
-
-                this[`${direction}CurrentView`] = 'month';
-            },
-            handleLeftMonthPick (month) {
-                this.handleMonthPick(month, 'left');
-            },
-            handleRightMonthPick (month) {
-                this.handleMonthPick(month, 'right');
-            },
-            handleMonthPick (month, direction) {
-                let year = this[`${direction}TableYear`];
-                if (direction === 'right') {
-                    if (month === 0) {
-                        month = 11;
-                        year--;
-                    } else {
-                        month--;
-                    }
-                }
-
-                this.date.setYear(year);
-                this.date.setMonth(month);
-                this[`${direction}CurrentView`] = 'date';
-                this.resetDate();
-            },
-            showYearPicker (direction) {
-                this[`${direction}CurrentView`] = 'year';
-                this[`${direction}TableYear`] = this[`${direction}Year`];
-            },
-            showMonthPicker (direction) {
-                this[`${direction}CurrentView`] = 'month';
-            },
-            handleConfirm(visible) {
-                this.$emit('on-pick', [this.minDate, this.maxDate], visible);
-            },
-            handleRangePick (val, close = true) {
-                if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
-
-                this.minDate = val.minDate;
-                this.maxDate = val.maxDate;
-
-                // todo Remove when Chromium has fixed bug
-                // https://github.com/iview/iview/issues/2122
-                this.$nextTick(() => {
-                    this.minDate = val.minDate;
-                    this.maxDate = val.maxDate;
-                });
-                /* end of #2122 patch */
-
-                if (!close) return;
-//                if (!this.showTime) {
-//                    this.handleConfirm(false);
-//                }
-                this.handleConfirm(false);
-            },
-            handleChangeRange (val) {
-                this.minDate = val.minDate;
-                this.maxDate = val.maxDate;
-                this.rangeState = val.rangeState;
-            },
-            handleToggleTime () {
-                this.isTime = !this.isTime;
-            },
-            handleTimePick (date) {
-                this.minDate = date[0];
-                this.maxDate = date[1];
-                this.handleConfirm(false);
-            }
-        },
-        mounted () {
-            if (this.showTime) {
-                // todo 这里也到不了
-                this.$refs.timePicker.date = this.minDate;
-                this.$refs.timePicker.dateEnd = this.maxDate;
-                this.$refs.timePicker.value = this.value;
-                this.$refs.timePicker.format = this.format;
-                this.$refs.timePicker.showDate = true;
-            }
-        }
-    };
-</script>

From ca8e830cc36301f2347c63a635f8733af88d3da4 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Tue, 16 Jan 2018 22:24:21 +0100
Subject: [PATCH 03/48] move files to subfolders

---
 .../date-picker/base/month-table.vue          |  79 -------
 .../date-picker/base/year-table.vue           |  66 +++---
 .../panel/{ => Date}/date-panel-label.vue     |   0
 .../panel/Date/date-panel-mixin.js            |  50 ++++
 .../date-picker/panel/Time/time-range.vue     | 163 +++++++++++++
 .../date-picker/panel/{ => Time}/time.vue     |  89 +++-----
 .../panel/{mixin.js => panel-mixin.js}        |  21 +-
 .../date-picker/panel/time-range.vue          | 214 ------------------
 8 files changed, 297 insertions(+), 385 deletions(-)
 delete mode 100644 src/components/date-picker/base/month-table.vue
 rename src/components/date-picker/panel/{ => Date}/date-panel-label.vue (100%)
 create mode 100644 src/components/date-picker/panel/Date/date-panel-mixin.js
 create mode 100644 src/components/date-picker/panel/Time/time-range.vue
 rename src/components/date-picker/panel/{ => Time}/time.vue (52%)
 rename src/components/date-picker/panel/{mixin.js => panel-mixin.js} (54%)
 delete mode 100644 src/components/date-picker/panel/time-range.vue

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 c01556b3..00000000
--- 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 6bc8467e..00ab9f5e 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
                 };
 
+                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)));
+
+
                 for (let i = 0; i < 10; i++) {
                     const cell = deepCopy(cell_tmpl);
-                    cell.text = this.startYear + i;
-
-                    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;
+                    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-panel-label.vue b/src/components/date-picker/panel/Date/date-panel-label.vue
similarity index 100%
rename from src/components/date-picker/panel/date-panel-label.vue
rename to src/components/date-picker/panel/Date/date-panel-label.vue
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 00000000..3c4ec99c
--- /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 00000000..aea53d2c
--- /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.vue b/src/components/date-picker/panel/Time/time.vue
similarity index 52%
rename from src/components/date-picker/panel/time.vue
rename to src/components/date-picker/panel/Time/time.vue
index e6646b5f..35a26888 100644
--- a/src/components/date-picker/panel/time.vue
+++ b/src/components/date-picker/panel/Time/time.vue
@@ -7,9 +7,9 @@
                     ref="timeSpinner"
                     :show-seconds="showSeconds"
                     :steps="steps"
-                    :hours="hours"
-                    :minutes="minutes"
-                    :seconds="seconds"
+                    :hours="date.getHours()"
+                    :minutes="date.getMinutes()"
+                    :seconds="date.getSeconds()"
                     :disabled-hours="disabledHours"
                     :disabled-minutes="disabledMinutes"
                     :disabled-seconds="disabledSeconds"
@@ -25,42 +25,45 @@
     </div>
 </template>
 <script>
-    import TimeSpinner from '../base/time-spinner.vue';
-    import Confirm from '../base/confirm.vue';
+    import TimeSpinner from '../../base/time-spinner.vue';
+    import Confirm from '../../base/confirm.vue';
+    import Options from '../../time-mixins';
 
-    import Mixin from './mixin';
-    import Locale from '../../../mixins/locale';
 
-    import { initTimeDate } from '../util';
+    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: 'TimePicker',
-        mixins: [ Mixin, Locale ],
+        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: initTimeDate(),
-                value: '',
+                date: this.value[0] || initTimeDate(),
                 showDate: false,
-                format: 'HH:mm:ss',
-                hours: '',
-                minutes: '',
-                seconds: '',
-                disabledHours: [],
-                disabledMinutes: [],
-                disabledSeconds: [],
-                hideDisabledOptions: false,
                 confirm: false
             };
         },
@@ -68,7 +71,7 @@
             showSeconds () {
                 return (this.format || '').indexOf('ss') !== -1;
             },
-            visibleDate () {
+            visibleDate () { // TODO
                 const date = this.date;
                 const month = date.getMonth() + 1;
                 const tYear = this.t('i.datepicker.year');
@@ -77,44 +80,22 @@
             }
         },
         watch: {
-            value (newVal) {
-                if (!newVal) return;
+            value (dates) {
+                let newVal = dates[0] || initTimeDate();
                 newVal = new Date(newVal);
-                if (!isNaN(newVal)) {
-                    this.date = newVal;
-                    this.handleChange({
-                        hours: newVal.getHours(),
-                        minutes: newVal.getMinutes(),
-                        seconds: newVal.getSeconds()
-                    }, false);
-                }
+                this.date = newVal;
             }
         },
         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);
+
+                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);
             },
-            updateScroll () {
-                this.$refs.timeSpinner.updateScroll();
-            }
         },
         mounted () {
             if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
diff --git a/src/components/date-picker/panel/mixin.js b/src/components/date-picker/panel/panel-mixin.js
similarity index 54%
rename from src/components/date-picker/panel/mixin.js
rename to src/components/date-picker/panel/panel-mixin.js
index bc93a9c8..d227725a 100644
--- a/src/components/date-picker/panel/mixin.js
+++ b/src/components/date-picker/panel/panel-mixin.js
@@ -15,13 +15,32 @@ export default {
             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 3aad9e33..00000000
--- 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>

From 0b51803bcefc15a8bb0e815d022876e3dbc007e4 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Tue, 16 Jan 2018 22:25:13 +0100
Subject: [PATCH 04/48] Add functions to utils.js

---
 src/components/date-picker/util.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/date-picker/util.js b/src/components/date-picker/util.js
index 31a10dc4..fb248f3c 100644
--- a/src/components/date-picker/util.js
+++ b/src/components/date-picker/util.js
@@ -14,6 +14,18 @@ export const toDate = function(date) {
     return _date;
 };
 
+export const clearHours = function (time) {
+    const cloneDate = new Date(time);
+    cloneDate.setHours(0, 0, 0, 0);
+    return cloneDate.getTime();
+};
+
+export const isInRange = (time, a, b) => {
+    if (!a || !b) return false;
+    const [start, end] = [a, b].sort();
+    return time >= start && time <= end;
+};
+
 export const formatDate = function(date, format) {
     date = toDate(date);
     if (!date) return '';

From 95eae081bce373865b446f4070f275f5645250fb Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Tue, 16 Jan 2018 22:26:00 +0100
Subject: [PATCH 05/48] refactor Datepicker

refactor Datepicker  to render subcomponents in template instead of
creating new Vue instances
---
 .../date-picker/base/date-table.vue           | 176 ++------
 src/components/date-picker/base/mixin.js      |  51 +++
 .../date-picker/base/month-table.vue          |  74 ++++
 src/components/date-picker/base/prefixCls.js  |   2 +
 src/components/date-picker/picker.vue         | 388 +++++++-----------
 .../date-picker/picker/date-picker.js         |  35 +-
 .../date-picker/picker/time-picker.js         |  45 +-
 7 files changed, 332 insertions(+), 439 deletions(-)
 create mode 100644 src/components/date-picker/base/mixin.js
 create mode 100644 src/components/date-picker/base/month-table.vue
 create mode 100644 src/components/date-picker/base/prefixCls.js

diff --git a/src/components/date-picker/base/date-table.vue b/src/components/date-picker/base/date-table.vue
index 23be43a2..12fbb2b6 100644
--- a/src/components/date-picker/base/date-table.vue
+++ b/src/components/date-picker/base/date-table.vue
@@ -1,88 +1,40 @@
 <template>
-    <div
-        :class="classes"
-        @mousemove="handleMouseMove">
+    <div :class="classes">
         <div :class="[prefixCls + '-header']">
             <span v-for="day in headerDays" :key="day">
                 {{day}}
             </span>
         </div>
-        <span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index" @click="handleClick(cell)">{{ cell.text }}</em></span>
+        <span
+                :class="getCellCls(cell)"
+                v-for="cell in readCells"
+                @click="handleClick(cell)"
+                @mouseenter="handleMouseMove(cell)"
+        >
+            <em>{{ cell.text }}</em>
+        </span>
     </div>
 </template>
 <script>
-    import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
+    import { getFirstDayOfMonth, getDayCountOfMonth, clearHours, isInRange } from '../util';
     import { deepCopy } from '../../../utils/assist';
     import Locale from '../../../mixins/locale';
 
-    const prefixCls = 'ivu-date-picker-cells';
+    import mixin from './mixin';
+    import prefixCls from './prefixCls';
 
-    const clearHours = function (time) {
-        const cloneDate = new Date(time);
-        cloneDate.setHours(0, 0, 0, 0);
-        return cloneDate.getTime();
-    };
 
     export default {
-        mixins: [ Locale ],
+        mixins: [ Locale, mixin ],
+
         props: {
-            date: {},
-            year: {},
-            month: {},
-            selectionMode: {
-                default: 'day'
-            },
-            disabledDate: {},
-            minDate: {},
-            maxDate: {},
-            rangeState: {
-                default () {
-                    return {
-                        endDate: null,
-                        selecting: false
-                    };
-                }
-            },
-            value: ''
+            /* more props in mixin */
         },
         data () {
             return {
                 prefixCls: prefixCls,
-                readCells: []
             };
         },
-        watch: {
-            'rangeState.endDate' (newVal) {
-                this.markRange(newVal);
-            },
-            minDate(newVal, oldVal) {
-                if (newVal && !oldVal) {
-                    this.rangeState.selecting = true;
-                    this.markRange(newVal);
-                } else if (!newVal) {
-                    this.rangeState.selecting = false;
-                    this.markRange(newVal);
-                } else {
-                    this.markRange();
-                }
-            },
-            maxDate(newVal, oldVal) {
-                if (newVal && !oldVal) {
-                    this.rangeState.selecting = false;
-                    this.markRange(newVal);
-//                    this.$emit('on-pick', {
-//                        minDate: this.minDate,
-//                        maxDate: this.maxDate
-//                    });
-                }
-            },
-            cells: {
-                handler (cells) {
-                    this.readCells = cells;
-                },
-                immediate: true
-            }
-        },
         computed: {
             classes () {
                 return [
@@ -97,14 +49,17 @@
                 const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
                 return weekDays;
             },
-            cells () {
-                const date = new Date(this.year, this.month, 1);
+            readCells () {
+                const tableYear = this.tableDate.getFullYear();
+                const tableMonth = this.tableDate.getMonth();
+                const date = new Date(tableYear, tableMonth, 1);
                 const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
                 const day = (getFirstDayOfMonth(date) || 7) - weekStartDay; // day of first day
                 const today = clearHours(new Date());    // timestamp of today
-                const selectDay = clearHours(new Date(this.value));    // timestamp of selected day
-                const minDay = clearHours(new Date(this.minDate));
-                const maxDay = clearHours(new Date(this.maxDate));
+                const selectedDays = this.dates.filter(Boolean).map(clearHours);    // timestamp of selected days
+                const [minDay, maxDay] = this.dates.map(clearHours);
+                const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
+                const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
 
                 const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
                 const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
@@ -127,7 +82,7 @@
                         const cell = deepCopy(cell_tmpl);
                         cell.type = 'prev-month';
                         cell.text = dateCountOfLastMonth - (day - 1) + i;
-                        cell.date = new Date(this.year, this.month - 1, cell.text);
+                        cell.date = new Date(tableYear, tableMonth - 1, cell.text);
                         const time = clearHours(cell.date);
                         cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
                         cells.push(cell);
@@ -137,15 +92,16 @@
                 for (let i = 1; i <= dateCountOfMonth; i++) {
                     const cell = deepCopy(cell_tmpl);
                     cell.text = i;
-                    cell.date = new Date(this.year, this.month, cell.text);
+                    cell.date = new Date(tableYear, tableMonth, cell.text);
                     const time = clearHours(cell.date);
                     cell.type = time === today ? 'today' : 'normal';
-                    cell.selected = time === selectDay;
+                    cell.selected = selectedDays.includes(time);
                     cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
-                    cell.range = time >= minDay && time <= maxDay;
-                    cell.start = this.minDate && time === minDay;
-                    cell.end = this.maxDate && time === maxDay;
-
+                    if (this.selectionMode === 'range'){
+                        cell.range = isInRange(time, rangeStart, rangeEnd);
+                        cell.start = time === minDay;
+                        cell.end = time === maxDay;
+                    }
                     cells.push(cell);
                 }
 
@@ -154,7 +110,7 @@
                     const cell = deepCopy(cell_tmpl);
                     cell.type = 'next-month';
                     cell.text = i;
-                    cell.date = new Date(this.year, this.month + 1, cell.text);
+                    cell.date = new Date(tableYear, tableMonth + 1, cell.text);
                     const time = clearHours(cell.date);
                     cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
                     cells.push(cell);
@@ -164,74 +120,6 @@
             }
         },
         methods: {
-            handleClick (cell) {
-
-                if (cell.disabled) return;
-                const newDate = cell.date;
-
-                if (this.selectionMode === 'range') {
-                    if (this.minDate && this.maxDate) {
-                        const minDate = new Date(newDate.getTime());
-                        const maxDate = null;
-                        this.rangeState.selecting = true;
-                        this.markRange(this.minDate);
-
-                        this.$emit('on-pick', {minDate, maxDate}, false);
-                    } else if (this.minDate && !this.maxDate) {
-                        if (newDate >= this.minDate) {
-                            const maxDate = new Date(newDate.getTime());
-                            this.rangeState.selecting = false;
-
-                            this.$emit('on-pick', {minDate: this.minDate, maxDate});
-                        } else {
-                            const minDate = new Date(newDate.getTime());
-
-                            this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
-                        }
-                    } else if (!this.minDate) {
-                        const minDate = new Date(newDate.getTime());
-                        this.rangeState.selecting = true;
-                        this.markRange(this.minDate);
-
-                        this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
-                    }
-                } else {
-                    this.$emit('on-pick', newDate);
-                }
-                this.$emit('on-pick-click');
-            },
-            handleMouseMove (event) {
-                if (!this.rangeState.selecting) return;
-
-                this.$emit('on-changerange', {
-                    minDate: this.minDate,
-                    maxDate: this.maxDate,
-                    rangeState: this.rangeState
-                });
-
-                const target = event.target;
-                if (target.tagName === 'EM') {
-                    const cell = this.cells[parseInt(event.target.getAttribute('index'))];
-//                    if (cell.disabled) return;    // todo 待确定
-                    this.rangeState.endDate = cell.date;
-                }
-            },
-            markRange (maxDate) {
-                const minDate = this.minDate;
-                if (!maxDate) maxDate = this.maxDate;
-
-                const minDay = clearHours(new Date(minDate));
-                const maxDay = clearHours(new Date(maxDate));
-
-                this.cells.forEach(cell => {
-                    if (cell.type === 'today' || cell.type === 'normal') {
-                        const time = clearHours(new Date(this.year, this.month, cell.text));
-                        cell.range = time >= minDay && time <= maxDay;
-                        cell.start = minDate && time === minDay;
-                        cell.end = maxDate && time === maxDay;
-                    }
-                });
-            },
             getCellCls (cell) {
                 return [
                     `${prefixCls}-cell`,
diff --git a/src/components/date-picker/base/mixin.js b/src/components/date-picker/base/mixin.js
new file mode 100644
index 00000000..0d0b7d37
--- /dev/null
+++ b/src/components/date-picker/base/mixin.js
@@ -0,0 +1,51 @@
+
+export default {
+    props: {
+        tableDate: {
+            type: Date,
+            required: true
+        },
+        disabledDate: {
+            type: Function
+        },
+        selectionMode: {
+            type: String,
+            required: true
+        },
+        value: {
+            type: Array,
+            required: true
+        },
+        rangeState: {
+            type: Object,
+            default: () => ({
+                from: null,
+                to: null,
+                selecting: false
+            })
+        },
+
+    },
+    computed: {
+        dates(){
+            const {selectionMode, value, rangeState} = this;
+            const rangeSelecting = selectionMode === 'range' && rangeState.selecting;
+            return rangeSelecting ? [rangeState.from] : value;
+        },
+    },
+    methods: {
+        handleClick (cell) {
+            if (cell.disabled) return;
+            const newDate = cell.date;
+
+            this.$emit('on-pick', newDate);
+            this.$emit('on-pick-click');
+        },
+        handleMouseMove (cell) {
+            if (!this.rangeState.selecting) return;
+            if (cell.disabled) return;
+            const newDate = cell.date;
+            this.$emit('on-change-range', newDate);
+        },
+    }
+};
\ No newline at end of file
diff --git a/src/components/date-picker/base/month-table.vue b/src/components/date-picker/base/month-table.vue
new file mode 100644
index 00000000..62b26b05
--- /dev/null
+++ b/src/components/date-picker/base/month-table.vue
@@ -0,0 +1,74 @@
+<template>
+    <div :class="classes">
+        <span
+            :class="getCellCls(cell)"
+            v-for="cell in cells"
+            @click="handleClick(cell)"
+            @mouseenter="handleMouseMove(cell)"
+
+        >
+            <em>{{ cell.text }}</em>
+        </span>
+    </div>
+</template>
+<script>
+    import { clearHours, isInRange } from '../util';
+    import { deepCopy } from '../../../utils/assist';
+    import Locale from '../../../mixins/locale';
+    import mixin from './mixin';
+    import prefixCls from './prefixCls';
+
+    export default {
+        mixins: [ Locale, mixin ],
+        props: {/* in mixin */},
+        computed: {
+            classes() {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-month`
+                ];
+            },
+            cells () {
+                let cells = [];
+                const cell_tmpl = {
+                    text: '',
+                    selected: false,
+                    disabled: false
+                };
+
+                const tableYear = this.tableDate.getFullYear();
+                const rangeStart = this.rangeState.from && clearHours(new Date(this.rangeState.from.getFullYear(), this.rangeState.from.getMonth(), 1));
+                const rangeEnd = this.rangeState.to && clearHours(new Date(this.rangeState.to.getFullYear(), this.rangeState.to.getMonth(), 1));
+                const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), date.getMonth(), 1)));
+
+                for (let i = 0; i < 12; i++) {
+                    const cell = deepCopy(cell_tmpl);
+                    cell.date = new Date(tableYear, i, 1);
+                    cell.text = this.tCell(i + 1);
+                    const time = clearHours(cell.date);
+                    cell.range = isInRange(time, rangeStart, rangeEnd);
+                    cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'month';
+                    cell.selected = selectedDays.includes(time);
+                    cells.push(cell);
+                }
+
+                return cells;
+            }
+        },
+        methods: {
+            getCellCls (cell) {
+                return [
+                    `${prefixCls}-cell`,
+                    {
+                        [`${prefixCls}-cell-selected`]: cell.selected,
+                        [`${prefixCls}-cell-disabled`]: cell.disabled,
+                        [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
+                    }
+                ];
+            },
+            tCell (nr) {
+                return this.t(`i.datepicker.months.m${nr}`);
+            }
+        }
+    };
+</script>
diff --git a/src/components/date-picker/base/prefixCls.js b/src/components/date-picker/base/prefixCls.js
new file mode 100644
index 00000000..571b218b
--- /dev/null
+++ b/src/components/date-picker/base/prefixCls.js
@@ -0,0 +1,2 @@
+
+export default 'ivu-date-picker-cells';
\ No newline at end of file
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 5211fccf..52c39b41 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -29,12 +29,33 @@
                 ref="drop"
                 :data-transfer="transfer"
                 v-transfer-dom>
-                <div ref="picker"></div>
+                <div>
+                    <component
+                        :is="panel"
+                        :visible="visible"
+                        :showTime="type === 'datetime' || type === 'datetimerange'"
+                        :confirm="isConfirm"
+                        :selectionMode="selectionMode"
+                        :steps="steps"
+                        :format="format"
+                        :value="internalValue"
+
+                        v-bind="ownPickerProps"
+
+                        @on-pick="onPick"
+                        @on-pick-clear="handleClear"
+                        @on-pick-success="onPickSuccess"
+                        @on-pick-click="disableClickOutSide = true"
+                        @on-selection-mode-change="onSelectionModeChange"
+                    ></component>
+                </div>
             </Drop>
         </transition>
     </div>
 </template>
 <script>
+
+
     import iInput from '../../components/input/input.vue';
     import Drop from '../../components/select/dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
@@ -179,6 +200,10 @@
                 type: Boolean,
                 default: null
             },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
@@ -206,21 +231,44 @@
             },
             elementId: {
                 type: String
+            },
+            steps: {
+                type: Array,
+                default: () => []
+            },
+            value: {
+                type: [Date, String, Array],
+                validator(val){
+                    if (Array.isArray(val)){
+                        const [start, end] = val.map(v => new Date(v));
+                        return !isNaN(start.getTime()) && !isNaN(end.getTime());
+                    } else {
+                        if (typeof val === 'string') val = val.trim();
+                        const date = new Date(val);
+                        return val === '' || val === null || !isNaN(date.getTime());
+                    }
+                }
             }
         },
-        data () {
+        data(){
+            const initialValue = this.formatDate(this.value);
+
             return {
                 prefixCls: prefixCls,
                 showClose: false,
                 visible: false,
-                picker: null,
-                internalValue: '',
+                internalValue: initialValue,
                 disableClickOutSide: false,    // fixed when click a date,trigger clickoutside to close picker
-                disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭
-                currentValue: this.value
+                disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭,
+                selectionMode: this.onSelectionModeChange(this.type)
             };
         },
         computed: {
+            publicValue(){
+                const isRange = this.type.includes('range');
+                return isRange ? this.formatDate(this.internalValue) : this.formatDate(this.internalValue[0]);
+            },
+
             opened () {
                 return this.open === null ? this.visible : this.open;
             },
@@ -231,52 +279,31 @@
                 return icon;
             },
             transition () {
-                if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
-                    return 'slide-up';
-                } else {
-                    return 'slide-down';
-                }
+                const bottomPlaced = this.placement.match(/^bottom/);
+                return bottomPlaced ? 'slide-up' : 'slide-down';
             },
-            selectionMode() {
-                if (this.type === 'month') {
-                    return 'month';
-                } else if (this.type === 'year') {
-                    return 'year';
-                }
+            visualValue() {
+                const value = this.internalValue;
 
-                return 'day';
+                if (!value) return;
+                const formatter = (
+                    TYPE_VALUE_RESOLVER_MAP[this.type] ||
+                    TYPE_VALUE_RESOLVER_MAP['default']
+                ).formatter;
+                const format = DEFAULT_FORMATS[this.type];
+                return formatter(value, this.format || format);
             },
-            visualValue: {
-                get () {
-                    const value = this.internalValue;
-                    if (!value) return;
-                    const formatter = (
-                        TYPE_VALUE_RESOLVER_MAP[this.type] ||
-                        TYPE_VALUE_RESOLVER_MAP['default']
-                    ).formatter;
-                    const format = DEFAULT_FORMATS[this.type];
-
-                    return formatter(value, this.format || format);
-                },
-
-                set (value) {
-                    if (value) {
-                        const type = this.type;
-                        const parser = (
-                            TYPE_VALUE_RESOLVER_MAP[type] ||
-                            TYPE_VALUE_RESOLVER_MAP['default']
-                        ).parser;
-                        const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
-                        if (parsedValue) {
-                            if (this.picker) this.picker.value = parsedValue;
-                        }
-                        return;
-                    }
-                    if (this.picker) this.picker.value = value;
-                }
+            isConfirm(){
+                return this.confirm || this.type === 'datetime' || this.type === 'datetimerange';
             }
         },
         methods: {
+            onSelectionModeChange(type){
+
+                if (type.match(/^date/)) type = 'date';
+                this.selectionMode = type;
+                return type;
+            },
             // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
             handleTransferClick () {
                 if (this.transfer) this.disableCloseUnderTransfer = true;
@@ -287,7 +314,7 @@
                     return false;
                 }
                 if (this.open !== null) return;
-//                if (!this.disableClickOutSide) this.visible = false;
+
                 this.visible = false;
                 this.disableClickOutSide = false;
             },
@@ -300,87 +327,12 @@
             },
             handleInputChange (event) {
                 const oldValue = this.visualValue;
-                const value = event.target.value;
+                const newValue = event.target.value;
 
-                let correctValue = '';
-                let correctDate = '';
-                const type = this.type;
-                const format = this.format || DEFAULT_FORMATS[type];
-
-                if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
-                    const parser = (
-                        TYPE_VALUE_RESOLVER_MAP[type] ||
-                        TYPE_VALUE_RESOLVER_MAP['default']
-                    ).parser;
-
-                    const formatter = (
-                        TYPE_VALUE_RESOLVER_MAP[type] ||
-                        TYPE_VALUE_RESOLVER_MAP['default']
-                    ).formatter;
-
-                    const parsedValue = parser(value, format);
-
-                    if (parsedValue[0] instanceof Date && parsedValue[1] instanceof Date) {
-                        if (parsedValue[0].getTime() > parsedValue[1].getTime()) {
-                            correctValue = oldValue;
-                        } else {
-                            correctValue = formatter(parsedValue, format);
-                        }
-                        // todo 判断disabledDate
-                    } else {
-                        correctValue = oldValue;
-                    }
-
-                    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);
-
-                    if (parsedDate instanceof Date) {
-                        const options = this.options || false;
-                        if (options && options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) {
-                            correctValue = oldValue;
-                        } else {
-                            correctValue = formatDate(parsedDate, format);
-                        }
-                    } else if (!parsedDate) {
-                        correctValue = '';
-                    } else {
-                        correctValue = oldValue;
-                    }
-
-                    correctDate = parseDate(correctValue, format);
+                if (newValue !== oldValue) {
+                    this.emitChange();
+                    this.internalValue = this.formatDate(newValue);
                 }
-
-                this.visualValue = correctValue;
-                event.target.value = correctValue;
-                this.internalValue = correctDate;
-                this.currentValue = correctDate;
-
-                if (correctValue !== oldValue) this.emitChange(correctDate);
             },
             handleInputMouseenter () {
                 if (this.readonly || this.disabled) return;
@@ -400,146 +352,96 @@
             },
             handleClear () {
                 this.visible = false;
-                this.internalValue = '';
-                this.currentValue = '';
+                this.internalValue = this.internalValue.map(() => null);
                 this.$emit('on-clear');
                 this.dispatch('FormItem', 'on-form-change', '');
-                // #2215，当初始设置了 value，直接点 clear，这时 this.picker 还没有加载
-                if (!this.picker) {
-                    this.emitChange('');
-                }
+                this.emitChange();
+
+                setTimeout(
+                    () => this.onSelectionModeChange(this.type),
+                    500 // delay to improve dropdown close visual effect
+                );
             },
-            showPicker () {
-                if (!this.picker) {
-                    let isConfirm = this.confirm;
-                    const type = this.type;
-
-                    this.picker = this.Panel.$mount(this.$refs.picker);
-                    if (type === 'datetime' || type === 'datetimerange') {
-                        isConfirm = true;
-                        this.picker.showTime = true;
-                    }
-                    this.picker.value = this.internalValue;
-                    this.picker.confirm = isConfirm;
-                    this.picker.selectionMode = this.selectionMode;
-                    if (this.format) this.picker.format = this.format;
-
-                    // TimePicker
-                    if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
-                    if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
-                    if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
-                    if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
-
-                    const options = this.options;
-                    for (const option in options) {
-                        this.picker[option] = options[option];
-                    }
-
-                    this.picker.$on('on-pick', (date, visible = false) => {
-                        if (!isConfirm) this.visible = visible;
-                        this.currentValue = date;
-                        this.picker.value = date;
-                        this.picker.resetView && this.picker.resetView();
-                        this.emitChange(date);
-                    });
-
-                    this.picker.$on('on-pick-clear', () => {
-                        this.handleClear();
-                    });
-                    this.picker.$on('on-pick-success', () => {
-                        this.visible = false;
-                        this.$emit('on-ok');
-                    });
-                    this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
-                }
-                if (this.internalValue instanceof Date) {
-                    this.picker.date = new Date(this.internalValue.getTime());
-                } else {
-                    this.picker.value = this.internalValue;
-                }
-                this.picker.resetView && this.picker.resetView();
-            },
-            emitChange (date) {
-                const newDate = this.formattingDate(date);
-
-                this.$emit('on-change', newDate);
+            emitChange () {
+                this.$emit('on-change', this.publicValue);
                 this.$nextTick(() => {
-                    this.dispatch('FormItem', 'on-form-change', newDate);
+                    this.dispatch('FormItem', 'on-form-change', this.publicValue);
                 });
             },
-            formattingDate (date) {
+            formatDate (val) {
+                const isRange = this.type.includes('range');
+
                 const type = this.type;
-                const format = this.format || DEFAULT_FORMATS[type];
-                const formatter = (
+                const parser = (
                     TYPE_VALUE_RESOLVER_MAP[type] ||
                     TYPE_VALUE_RESOLVER_MAP['default']
-                ).formatter;
+                ).parser;
 
-                let newDate = formatter(date, format);
-                if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
-                    newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
+                if (val && type === 'time' && !(val instanceof Date)) {
+                    val = parser(val, this.format || DEFAULT_FORMATS[type]);
+                } else if (type.match(/range$/)) {
+                    if (!val){
+                        val = [null, null];
+                    } else {
+                        val = val.map(date => new Date(date)); // try to parse
+                        val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
+                    }
+                } else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
+                    val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
                 }
-                return newDate;
+                return isRange ? val : [val];
+            },
+            onPick(dates, visible = false) {
+
+                if (this.type === 'multiple'){
+                    this.internalValue = [...this.internalValue, dates]; // TODO: filter multiple date duplicates
+                } else {
+                    this.internalValue = Array.isArray(dates) ? dates : [dates];
+                }
+
+                if (!this.isConfirm) this.onSelectionModeChange(this.type); // reset the selectionMode
+                if (!this.isConfirm) this.visible = visible;
+                this.emitChange();
+            },
+            onPickSuccess(){
+                this.visible = false;
+                this.$emit('on-ok');
             }
+
         },
         watch: {
-            visible (val) {
-                if (val) {
-                    this.showPicker();
-                    this.$refs.drop.update();
-                    if (this.open === null) this.$emit('on-open-change', true);
-                } else {
-                    if (this.picker) this.picker.resetView && this.picker.resetView(true);
+            visible (state) {
+                if (state === false){
                     this.$refs.drop.destroy();
-                    if (this.open === null) this.$emit('on-open-change', false);
-                    // blur the input
                     const input = this.$el.querySelector('input');
                     if (input) input.blur();
                 }
+                this.$emit('on-open-change', state);
             },
-            internalValue(val) {
-                if (!val && this.picker && typeof this.picker.handleClear === 'function') {
-                    this.picker.handleClear();
-                }
-//                this.$emit('input', val);
-            },
-            value (val) {
-                this.currentValue = val;
-            },
-            currentValue: {
-                immediate: true,
-                handler (val) {
-                    const type = this.type;
-                    const parser = (
-                        TYPE_VALUE_RESOLVER_MAP[type] ||
-                        TYPE_VALUE_RESOLVER_MAP['default']
-                    ).parser;
+            value(val) {
+                const type = this.type;
+                const parser = (
+                    TYPE_VALUE_RESOLVER_MAP[type] ||
+                    TYPE_VALUE_RESOLVER_MAP['default']
+                ).parser;
 
-                    if (val && type === 'time' && !(val instanceof Date)) {
-                        val = parser(val, this.format || DEFAULT_FORMATS[type]);
-                    } else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
-                        val = val.join(RANGE_SEPARATOR);
-                        val = parser(val, this.format || DEFAULT_FORMATS[type]);
-                    } else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
-                        val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
-                    }
-
-                    this.internalValue = val;
-                    this.$emit('input', val);
+                if (val && type === 'time' && !(val instanceof Date)) {
+                    val = parser(val, this.format || DEFAULT_FORMATS[type]);
+                } else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
+                    val = val.join(RANGE_SEPARATOR);
+                    val = parser(val, this.format || DEFAULT_FORMATS[type]);
+                } else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
+                    val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
                 }
+
+                this.internalValue = val;
+                this.$emit('input', val);
             },
             open (val) {
-                if (val === true) {
-                    this.visible = val;
-                    this.$emit('on-open-change', true);
-                } else if (val === false) {
-                    this.$emit('on-open-change', false);
-                }
-            }
-        },
-        beforeDestroy () {
-            if (this.picker) {
-                this.picker.$destroy();
+                this.visible = val === true;
+            },
+            type(type){
+                this.onSelectionModeChange(type);
             }
         },
         mounted () {
diff --git a/src/components/date-picker/picker/date-picker.js b/src/components/date-picker/picker/date-picker.js
index d759035a..c8419ed8 100644
--- a/src/components/date-picker/picker/date-picker.js
+++ b/src/components/date-picker/picker/date-picker.js
@@ -1,14 +1,6 @@
-import Vue from 'vue';
 import Picker from '../picker.vue';
-import DatePanel from '../panel/date.vue';
-import DateRangePanel from '../panel/date-range.vue';
-
-const getPanel = function (type) {
-    if (type === 'daterange' || type === 'datetimerange') {
-        return DateRangePanel;
-    }
-    return DatePanel;
-};
+import DatePickerPanel from '../panel/Date/date.vue';
+import RangeDatePickerPanel from '../panel/Date/date-range.vue';
 
 import { oneOf } from '../../../utils/assist';
 
@@ -21,19 +13,18 @@ export default {
             },
             default: 'date'
         },
-        value: {}
     },
-    watch: {
-        type(value){
-            const typeMap = {
-                year: 'year',
-                month: 'month',
-                date: 'day'
-            };
-            const validType = oneOf(value, Object.keys(typeMap));
-            if (validType) this.Panel.selectionMode = typeMap[value];
+    components: { DatePickerPanel, RangeDatePickerPanel },
+    computed: {
+        panel(){
+            const isRange =  this.type === 'daterange' || this.type === 'datetimerange';
+            return isRange ? 'RangeDatePickerPanel' : 'DatePickerPanel';
+        },
+        ownPickerProps(){
+            return {};
         }
     },
+/*
     created () {
         if (!this.currentValue) {
             if (this.type === 'daterange' || this.type === 'datetimerange') {
@@ -42,8 +33,6 @@ export default {
                 this.currentValue = '';
             }
         }
-
-        const panel = getPanel(this.type);
-        this.Panel = new Vue(panel);
     }
+*/
 };
diff --git a/src/components/date-picker/picker/time-picker.js b/src/components/date-picker/picker/time-picker.js
index f659dd76..fcc60c0b 100644
--- a/src/components/date-picker/picker/time-picker.js
+++ b/src/components/date-picker/picker/time-picker.js
@@ -1,20 +1,13 @@
-import Vue from 'vue';
 import Picker from '../picker.vue';
-import TimePanel from '../panel/time.vue';
-import TimeRangePanel from '../panel/time-range.vue';
+import TimePickerPanel from '../panel/Time/time.vue';
+import RangeTimePickerPanel from '../panel/Time/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],
+    components: { TimePickerPanel, RangeTimePickerPanel },
     props: {
         type: {
             validator (value) {
@@ -22,25 +15,19 @@ export default {
             },
             default: 'time'
         },
-        steps: {
-            type: Array,
-            default: () => []
-        },
-        value: {}
     },
-    created () {
-        if (!this.currentValue) {
-            if (this.type === 'timerange') {
-                this.currentValue = ['',''];
-            } else {
-                this.currentValue = '';
-            }
+    computed: {
+        panel(){
+            const isRange =  this.type === 'timerange';
+            return isRange ? 'RangeTimePickerPanel' : 'TimePickerPanel';
+        },
+        ownPickerProps(){
+            return {
+                ...this.disabledHours,
+                ...this.disabledMinutes,
+                ...this.disabledSeconds,
+                ...this.hideDisabledOptions,
+            };
         }
-        const Panel = Vue.extend(getPanel(this.type));
-        this.Panel = new Panel({
-            propsData: {
-                steps: this.steps
-            }
-        });
-    }
+    },
 };

From d07b4f3301af0a9957493aa774313ba8dc4436c9 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 09:41:34 +0100
Subject: [PATCH 06/48] fix logic for multiple picker

---
 src/components/date-picker/picker.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 52c39b41..17982a34 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -265,8 +265,12 @@
         },
         computed: {
             publicValue(){
-                const isRange = this.type.includes('range');
-                return isRange ? this.formatDate(this.internalValue) : this.formatDate(this.internalValue[0]);
+                if (this.multiple){
+                    return this.internalValue.map(date => this.formatDate(date));
+                } else {
+                    const isRange = this.type.includes('range');
+                    return isRange ? this.formatDate(this.internalValue) : this.formatDate(this.internalValue[0]);
+                }
             },
 
             opened () {
@@ -284,8 +288,10 @@
             },
             visualValue() {
                 const value = this.internalValue;
-
                 if (!value) return;
+
+                if (this.multiple) return value.map(date => this.formatDate(date)).join(', ');
+
                 const formatter = (
                     TYPE_VALUE_RESOLVER_MAP[this.type] ||
                     TYPE_VALUE_RESOLVER_MAP['default']
@@ -294,7 +300,7 @@
                 return formatter(value, this.format || format);
             },
             isConfirm(){
-                return this.confirm || this.type === 'datetime' || this.type === 'datetimerange';
+                return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
             }
         },
         methods: {
@@ -393,8 +399,10 @@
             },
             onPick(dates, visible = false) {
 
-                if (this.type === 'multiple'){
-                    this.internalValue = [...this.internalValue, dates]; // TODO: filter multiple date duplicates
+                if (this.multiple){
+                    const allDates = [...this.internalValue, dates].filter(Boolean);
+                    const timeStamps = allDates.map(date => date.getTime()).filter((ts, i, arr) => arr.indexOf(ts) === i); // filter away duplicates
+                    this.internalValue = timeStamps.map(ts => new Date(ts));
                 } else {
                     this.internalValue = Array.isArray(dates) ? dates : [dates];
                 }

From 4c6836512ee758149394fc40dddb16a6bacd79c4 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 09:42:31 +0100
Subject: [PATCH 07/48] improve dev examples

---
 examples/routers/date.vue | 188 +++++++++++++++++++++-----------------
 1 file changed, 102 insertions(+), 86 deletions(-)

diff --git a/examples/routers/date.vue b/examples/routers/date.vue
index 555dbf86..37b36270 100644
--- a/examples/routers/date.vue
+++ b/examples/routers/date.vue
@@ -1,43 +1,45 @@
-<!--<template>-->
-    <!--<div>-->
-        <!--{{ value1 }}-->
-        <!--<Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>-->
-        <!--<Button @click="setDate">set date</Button>-->
-        <!--<Button @click="getDate">get date</Button>-->
-        <!--&lt;!&ndash;<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>&ndash;&gt;-->
-        <!--&lt;!&ndash;<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>&ndash;&gt;-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],-->
-                <!--value2: []-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--changeDate(date){-->
-                <!--console.log(date);-->
-            <!--},-->
-            <!--setDate () {-->
-                <!--this.value1 = ['2016-10-10', '2017-10-10'];-->
-            <!--},-->
-            <!--getDate () {-->
-                <!--const date = new Date(this.value1);-->
-                <!--console.log(date.getMonth()+1)-->
-            <!--},-->
-            <!--hc (d) {-->
-                <!--console.log(d);-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-<!--<style>-->
-    <!--body{-->
-        <!--width: 100%;-->
-    <!--}-->
-<!--</style>-->
+<!--
+<template>
+    <div>
+        {{ value1 }}
+        <Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>
+        <Button @click="setDate">set date</Button>
+        <Button @click="getDate">get date</Button>
+        &lt;!&ndash;<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>&ndash;&gt;
+        &lt;!&ndash;<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>&ndash;&gt;
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],
+                value2: []
+            }
+        },
+        methods: {
+            changeDate(date){
+                console.log(date);
+            },
+            setDate () {
+                this.value1 = ['2016-10-10', '2017-10-10'];
+            },
+            getDate () {
+                const date = new Date(this.value1);
+                console.log(date.getMonth()+1)
+            },
+            hc (d) {
+                console.log(d);
+            }
+        }
+    }
+</script>
+<style>
+    body{
+        width: 100%;
+    }
+</style>
+-->
 
 
 <!--<template>-->
@@ -148,22 +150,47 @@
 <!--</script>-->
 
 
-<!--<template>-->
-    <!--<div>-->
-        <!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->
-        <!--<br>-->
-        <!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->
-        <!--<br>-->
-        <!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->
-        <!--<br>-->
-        <!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-
-    <!--}-->
-<!--</script>-->
+<template>
+    <div>
+        <div style="width: 50%; float: left;">
+            <Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date
+            <br>
+            <Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date
+            <br>
+            <Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date
+            <br>
+            <Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object
+            <br>
+            <Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm
+            <br>
+            <Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple
+            <br>
+            <Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm
+            <br>
+        </div>
+        <div style="width: 50%; float: right;">
+            <Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects
+            <br>
+            <Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates
+            <br>
+            <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm
+        </div>
+        <div style="width: 50%; float: right;">
+            <TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data(){
+            return {
+                dateString: '2018-01-03 20:52:59',
+                singleDate: new Date(1978, 4, 10),
+                dateRange: [new Date(2010, 0, 1), new Date()]
+            }
+        }
+    }
+</script>
 
 
 <!--<template>-->
@@ -189,33 +216,22 @@
 
 
 
-<template>
-    <div>
-        <DatePicker v-model="value" @on-change="handleChange" type="datetimerange" placeholder="Select date" style="width: 400px"></DatePicker>
-        <DatePicker v-model="value2" type="datetime" @on-change="handleChange" style="width: 200px"></DatePicker>
-        <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
-        {{ value }}
-        <br>
-        {{ value2 }}
-        <br><br>
-        <DatePicker type="year" v-model="value3" placeholder="Select year" style="width: 200px"></DatePicker>
-        <DatePicker type="month" v-model="value4" placeholder="Select month" style="width: 200px"></DatePicker>
-    </div>
-</template>
-<script>
-    export default {
-        data () {
-            return {
-                value: ['2018-03-05 10:00:00', '2018-05-15 10:01:00'],
-                value2: '2018-02-05 10:09:00',
-                value3: '1978',
-                value4: '1978-05'
-            }
-        },
-        methods: {
-            handleChange (v) {
-                console.log(v);
-            }
-        }
-    }
-</script>
+<!--<template>-->
+    <!--<div>-->
+        <!--<DatePicker v-model="value" @on-change="handleChange" type="daterange" placeholder="Select date" style="width: 200px"></DatePicker>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--value: []-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--handleChange (v) {-->
+                <!--console.log(v);-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->

From 63bd0f7d3fda0cb15a6f83705f8c71ed2c7108f1 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 17 Jan 2018 13:05:15 +0100
Subject: [PATCH 08/48] Add start-date prop to force placing of date picker in
 date

---
 src/components/date-picker/panel/Date/date-panel-mixin.js | 3 +++
 src/components/date-picker/panel/Date/date-range.vue      | 6 ++++--
 src/components/date-picker/panel/Date/date.vue            | 2 +-
 src/components/date-picker/picker.vue                     | 4 ++++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js
index 3c4ec99c..8050cede 100644
--- a/src/components/date-picker/panel/Date/date-panel-mixin.js
+++ b/src/components/date-picker/panel/Date/date-panel-mixin.js
@@ -35,6 +35,9 @@ export default {
         value: {
             type: Array,
             default: () => [initTimeDate(), initTimeDate()]
+        },
+        startDate: {
+            type: Date
         }
     },
     computed: {
diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index f0225d3f..8e7a8840 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -129,14 +129,16 @@
         },
         data(){
             const [minDate, maxDate] = this.value.map(date => date || initTimeDate());
+            const leftPanelDate = this.startDate ? this.startDate : minDate;
+
             return {
                 prefixCls: prefixCls,
                 datePrefixCls: datePrefixCls,
                 dates: this.value,
                 rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
                 currentView: this.selectionMode || 'range',
-                leftPanelDate: minDate,
-                rightPanelDate: new Date(minDate.getFullYear(), minDate.getMonth() + 1, minDate.getDate())
+                leftPanelDate: leftPanelDate,
+                rightPanelDate: new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate())
             };
         },
         computed: {
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index 052ce87b..adec411f 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -97,7 +97,7 @@
                 datePrefixCls: datePrefixCls,
                 currentView: this.selectionMode || 'date',
                 dates: dates,
-                panelDate: dates[0] || new Date()
+                panelDate: this.startDate || dates[0] || new Date()
             };
         },
         computed: {
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 17982a34..67566efc 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -39,6 +39,7 @@
                         :steps="steps"
                         :format="format"
                         :value="internalValue"
+                        :start-date="startDate"
 
                         v-bind="ownPickerProps"
 
@@ -204,6 +205,9 @@
                 type: Boolean,
                 default: false
             },
+            startDate: {
+                type: Date
+            },
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);

From 435bf7814a6ad6aab47a357ceae8cd28480fbb57 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 17 Jan 2018 13:23:10 +0100
Subject: [PATCH 09/48] add split panel props

---
 src/components/date-picker/panel/Date/date-range.vue | 10 +++++++++-
 src/components/date-picker/picker.vue                |  5 +++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 8e7a8840..aab7c3e8 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -21,9 +21,11 @@
                         :current-view="currentView"
                         :date-prefix-cls="datePrefixCls"></date-panel-label>
                     <span
+                        v-if="splitPanels"
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
                     <span
+                        v-if="splitPanels"
                         :class="iconBtnCls('next')"
                         @click="nextMonth('left')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
@@ -45,9 +47,11 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
                 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
                     <span
+                        v-if="splitPanels"
                         :class="iconBtnCls('prev', '-double')"
                         @click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
                     <span
+                        v-if="splitPanels"
                         :class="iconBtnCls('prev')"
                         @click="prevMonth('right')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
@@ -125,7 +129,11 @@
         mixins: [ Mixin, Locale, DateMixin ],
         components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
         props: {
-            // in the mixin
+            // more props in the mixin
+            splitPanels: {
+                type: Boolean,
+                default: false
+            },
         },
         data(){
             const [minDate, maxDate] = this.value.map(date => date || initTimeDate());
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 67566efc..d53f27b1 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -40,6 +40,7 @@
                         :format="format"
                         :value="internalValue"
                         :start-date="startDate"
+                        :split-panels="splitPanels"
 
                         v-bind="ownPickerProps"
 
@@ -205,6 +206,10 @@
                 type: Boolean,
                 default: false
             },
+            splitPanels: {
+                type: Boolean,
+                default: false
+            },
             startDate: {
                 type: Date
             },

From ac231c9ab497b034de5d90c063353a74872eeead Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 17 Jan 2018 13:23:20 +0100
Subject: [PATCH 10/48] examples

---
 examples/routers/date.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/examples/routers/date.vue b/examples/routers/date.vue
index 37b36270..39ba84c6 100644
--- a/examples/routers/date.vue
+++ b/examples/routers/date.vue
@@ -167,12 +167,17 @@
             <br>
             <Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm
             <br>
+            <Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date
+            <br>
+
         </div>
         <div style="width: 50%; float: right;">
             <Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects
             <br>
             <Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates
             <br>
+            <Date-picker type="daterange" split-panels placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates, split panels
+            <br>
             <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm
         </div>
         <div style="width: 50%; float: right;">
@@ -183,10 +188,14 @@
 <script>
     export default {
         data(){
+            const now = new Date().getTime();
+            const oneMonth = 2592e6;
             return {
                 dateString: '2018-01-03 20:52:59',
                 singleDate: new Date(1978, 4, 10),
-                dateRange: [new Date(2010, 0, 1), new Date()]
+                dateRange: [new Date(2010, 4, 1), new Date()],
+                minDate: new Date(2010, 4, 1),
+                maxDate: new Date(now + oneMonth)
             }
         }
     }

From e55ba7a2490fa2d2586da3f534c6a6d708d8162d Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 17 Jan 2018 16:40:38 +0100
Subject: [PATCH 11/48] Add week numbers

---
 examples/routers/date.vue                     |  2 +
 .../date-picker/base/date-table.vue           | 99 +++++++------------
 .../panel/Date/date-panel-mixin.js            |  4 +
 .../date-picker/panel/Date/date-range.vue     |  2 +
 .../date-picker/panel/Date/date.vue           |  1 +
 src/components/date-picker/picker.vue         | 12 ++-
 src/styles/components/date-picker.less        | 16 ++-
 7 files changed, 65 insertions(+), 71 deletions(-)

diff --git a/examples/routers/date.vue b/examples/routers/date.vue
index 39ba84c6..1131d793 100644
--- a/examples/routers/date.vue
+++ b/examples/routers/date.vue
@@ -165,6 +165,8 @@
             <br>
             <Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple
             <br>
+            <Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers
+            <br>
             <Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm
             <br>
             <Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date
diff --git a/src/components/date-picker/base/date-table.vue b/src/components/date-picker/base/date-table.vue
index 12fbb2b6..4658d700 100644
--- a/src/components/date-picker/base/date-table.vue
+++ b/src/components/date-picker/base/date-table.vue
@@ -7,18 +7,19 @@
         </div>
         <span
                 :class="getCellCls(cell)"
-                v-for="cell in readCells"
+                v-for="(cell, i) in readCells"
+                :key="String(cell.date) + i"
                 @click="handleClick(cell)"
                 @mouseenter="handleMouseMove(cell)"
         >
-            <em>{{ cell.text }}</em>
+            <em>{{ cell.desc }}</em>
         </span>
     </div>
 </template>
 <script>
-    import { getFirstDayOfMonth, getDayCountOfMonth, clearHours, isInRange } from '../util';
-    import { deepCopy } from '../../../utils/assist';
+    import { clearHours, isInRange } from '../util';
     import Locale from '../../../mixins/locale';
+    import jsCalendar from 'js-calendar';
 
     import mixin from './mixin';
     import prefixCls from './prefixCls';
@@ -29,16 +30,25 @@
 
         props: {
             /* more props in mixin */
+            showWeekNumbers: {
+                type: Boolean,
+                default: false
+            },
         },
         data () {
+            const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
             return {
                 prefixCls: prefixCls,
+                calendar: new jsCalendar.Generator({onlyDays: !this.showWeekNumbers, weekStart: weekStartDay})
             };
         },
         computed: {
             classes () {
                 return [
-                    `${prefixCls}`
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
+                    }
                 ];
             },
             headerDays () {
@@ -47,76 +57,32 @@
                     return this.t('i.datepicker.weeks.' + item);
                 });
                 const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
-                return weekDays;
+                return this.showWeekNumbers ? [''].concat(weekDays) : weekDays;
             },
             readCells () {
                 const tableYear = this.tableDate.getFullYear();
                 const tableMonth = this.tableDate.getMonth();
-                const date = new Date(tableYear, tableMonth, 1);
-                const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
-                const day = (getFirstDayOfMonth(date) || 7) - weekStartDay; // day of first day
                 const today = clearHours(new Date());    // timestamp of today
                 const selectedDays = this.dates.filter(Boolean).map(clearHours);    // timestamp of selected days
                 const [minDay, maxDay] = this.dates.map(clearHours);
                 const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
                 const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
 
-                const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
-                const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
+                const isRange = this.selectionMode === 'range';
+                const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate;
 
-                const disabledDate = this.disabledDate;
-
-                let cells = [];
-                const cell_tmpl = {
-                    text: '',
-                    type: '',
-                    date: null,
-                    selected: false,
-                    disabled: false,
-                    range: false,
-                    start: false,
-                    end: false
-                };
-                if (day !== 7) {
-                    for (let i = 0; i < day; i++) {
-                        const cell = deepCopy(cell_tmpl);
-                        cell.type = 'prev-month';
-                        cell.text = dateCountOfLastMonth - (day - 1) + i;
-                        cell.date = new Date(tableYear, tableMonth - 1, cell.text);
-                        const time = clearHours(cell.date);
-                        cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
-                        cells.push(cell);
-                    }
-                }
-
-                for (let i = 1; i <= dateCountOfMonth; i++) {
-                    const cell = deepCopy(cell_tmpl);
-                    cell.text = i;
-                    cell.date = new Date(tableYear, tableMonth, cell.text);
-                    const time = clearHours(cell.date);
-                    cell.type = time === today ? 'today' : 'normal';
-                    cell.selected = selectedDays.includes(time);
-                    cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
-                    if (this.selectionMode === 'range'){
-                        cell.range = isInRange(time, rangeStart, rangeEnd);
-                        cell.start = time === minDay;
-                        cell.end = time === maxDay;
-                    }
-                    cells.push(cell);
-                }
-
-                const nextMonthCount = 42 - cells.length;
-                for (let i = 1; i <= nextMonthCount; i++) {
-                    const cell = deepCopy(cell_tmpl);
-                    cell.type = 'next-month';
-                    cell.text = i;
-                    cell.date = new Date(tableYear, tableMonth + 1, cell.text);
-                    const time = clearHours(cell.date);
-                    cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
-                    cells.push(cell);
-                }
-
-                return cells;
+                return this.calendar(tableYear, tableMonth, (cell) => {
+                    const time = cell.date && clearHours(cell.date);
+                    return {
+                        ...cell,
+                        type: time === today ? 'today' : cell.type,
+                        selected: selectedDays.includes(time),
+                        disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
+                        range: isRange && isInRange(time, rangeStart, rangeEnd),
+                        start: isRange && time === minDay,
+                        end: isRange && time === maxDay
+                    };
+                }).cells.slice(8);
             }
         },
         methods: {
@@ -127,8 +93,9 @@
                         [`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
                         [`${prefixCls}-cell-disabled`]: cell.disabled,
                         [`${prefixCls}-cell-today`]: cell.type === 'today',
-                        [`${prefixCls}-cell-prev-month`]: cell.type === 'prev-month',
-                        [`${prefixCls}-cell-next-month`]: cell.type === 'next-month',
+                        [`${prefixCls}-cell-prev-month`]: cell.type === 'prevMonth',
+                        [`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
+                        [`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',
                         [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
                     }
                 ];
diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js
index 8050cede..b56a5131 100644
--- a/src/components/date-picker/panel/Date/date-panel-mixin.js
+++ b/src/components/date-picker/panel/Date/date-panel-mixin.js
@@ -36,6 +36,10 @@ export default {
             type: Array,
             default: () => [initTimeDate(), initTimeDate()]
         },
+        showWeekNumbers: {
+            type: Boolean,
+            default: false
+        },
         startDate: {
             type: Date
         }
diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index aab7c3e8..7b23b3cf 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -38,6 +38,7 @@
                     selection-mode="range"
                     :disabled-date="disabledDate"
                     :range-state="rangeState"
+                    :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     @on-change-range="handleChangeRange"
                     @on-pick="handleRangePick"
@@ -75,6 +76,7 @@
                     selection-mode="range"
                     :range-state="rangeState"
                     :disabled-date="disabledDate"
+                    :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     @on-change-range="handleChangeRange"
                     @on-pick="handleRangePick"
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index adec411f..d12fec22 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -33,6 +33,7 @@
                     ref="pickerTable"
                     v-if="currentView !== 'time'"
                     :table-date="panelDate"
+                    :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     :selection-mode="selectionMode"
                     :disabled-date="disabledDate"
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index d53f27b1..7a779590 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -17,7 +17,9 @@
                     @on-click="handleIconClick"
                     @mouseenter.native="handleInputMouseenter"
                     @mouseleave.native="handleInputMouseleave"
-                    :icon="iconType"></i-input>
+
+                    :icon="iconType"
+                ></i-input>
             </slot>
         </div>
         <transition :name="transition">
@@ -41,6 +43,7 @@
                         :value="internalValue"
                         :start-date="startDate"
                         :split-panels="splitPanels"
+                        :show-week-numbers="showWeekNumbers"
 
                         v-bind="ownPickerProps"
 
@@ -210,6 +213,10 @@
                 type: Boolean,
                 default: false
             },
+            showWeekNumbers: {
+                type: Boolean,
+                default: false
+            },
             startDate: {
                 type: Date
             },
@@ -423,8 +430,7 @@
             onPickSuccess(){
                 this.visible = false;
                 this.$emit('on-ok');
-            }
-
+            },
         },
         watch: {
             visible (state) {
diff --git a/src/styles/components/date-picker.less b/src/styles/components/date-picker.less
index eb1a66f3..668ee3f2 100644
--- a/src/styles/components/date-picker.less
+++ b/src/styles/components/date-picker.less
@@ -2,6 +2,7 @@
 @picker-prefix-cls: ~"@{css-prefix}picker";
 
 @date-picker-cells-width: 196px;
+@date-picker-cells-width-with-weeknumbers: 226px;
 
 .@{date-picker-prefix-cls} {
     //position: relative;
@@ -64,15 +65,17 @@
                     }
                 }
             }
-            span&-disabled,span&-disabled:hover{
+            span&-week-label,span&-week-label:hover,span&-disabled,span&-disabled:hover{
                 cursor: @cursor-disabled;
-                background: @btn-disable-bg;
                 color: @btn-disable-color;
                 em{
                     color: inherit;
                     background: inherit;
                 }
             }
+            span&-disabled,span&-disabled:hover{
+                background: @btn-disable-bg;
+            }
             &-today{
                 em {
                     position: relative;
@@ -132,6 +135,10 @@
         }
     }
 
+    &-cells-show-week-numbers {
+        width: @date-picker-cells-width-with-weeknumbers;
+    }
+
     &-cells-year,&-cells-month{
         margin-top: 14px;
         span{
@@ -190,7 +197,12 @@
                 float: left;
             }
         }
+        .@{picker-prefix-cls}-cells-show-week-numbers {
+            min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
+        }
+
     }
+
     &-transfer{
         z-index: @zindex-transfer;
         max-height: none;

From 4ec8bc8af8d35f5a1c8727ff782830a8862d22cc Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 10:30:20 +0100
Subject: [PATCH 12/48] Fix month picker value

---
 src/components/date-picker/panel/Date/date.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index d12fec22..cd22f576 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -151,9 +151,9 @@
                 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);
+                const {selectionMode, panelDate} = this;
+                if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1);
+                else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
                 else value = new Date(value);
 
                 this.$emit('on-pick', value);

From 8f6aeda4be082f94b858117ad747858226cdc126 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 10:30:40 +0100
Subject: [PATCH 13/48] Fix parser and formater

---
 src/components/date-picker/picker.vue | 57 +++++++++++----------------
 1 file changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 7a779590..8d968d38 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -267,13 +267,11 @@
             }
         },
         data(){
-            const initialValue = this.formatDate(this.value);
-
             return {
                 prefixCls: prefixCls,
                 showClose: false,
                 visible: false,
-                internalValue: initialValue,
+                internalValue: this.parseDate(this.value),
                 disableClickOutSide: false,    // fixed when click a date,trigger clickoutside to close picker
                 disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭,
                 selectionMode: this.onSelectionModeChange(this.type)
@@ -282,10 +280,11 @@
         computed: {
             publicValue(){
                 if (this.multiple){
-                    return this.internalValue.map(date => this.formatDate(date));
+                    return this.internalValue.slice();
                 } else {
                     const isRange = this.type.includes('range');
-                    return isRange ? this.formatDate(this.internalValue) : this.formatDate(this.internalValue[0]);
+                    const val = this.internalValue.map(date => date instanceof Date ? new Date(date) : date);
+                    return (isRange || this.multiple) ? val : val[0];
                 }
             },
 
@@ -307,13 +306,7 @@
                 if (!value) return;
 
                 if (this.multiple) return value.map(date => this.formatDate(date)).join(', ');
-
-                const formatter = (
-                    TYPE_VALUE_RESOLVER_MAP[this.type] ||
-                    TYPE_VALUE_RESOLVER_MAP['default']
-                ).formatter;
-                const format = DEFAULT_FORMATS[this.type];
-                return formatter(value, this.format || format);
+                return this.formatDate(value);
             },
             isConfirm(){
                 return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
@@ -353,7 +346,7 @@
 
                 if (newValue !== oldValue) {
                     this.emitChange();
-                    this.internalValue = this.formatDate(newValue);
+                    this.internalValue = this.parseDate(newValue);
                 }
             },
             handleInputMouseenter () {
@@ -390,9 +383,8 @@
                     this.dispatch('FormItem', 'on-form-change', this.publicValue);
                 });
             },
-            formatDate (val) {
+            parseDate(val) {
                 const isRange = this.type.includes('range');
-
                 const type = this.type;
                 const parser = (
                     TYPE_VALUE_RESOLVER_MAP[type] ||
@@ -408,11 +400,20 @@
                         val = val.map(date => new Date(date)); // try to parse
                         val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
                     }
-                } else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
+                } else if (typeof val === 'string' && type.indexOf('time') !== 0){
                     val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
                 }
+
                 return isRange ? val : [val];
             },
+            formatDate(value){
+                const {formatter} = (
+                    TYPE_VALUE_RESOLVER_MAP[this.type] ||
+                    TYPE_VALUE_RESOLVER_MAP['default']
+                );
+                const format = DEFAULT_FORMATS[this.type];
+                return formatter(value, this.format || format);
+            },
             onPick(dates, visible = false) {
 
                 if (this.multiple){
@@ -442,30 +443,20 @@
                 this.$emit('on-open-change', state);
             },
             value(val) {
-                const type = this.type;
-                const parser = (
-                    TYPE_VALUE_RESOLVER_MAP[type] ||
-                    TYPE_VALUE_RESOLVER_MAP['default']
-                ).parser;
+                this.internalValue = this.parseDate(val);
 
-                if (val && type === 'time' && !(val instanceof Date)) {
-                    val = parser(val, this.format || DEFAULT_FORMATS[type]);
-                } else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
-                    val = val.join(RANGE_SEPARATOR);
-                    val = parser(val, this.format || DEFAULT_FORMATS[type]);
-                } else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
-                    val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
-                }
-
-                this.internalValue = val;
-                this.$emit('input', val);
             },
             open (val) {
                 this.visible = val === true;
             },
             type(type){
                 this.onSelectionModeChange(type);
-            }
+            },
+            publicValue(now, before){
+                const newValue = JSON.stringify(now);
+                const oldValue = JSON.stringify(before);
+                if (newValue !== oldValue) this.$emit('input', now); // to update v-model
+            },
         },
         mounted () {
             if (this.open !== null) this.visible = this.open;

From 77e43f2b871102554600b0d0a231be4647a703e3 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 10:59:44 +0100
Subject: [PATCH 14/48] Correct year date navigation logic

---
 .../date-picker/panel/Date/date-range.vue     | 44 ++++++++++++-------
 .../date-picker/panel/Date/date.vue           |  6 ++-
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 7b23b3cf..0e6300c2 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -218,30 +218,44 @@
                     labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
                 };
             },
-            prevYear (direction) {
-                this.changePanelDate(direction, 'FullYear', -1);
+            prevYear (panel) {
+                console.log(this)
+                const increment = this.currentView === 'year' ? -10 : -1;
+                this.changePanelDate(panel, 'FullYear', increment);
             },
-            nextYear (direction) {
-                this.changePanelDate(direction, 'FullYear', 1);
+            nextYear (panel) {
+                const increment = this.currentView === 'year' ? 10 : 1;
+                this.changePanelDate(panel, 'FullYear', increment);
             },
-            prevMonth(direction){
-                this.changePanelDate(direction, 'Month', -1);
+            prevMonth(panel){
+                this.changePanelDate(panel, 'Month', -1);
             },
-            nextMonth(direction){
-                this.changePanelDate(direction, 'Month', 1);
+            nextMonth(panel){
+                this.changePanelDate(panel, 'Month', 1);
             },
             changePanelDate(panel, type, increment){
                 const current = new Date(this[`${panel}PanelDate`]);
                 current[`set${type}`](current[`get${type}`]() + increment);
                 this[`${panel}PanelDate`] = current;
 
-                // change other panels if they overlap
-                const otherPanel = panel === 'left' ? 'right' : 'left';
-                if (panel === 'left' && this.leftPanelDate >= this.rightPanelDate){
-                    this.changePanelDate(otherPanel, type, 1);
-                }
-                if (panel === 'right' && this.rightPanelDate <= this.leftPanelDate){
-                    this.changePanelDate(otherPanel, type, -1);
+
+                if (this.splitPanels){
+                    // change other panel if dates overlap
+                    const otherPanel = panel === 'left' ? 'right' : 'left';
+                    if (panel === 'left' && this.leftPanelDate >= this.rightPanelDate){
+                        this.changePanelDate(otherPanel, type, 1);
+                    }
+                    if (panel === 'right' && this.rightPanelDate <= this.leftPanelDate){
+                        this.changePanelDate(otherPanel, type, -1);
+                    }
+                } else {
+                    // keep the panels together
+                    const otherPanel = panel === 'left' ? 'right' : 'left';
+                    const otherCurrent = new Date(this[`${otherPanel}PanelDate`]);
+                    otherCurrent[`set${type}`](otherCurrent[`get${type}`]() + increment);
+                    if (current[`get${type}`]() !== otherCurrent[`get${type}`]()){
+                        this[`${otherPanel}PanelDate`] = otherCurrent;
+                    }
                 }
             },
             showYearPicker () {
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index cd22f576..118799d4 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -145,7 +145,11 @@
         },
         methods: {
             changeYear(dir){
-                this.panelDate = siblingMonth(this.panelDate, dir * 12);
+                if (this.selectionMode === 'year'){
+                    this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
+                } else {
+                    this.panelDate = siblingMonth(this.panelDate, dir * 12);
+                }
             },
             changeMonth(dir){
                 this.panelDate = siblingMonth(this.panelDate, dir);

From 4863a75d921275e5c35f09777d55335ac610aabb Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 13:11:38 +0100
Subject: [PATCH 15/48] Correct logic when manually inputing disabledDates

---
 src/components/date-picker/picker.vue         | 27 ++++++++++++++-----
 .../date-picker/picker/date-picker.js         | 13 +--------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 8d968d38..d194afd2 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -3,6 +3,7 @@
         <div ref="reference" :class="[prefixCls + '-rel']">
             <slot>
                 <i-input
+                    :key="forceInputRerender"
                     :element-id="elementId"
                     :class="[prefixCls + '-editor']"
                     :readonly="!editable || readonly"
@@ -264,6 +265,10 @@
                         return val === '' || val === null || !isNaN(date.getTime());
                     }
                 }
+            },
+            options: {
+                type: Object,
+                default: () => ({})
             }
         },
         data(){
@@ -274,7 +279,8 @@
                 internalValue: this.parseDate(this.value),
                 disableClickOutSide: false,    // fixed when click a date,trigger clickoutside to close picker
                 disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭,
-                selectionMode: this.onSelectionModeChange(this.type)
+                selectionMode: this.onSelectionModeChange(this.type),
+                forceInputRerender: 1
             };
         },
         computed: {
@@ -287,7 +293,6 @@
                     return (isRange || this.multiple) ? val : val[0];
                 }
             },
-
             opened () {
                 return this.open === null ? this.visible : this.open;
             },
@@ -341,12 +346,21 @@
                 this.visible = false;
             },
             handleInputChange (event) {
+                const isArrayValue = this.type.includes('range') || this.multiple;
                 const oldValue = this.visualValue;
                 const newValue = event.target.value;
+                const newDate = this.parseDate(newValue);
+                const disabledDateFn =
+                    this.options &&
+                    typeof this.options.disabledDate === 'function' &&
+                    this.options.disabledDate;
+                const valueToTest = isArrayValue ? newDate : newDate[0];
 
-                if (newValue !== oldValue) {
+                if (newValue !== oldValue && !disabledDateFn(valueToTest)) {
                     this.emitChange();
-                    this.internalValue = this.parseDate(newValue);
+                    this.internalValue = newDate;
+                } else {
+                    this.forceInputRerender++;
                 }
             },
             handleInputMouseenter () {
@@ -393,7 +407,7 @@
 
                 if (val && type === 'time' && !(val instanceof Date)) {
                     val = parser(val, this.format || DEFAULT_FORMATS[type]);
-                } else if (type.match(/range$/)) {
+                } else if (isRange) {
                     if (!val){
                         val = [null, null];
                     } else {
@@ -403,8 +417,7 @@
                 } else if (typeof val === 'string' && type.indexOf('time') !== 0){
                     val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
                 }
-
-                return isRange ? val : [val];
+                return (isRange || this.multiple) ? val : [val];
             },
             formatDate(value){
                 const {formatter} = (
diff --git a/src/components/date-picker/picker/date-picker.js b/src/components/date-picker/picker/date-picker.js
index c8419ed8..cd616276 100644
--- a/src/components/date-picker/picker/date-picker.js
+++ b/src/components/date-picker/picker/date-picker.js
@@ -21,18 +21,7 @@ export default {
             return isRange ? 'RangeDatePickerPanel' : 'DatePickerPanel';
         },
         ownPickerProps(){
-            return {};
+            return this.options;
         }
     },
-/*
-    created () {
-        if (!this.currentValue) {
-            if (this.type === 'daterange' || this.type === 'datetimerange') {
-                this.currentValue = ['',''];
-            } else {
-                this.currentValue = '';
-            }
-        }
-    }
-*/
 };

From 2fb29faeb11ac5db00d9b8edc6a4adacec3f67a6 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 18:52:28 +0100
Subject: [PATCH 16/48] export utilities and fix multiple dates bugs

---
 src/components/date-picker/picker.vue | 139 +++++---------------------
 src/components/date-picker/util.js    | 110 ++++++++++++++++++++
 2 files changed, 133 insertions(+), 116 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index d194afd2..a721dba6 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -67,112 +67,11 @@
     import clickoutside from '../../directives/clickoutside';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
-    import { formatDate, parseDate } from './util';
+    import { DEFAULT_FORMATS, TYPE_VALUE_RESOLVER_MAP } from './util';
     import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-date-picker';
 
-    const DEFAULT_FORMATS = {
-        date: 'yyyy-MM-dd',
-        month: 'yyyy-MM',
-        year: 'yyyy',
-        datetime: 'yyyy-MM-dd HH:mm:ss',
-        time: 'HH:mm:ss',
-        timerange: 'HH:mm:ss',
-        daterange: 'yyyy-MM-dd',
-        datetimerange: 'yyyy-MM-dd HH:mm:ss'
-    };
-
-    const RANGE_SEPARATOR = ' - ';
-
-    const DATE_FORMATTER = function(value, format) {
-        return formatDate(value, format);
-    };
-    const DATE_PARSER = function(text, format) {
-        return parseDate(text, format);
-    };
-    const RANGE_FORMATTER = function(value, format) {
-        if (Array.isArray(value) && value.length === 2) {
-            const start = value[0];
-            const end = value[1];
-
-            if (start && end) {
-                return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
-            }
-        }
-        return '';
-    };
-    const RANGE_PARSER = function(text, format) {
-        const array = text.split(RANGE_SEPARATOR);
-        if (array.length === 2) {
-            const range1 = array[0];
-            const range2 = array[1];
-
-            return [parseDate(range1, format), parseDate(range2, format)];
-        }
-        return [];
-    };
-
-    const TYPE_VALUE_RESOLVER_MAP = {
-        default: {
-            formatter(value) {
-                if (!value) return '';
-                return '' + value;
-            },
-            parser(text) {
-                if (text === undefined || text === '') return null;
-                return text;
-            }
-        },
-        date: {
-            formatter: DATE_FORMATTER,
-            parser: DATE_PARSER
-        },
-        datetime: {
-            formatter: DATE_FORMATTER,
-            parser: DATE_PARSER
-        },
-        daterange: {
-            formatter: RANGE_FORMATTER,
-            parser: RANGE_PARSER
-        },
-        datetimerange: {
-            formatter: RANGE_FORMATTER,
-            parser: RANGE_PARSER
-        },
-        timerange: {
-            formatter: RANGE_FORMATTER,
-            parser: RANGE_PARSER
-        },
-        time: {
-            formatter: DATE_FORMATTER,
-            parser: DATE_PARSER
-        },
-        month: {
-            formatter: DATE_FORMATTER,
-            parser: DATE_PARSER
-        },
-        year: {
-            formatter: DATE_FORMATTER,
-            parser: DATE_PARSER
-        },
-        number: {
-            formatter(value) {
-                if (!value) return '';
-                return '' + value;
-            },
-            parser(text) {
-                let result = Number(text);
-
-                if (!isNaN(text)) {
-                    return result;
-                } else {
-                    return null;
-                }
-            }
-        }
-    };
-
     export default {
         name: 'CalendarPicker',
         mixins: [ Emitter ],
@@ -307,11 +206,7 @@
                 return bottomPlaced ? 'slide-up' : 'slide-down';
             },
             visualValue() {
-                const value = this.internalValue;
-                if (!value) return;
-
-                if (this.multiple) return value.map(date => this.formatDate(date)).join(', ');
-                return this.formatDate(value);
+                return this.formatDate(this.internalValue);
             },
             isConfirm(){
                 return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
@@ -355,8 +250,9 @@
                     typeof this.options.disabledDate === 'function' &&
                     this.options.disabledDate;
                 const valueToTest = isArrayValue ? newDate : newDate[0];
+                const isDisabled = disabledDateFn && disabledDateFn(valueToTest)
 
-                if (newValue !== oldValue && !disabledDateFn(valueToTest)) {
+                if (newValue !== oldValue && !isDisabled) {
                     this.emitChange();
                     this.internalValue = newDate;
                 } else {
@@ -404,9 +300,13 @@
                     TYPE_VALUE_RESOLVER_MAP[type] ||
                     TYPE_VALUE_RESOLVER_MAP['default']
                 ).parser;
+                const format = this.format || DEFAULT_FORMATS[type];
+                const multipleParser = TYPE_VALUE_RESOLVER_MAP['multiple'].parser;
 
                 if (val && type === 'time' && !(val instanceof Date)) {
-                    val = parser(val, this.format || DEFAULT_FORMATS[type]);
+                    val = parser(val, format);
+                } else if (this.multiple && val) {
+                    val = multipleParser(val, format);
                 } else if (isRange) {
                     if (!val){
                         val = [null, null];
@@ -415,17 +315,24 @@
                         val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
                     }
                 } else if (typeof val === 'string' && type.indexOf('time') !== 0){
-                    val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
+                    val = parser(val, format) || val;
                 }
-                return (isRange || this.multiple) ? val : [val];
+
+                return (isRange || this.multiple) ? (val || []) : [val];
             },
             formatDate(value){
-                const {formatter} = (
-                    TYPE_VALUE_RESOLVER_MAP[this.type] ||
-                    TYPE_VALUE_RESOLVER_MAP['default']
-                );
                 const format = DEFAULT_FORMATS[this.type];
-                return formatter(value, this.format || format);
+
+                if (this.multiple) {
+                    const formatter = TYPE_VALUE_RESOLVER_MAP.multiple.formatter;
+                    return formatter(value, this.format || format);
+                } else {
+                    const {formatter} = (
+                        TYPE_VALUE_RESOLVER_MAP[this.type] ||
+                        TYPE_VALUE_RESOLVER_MAP['default']
+                    );
+                    return formatter(value, this.format || format);
+                }
             },
             onPick(dates, visible = false) {
 
diff --git a/src/components/date-picker/util.js b/src/components/date-picker/util.js
index fb248f3c..68ba23bd 100644
--- a/src/components/date-picker/util.js
+++ b/src/components/date-picker/util.js
@@ -134,3 +134,113 @@ export const formatDateLabels = (function() {
         };
     };
 })();
+
+// Parsers and Formaters
+export const DEFAULT_FORMATS = {
+    date: 'yyyy-MM-dd',
+    month: 'yyyy-MM',
+    year: 'yyyy',
+    datetime: 'yyyy-MM-dd HH:mm:ss',
+    time: 'HH:mm:ss',
+    timerange: 'HH:mm:ss',
+    daterange: 'yyyy-MM-dd',
+    datetimerange: 'yyyy-MM-dd HH:mm:ss'
+};
+
+const RANGE_SEPARATOR = ' - ';
+
+const DATE_FORMATTER = function(value, format) {
+    return formatDate(value, format);
+};
+const DATE_PARSER = function(text, format) {
+    return parseDate(text, format);
+};
+const RANGE_FORMATTER = function(value, format) {
+    if (Array.isArray(value) && value.length === 2) {
+        const start = value[0];
+        const end = value[1];
+
+        if (start && end) {
+            return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
+        }
+    }
+    return '';
+};
+const RANGE_PARSER = function(text, format) {
+    const array = text.split(RANGE_SEPARATOR);
+    if (array.length === 2) {
+        const range1 = array[0];
+        const range2 = array[1];
+
+        return [parseDate(range1, format), parseDate(range2, format)];
+    }
+    return [];
+};
+
+export const TYPE_VALUE_RESOLVER_MAP = {
+    default: {
+        formatter(value) {
+            if (!value) return '';
+            return '' + value;
+        },
+        parser(text) {
+            if (text === undefined || text === '') return null;
+            return text;
+        }
+    },
+    date: {
+        formatter: DATE_FORMATTER,
+        parser: DATE_PARSER
+    },
+    datetime: {
+        formatter: DATE_FORMATTER,
+        parser: DATE_PARSER
+    },
+    daterange: {
+        formatter: RANGE_FORMATTER,
+        parser: RANGE_PARSER
+    },
+    datetimerange: {
+        formatter: RANGE_FORMATTER,
+        parser: RANGE_PARSER
+    },
+    timerange: {
+        formatter: RANGE_FORMATTER,
+        parser: RANGE_PARSER
+    },
+    time: {
+        formatter: DATE_FORMATTER,
+        parser: DATE_PARSER
+    },
+    month: {
+        formatter: DATE_FORMATTER,
+        parser: DATE_PARSER
+    },
+    year: {
+        formatter: DATE_FORMATTER,
+        parser: DATE_PARSER
+    },
+    multiple: {
+        formatter: (value, format) => {
+            console.log(value, format);
+            return value.filter(Boolean).map(date => formatDate(date, format)).join(',');
+        },
+        parser: (text, format) => text.split(',').map(string => parseDate(string.trim(), format))
+    },
+    number: {
+        formatter(value) {
+            if (!value) return '';
+            return '' + value;
+        },
+        parser(text) {
+            let result = Number(text);
+
+            if (!isNaN(text)) {
+                return result;
+            } else {
+                return null;
+            }
+        }
+    }
+};
+

From d9ff845f63632050909fe394184b2bdaf976c545 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 19 Jan 2018 21:25:24 +0100
Subject: [PATCH 17/48] Emit input event in mounted if parsed value diffs

---
 src/components/date-picker/picker.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index a721dba6..70dd1e07 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -135,9 +135,6 @@
                 },
                 default: 'bottom-start'
             },
-            options: {
-                type: Object
-            },
             transfer: {
                 type: Boolean,
                 default: false
@@ -250,7 +247,7 @@
                     typeof this.options.disabledDate === 'function' &&
                     this.options.disabledDate;
                 const valueToTest = isArrayValue ? newDate : newDate[0];
-                const isDisabled = disabledDateFn && disabledDateFn(valueToTest)
+                const isDisabled = disabledDateFn && disabledDateFn(valueToTest);
 
                 if (newValue !== oldValue && !isDisabled) {
                     this.emitChange();
@@ -375,10 +372,16 @@
             publicValue(now, before){
                 const newValue = JSON.stringify(now);
                 const oldValue = JSON.stringify(before);
-                if (newValue !== oldValue) this.$emit('input', now); // to update v-model
+                const shouldEmitInput = newValue !== oldValue || typeof now !== typeof before;
+                if (shouldEmitInput) this.$emit('input', now); // to update v-model
             },
         },
         mounted () {
+            const initialValue = this.value;
+            const parsedValue = this.publicValue;
+            if (typeof initialValue !== typeof parsedValue || JSON.stringify(initialValue) !== JSON.stringify(parsedValue)){
+                this.$emit('input', this.publicValue); // to update v-model
+            }
             if (this.open !== null) this.visible = this.open;
         }
     };

From 5426dcf989a12b5b99458cf6f0c498d3d0e778d4 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Mon, 22 Jan 2018 14:23:05 +0100
Subject: [PATCH 18/48] fix specs, fix merge conflicts and cleanup

---
 package-lock.json                             |  5 +++
 package.json                                  |  1 +
 .../date-picker/base/date-table.vue           |  2 +-
 src/components/date-picker/base/mixin.js      |  4 +-
 .../date-picker/panel/Date/date-range.vue     |  1 -
 .../date-picker/panel/Time/time-range.vue     |  2 +-
 src/components/date-picker/util.js            |  1 -
 test/unit/specs/date-picker.spec.js           | 37 +++++++++++++------
 8 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b82bc9e1..ab5beeef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7169,6 +7169,11 @@
       "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
       "dev": true
     },
+    "js-calendar": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",
+      "integrity": "sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw=="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
diff --git a/package.json b/package.json
index 2372da4f..d8940ae5 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "async-validator": "^1.8.2",
     "deepmerge": "^1.5.2",
     "element-resize-detector": "^1.1.13",
+    "js-calendar": "^1.2.3",
     "lodash.throttle": "^4.1.1",
     "popper.js": "^0.6.4",
     "tinycolor2": "^1.4.1"
diff --git a/src/components/date-picker/base/date-table.vue b/src/components/date-picker/base/date-table.vue
index 4658d700..31196b84 100644
--- a/src/components/date-picker/base/date-table.vue
+++ b/src/components/date-picker/base/date-table.vue
@@ -82,7 +82,7 @@
                         start: isRange && time === minDay,
                         end: isRange && time === maxDay
                     };
-                }).cells.slice(8);
+                }).cells;
             }
         },
         methods: {
diff --git a/src/components/date-picker/base/mixin.js b/src/components/date-picker/base/mixin.js
index 0d0b7d37..ba64cc54 100644
--- a/src/components/date-picker/base/mixin.js
+++ b/src/components/date-picker/base/mixin.js
@@ -1,4 +1,6 @@
 
+import {clearHours} from '../util';
+
 export default {
     props: {
         tableDate: {
@@ -36,7 +38,7 @@ export default {
     methods: {
         handleClick (cell) {
             if (cell.disabled) return;
-            const newDate = cell.date;
+            const newDate = new Date(clearHours(cell.date));
 
             this.$emit('on-pick', newDate);
             this.$emit('on-pick-click');
diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 0e6300c2..8cfd3d41 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -219,7 +219,6 @@
                 };
             },
             prevYear (panel) {
-                console.log(this)
                 const increment = this.currentView === 'year' ? -10 : -1;
                 this.changePanelDate(panel, 'FullYear', increment);
             },
diff --git a/src/components/date-picker/panel/Time/time-range.vue b/src/components/date-picker/panel/Time/time-range.vue
index aea53d2c..f4a65aa8 100644
--- a/src/components/date-picker/panel/Time/time-range.vue
+++ b/src/components/date-picker/panel/Time/time-range.vue
@@ -132,7 +132,7 @@
 
                 // set dateStart
                 Object.keys(start).forEach(type => {
-                    dateStart[`set${capitalize(type)}`](start[type])
+                    dateStart[`set${capitalize(type)}`](start[type]);
                 });
 
                 // set dateEnd
diff --git a/src/components/date-picker/util.js b/src/components/date-picker/util.js
index 68ba23bd..80aca94f 100644
--- a/src/components/date-picker/util.js
+++ b/src/components/date-picker/util.js
@@ -222,7 +222,6 @@ export const TYPE_VALUE_RESOLVER_MAP = {
     },
     multiple: {
         formatter: (value, format) => {
-            console.log(value, format);
             return value.filter(Boolean).map(date => formatDate(date, format)).join(',');
         },
         parser: (text, format) => text.split(',').map(string => parseDate(string.trim(), format))
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 411b408d..0a440897 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -11,7 +11,7 @@ describe('DatePicker.vue', () => {
       <Date-Picker></Date-Picker>
     `);
     const picker = vm.$children[0];
-    picker.showPicker();
+    picker.$el.querySelector('input.ivu-input').focus();
     vm.$nextTick(() => {
       const calendarBody = vm.$el.querySelector('.ivu-picker-panel-body .ivu-date-picker-cells:first-of-type');
       const calendarCells = [...calendarBody.querySelectorAll('.ivu-date-picker-cells-cell')].filter(el => {
@@ -20,7 +20,7 @@ describe('DatePicker.vue', () => {
         return !prevMonth && !nextMonth;
       });
       const today = new Date();
-      const daysInCurrentMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
+      const daysInCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 0).getDate();
       expect(daysInCurrentMonth).to.equal(calendarCells.length);
       done();
     });
@@ -32,7 +32,7 @@ describe('DatePicker.vue', () => {
     `);
     const picker = vm.$children[0];
     expect(picker.$children.length).to.equal(2);
-    expect(Array.isArray(picker.currentValue)).to.equal(true);
+    expect(Array.isArray(picker.internalValue)).to.equal(true);
     done();
   });
 
@@ -61,10 +61,17 @@ describe('DatePicker.vue', () => {
           dayFive.setHours(0, 0, 0, 0);
 
           // check pickers internal value
-          const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects
+          const [startInternalValue, endInternalValue] = picker.internalValue; // Date Objects
           expect(Math.abs(dayOne - startInternalValue)).to.equal(0);
           expect(Math.abs(dayFive - endInternalValue)).to.equal(0);
 
+          /*
+                    const [startInternalValue, endInternalValue] = picker.internalValue; // Date Objects
+          expect(dateToString(dayOne)).to.equal(dateToString(startInternalValue));
+          expect(dateToString(dayFive)).to.equal(dateToString(endInternalValue));
+
+           */
+
           // check pickers display value
           const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
           expect(Math.abs(dayOne - startDisplayValue)).to.equal(0);
@@ -77,6 +84,7 @@ describe('DatePicker.vue', () => {
   });
 
   it('should change type progamatically', done => {
+    // https://jsfiddle.net/hq7cLz83/
     vm = createVue({
       template: '<Date-picker :type="dateType"></Date-picker>',
       data() {
@@ -94,9 +102,9 @@ describe('DatePicker.vue', () => {
       const monthPanel = panel.querySelector('.ivu-date-picker-cells-month');
       const yearPanel = panel.querySelector('.ivu-date-picker-cells-year');
 
-      expect(dayPanel.style.display).to.equal('none');
+      expect(dayPanel).to.equal(null);
       expect(monthPanel.style.display).to.equal('');
-      expect(yearPanel.style.display).to.equal('none');
+      expect(yearPanel).to.equal(null);
 
       expect(picker.type).to.equal('month');
       expect(picker.selectionMode).to.equal('month');
@@ -104,6 +112,11 @@ describe('DatePicker.vue', () => {
       vm.dateType = 'year';
       promissedTick(picker)
         .then(() => {
+          const yearPanel = panel.querySelector('.ivu-date-picker-cells-year');
+          const monthPanel = panel.querySelector('.ivu-date-picker-cells-month');
+          expect(yearPanel.style.display).to.equal('');
+          expect(monthPanel).to.equal(null);
+
           expect(picker.type).to.equal('year');
           expect(picker.selectionMode).to.equal('year');
 
@@ -112,10 +125,10 @@ describe('DatePicker.vue', () => {
         })
         .then(() => {
           expect(picker.type).to.equal('date');
-          expect(picker.selectionMode).to.equal('day');
+          expect(picker.selectionMode).to.equal('date');
 
           done();
-        });
+        }).catch(err => console.log(err));
     });
   });
 
@@ -170,7 +183,7 @@ describe('DatePicker.vue', () => {
         clickableCells[firstDayInMonthIndex + 4].firstElementChild.click();
         vm.$nextTick(() => {
           // cache first values
-          const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects
+          const [startInternalValue, endInternalValue] = picker.internalValue; // Date Objects
           const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
 
           // clear picker
@@ -183,7 +196,7 @@ describe('DatePicker.vue', () => {
 
             vm.$nextTick(() => {
               expect(picker.visible).to.equal(true);
-              expect(JSON.stringify(picker.currentValue)).to.equal('[null,null]');
+              expect(JSON.stringify(picker.internalValue)).to.equal('[null,null]');
               expect(displayField.value).to.equal('');
 
               clickableCells[firstDayInMonthIndex].firstElementChild.click();
@@ -191,8 +204,8 @@ describe('DatePicker.vue', () => {
                 clickableCells[firstDayInMonthIndex + 4].firstElementChild.click();
                 vm.$nextTick(() => {
                   // recheck internal values
-                  expect(Math.abs(picker.currentValue[0] - startInternalValue)).to.equal(0);
-                  expect(Math.abs(picker.currentValue[1] - endInternalValue)).to.equal(0);
+                  expect(Math.abs(picker.internalValue[0] - startInternalValue)).to.equal(0);
+                  expect(Math.abs(picker.internalValue[1] - endInternalValue)).to.equal(0);
                   // recheck display value
                   const [_startDisplayValue, _endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
                   expect(Math.abs(_startDisplayValue - startDisplayValue)).to.equal(0);

From b52e02e4367002c01d04793c2e8059965aa26b80 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 09:46:07 +0100
Subject: [PATCH 19/48] Fix month|year preselection/shortcut when picking a
 date

---
 .../panel/Date/date-panel-mixin.js            |  4 ++
 .../date-picker/panel/Date/date-range.vue     | 35 ++++++++++++------
 .../date-picker/panel/Date/date.vue           | 37 ++++++++++++++-----
 src/components/date-picker/picker.vue         |  1 +
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js
index b56a5131..b2f666b0 100644
--- a/src/components/date-picker/panel/Date/date-panel-mixin.js
+++ b/src/components/date-picker/panel/Date/date-panel-mixin.js
@@ -42,6 +42,10 @@ export default {
         },
         startDate: {
             type: Date
+        },
+        pickerType: {
+            type: String,
+            require: true
         }
     },
     computed: {
diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 8cfd3d41..83e4eb88 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -31,7 +31,7 @@
                         v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
                 </div>
                 <component
-                    :is="pickerTable"
+                    :is="leftPickerTable"
                     ref="leftYearTable"
                     v-if="currentView !== 'time'"
                     :table-date="leftPanelDate"
@@ -41,7 +41,7 @@
                     :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     @on-change-range="handleChangeRange"
-                    @on-pick="handleRangePick"
+                    @on-pick="panelPickerHandlers.left"
                     @on-pick-click="handlePickClick"
                 ></component>
             </div>
@@ -69,7 +69,7 @@
                         v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
                 </div>
                 <component
-                    :is="pickerTable"
+                    :is="rightPickerTable"
                     ref="rightYearTable"
                     v-if="currentView !== 'time'"
                     :table-date="rightPanelDate"
@@ -79,7 +79,7 @@
                     :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     @on-change-range="handleChangeRange"
-                    @on-pick="handleRangePick"
+                    @on-pick="panelPickerHandlers.right"
                     @on-pick-click="handlePickClick"></component>
             </div>
             <div :class="[prefixCls + '-content']" v-show="isTime">
@@ -147,6 +147,8 @@
                 dates: this.value,
                 rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
                 currentView: this.selectionMode || 'range',
+                leftPickerTable: `${this.selectionMode}-table`,
+                rightPickerTable: `${this.selectionMode}-table`,
                 leftPanelDate: leftPanelDate,
                 rightPanelDate: new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate())
             };
@@ -161,9 +163,6 @@
                     }
                 ];
             },
-            pickerTable(){
-                return `${this.currentView}-table`;
-            },
             leftDatePanelLabel(){
                 return this.panelLabelConfig('left');
             },
@@ -172,6 +171,13 @@
             },
             timeDisabled(){
                 return !(this.dates[0] && this.dates[1]);
+            },
+            panelPickerHandlers(){
+                const tableType = `${this.currentView}-table`;
+                return {
+                    left: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'left'),
+                    right: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'right'),
+                }
             }
         },
         watch: {
@@ -190,6 +196,9 @@
                 const rightMonth = this.rightPanelDate.getMonth();
                 const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
 
+                this.leftPickerTable = `${currentView}-table`;
+                this.rightPickerTable = `${currentView}-table`;
+
                 if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
                     this.changePanelDate('right', 'Month', 1);
                 }
@@ -257,11 +266,15 @@
                     }
                 }
             },
-            showYearPicker () {
-                this.currentView = 'year';
+            showYearPicker (panel) {
+                this[`${panel}PickerTable`] = 'year-table';
             },
-            showMonthPicker () {
-                this.currentView = 'month';
+            showMonthPicker (panel) {
+                this[`${panel}PickerTable`] = 'month-table';
+            },
+            handlePreSelection(panel, value){
+                this[`${panel}PanelDate`] = value;
+                this[`${panel}PickerTable`] = `${this.currentView}-table`;
             },
             handleRangePick (val) {
                 if (this.rangeState.selecting || this.currentView === 'time'){
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index 118799d4..3aaa90bb 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -37,7 +37,7 @@
                     :value="dates"
                     :selection-mode="selectionMode"
                     :disabled-date="disabledDate"
-                    @on-pick="handlePick"
+                    @on-pick="panelPickerHandlers"
                     @on-pick-click="handlePickClick"
                 ></component>
             </div>
@@ -92,11 +92,14 @@
             // in the mixin
         },
         data () {
-            const dates = this.value.slice().sort();
+            const {selectionMode, value} = this;
+
+            const dates = value.slice().sort();
             return {
                 prefixCls: prefixCls,
                 datePrefixCls: datePrefixCls,
-                currentView: this.selectionMode || 'date',
+                currentView: selectionMode || 'date',
+                pickerTable: this.getTableType(selectionMode),
                 dates: dates,
                 panelDate: this.startDate || dates[0] || new Date()
             };
@@ -110,8 +113,8 @@
                     }
                 ];
             },
-            pickerTable(){
-                return this.currentView.match(/^time/) ? 'time-picker' : `${this.currentView}-table`;
+            panelPickerHandlers(){
+                return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection
             },
             datePanelLabel () {
                 const locale = this.t('i.locale');
@@ -120,7 +123,7 @@
                 const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
 
                 const handler = type => {
-                    return () => (this.currentView = type);
+                    return () => this.pickerTable = this.getTableType(type);
                 };
 
                 return {
@@ -139,8 +142,9 @@
             selectionMode(){
                 this.currentView = this.selectionMode;
             },
-            currentView (val) {
-                this.$emit('on-selection-mode-change', val);
+            currentView (currentView) {
+                this.$emit('on-selection-mode-change', currentView);
+                this.pickertable = this.getTableType(currentView);
             }
         },
         methods: {
@@ -151,16 +155,29 @@
                     this.panelDate = siblingMonth(this.panelDate, dir * 12);
                 }
             },
+            getTableType(currentView){
+                return currentView.match(/^time/) ? 'time-picker' : `${currentView}-table`;
+            },
             changeMonth(dir){
                 this.panelDate = siblingMonth(this.panelDate, dir);
             },
+            handlePreSelection(value){
+                this.panelDate = value;
+                this.pickerTable = this.getTableType(this.currentView);
+            },
             handlePick (value) {
-                const {selectionMode, panelDate} = this;
+                const {selectionMode, panelDate, pickerType} = this;
                 if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1);
                 else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
                 else value = new Date(value);
 
-                this.$emit('on-pick', value);
+                if (pickerType === selectionMode){
+                    this.$emit('on-pick', value);
+                } else {
+                    this.selectionMode
+                }
+
+
             },
         },
     };
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 70dd1e07..2a0449c9 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -45,6 +45,7 @@
                         :start-date="startDate"
                         :split-panels="splitPanels"
                         :show-week-numbers="showWeekNumbers"
+                        :picker-type="type"
 
                         v-bind="ownPickerProps"
 

From 15457562eaf3d4816a07cb4f3d1cbb291bd238ba Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 10:24:54 +0100
Subject: [PATCH 20/48] Reset panel date when dates are null

---
 src/components/date-picker/panel/Date/date-range.vue | 12 +++++++++---
 src/components/date-picker/panel/Date/date.vue       |  1 +
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 83e4eb88..b11951e6 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -184,10 +184,16 @@
             value(newVal) {
                 const minDate = newVal[0] ? toDate(newVal[0]) : null;
                 const maxDate = newVal[1] ? toDate(newVal[1]) : null;
-                this.dates = [minDate, maxDate];
+                this.dates = [minDate, maxDate].sort();
+                if (JSON.stringify(this.dates) === '[null,null]') {
+                    const leftPanelDate = this.startDate || new Date();
+                    this.leftPanelDate = leftPanelDate,
+                    this.rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
+                }
+
                 this.rangeState = {
-                    from: minDate,
-                    to: maxDate,
+                    from: this.dates[0],
+                    to: this.dates[1],
                     selecting: false
                 };
             },
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index 3aaa90bb..f69a2d09 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -138,6 +138,7 @@
         watch: {
             value (newVal) {
                 this.dates = newVal;
+                if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date();
             },
             selectionMode(){
                 this.currentView = this.selectionMode;

From c2b7fed05fc774d4f681625ee3f6a6759d818bd7 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 10:55:42 +0100
Subject: [PATCH 21/48] Reset panel selectionMode and positioning on blur

---
 .../date-picker/panel/Date/date-range.vue     | 25 +++++++++++++------
 .../date-picker/panel/Date/date.vue           |  5 ++--
 src/components/date-picker/picker.vue         |  1 +
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index b11951e6..c7057d85 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -185,26 +185,31 @@
                 const minDate = newVal[0] ? toDate(newVal[0]) : null;
                 const maxDate = newVal[1] ? toDate(newVal[1]) : null;
                 this.dates = [minDate, maxDate].sort();
-                if (JSON.stringify(this.dates) === '[null,null]') {
-                    const leftPanelDate = this.startDate || new Date();
-                    this.leftPanelDate = leftPanelDate,
-                    this.rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
-                }
 
                 this.rangeState = {
                     from: this.dates[0],
                     to: this.dates[1],
                     selecting: false
                 };
+
+
+                // set panels positioning
+                const leftPanelDate = this.startDate || this.dates[0] || new Date();
+                this.leftPanelDate = leftPanelDate;
+                const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
+                this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
+
+                // reset stuff
+                this.currentView = this.selectionMode || 'range';
+                this.leftPickerTable = `${this.currentView}-table`;
+                this.rightPickerTable = `${this.currentView}-table`;
+
             },
             currentView(currentView){
                 const leftMonth = this.leftPanelDate.getMonth();
                 const rightMonth = this.rightPanelDate.getMonth();
                 const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
 
-                this.leftPickerTable = `${currentView}-table`;
-                this.rightPickerTable = `${currentView}-table`;
-
                 if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
                     this.changePanelDate('right', 'Month', 1);
                 }
@@ -214,6 +219,10 @@
                 if (currentView === 'year' && isSameYear){
                     this.changePanelDate('right', 'FullYear', 10);
                 }
+            },
+            selectionMode(type){
+                console.log('Selection type change!', type);
+                this.currentView = type || 'range';
             }
         },
         methods: {
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index f69a2d09..c65d9c2e 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -139,9 +139,10 @@
             value (newVal) {
                 this.dates = newVal;
                 if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date();
-            },
-            selectionMode(){
+
+                // reset stuff
                 this.currentView = this.selectionMode;
+                this.pickerTable = this.getTableType(this.currentView);
             },
             currentView (currentView) {
                 this.$emit('on-selection-mode-change', currentView);
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 2a0449c9..16d2c4c7 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -237,6 +237,7 @@
             },
             handleBlur () {
                 this.visible = false;
+                this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
             },
             handleInputChange (event) {
                 const isArrayValue = this.type.includes('range') || this.multiple;

From b5ca23f5ef46887d49582fa849e4561b2dbd66a3 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 11:01:25 +0100
Subject: [PATCH 22/48] Use same API for on-change, but add Date object(s) also

---
 src/components/date-picker/picker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 16d2c4c7..f288b2cc 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -287,7 +287,7 @@
                 );
             },
             emitChange () {
-                this.$emit('on-change', this.publicValue);
+                this.$emit('on-change', this.visualValue, this.publicValue);
                 this.$nextTick(() => {
                     this.dispatch('FormItem', 'on-form-change', this.publicValue);
                 });

From 283b90aa382af67e6e071ba27261de01b53cd4f4 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 11:15:20 +0100
Subject: [PATCH 23/48] Fix daterange manual date insertion

---
 src/components/date-picker/picker.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index f288b2cc..742e035c 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -310,8 +310,12 @@
                     if (!val){
                         val = [null, null];
                     } else {
-                        val = val.map(date => new Date(date)); // try to parse
-                        val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
+                        if (typeof val === 'string') {
+                            val = parser(val, format);
+                        } else {
+                            val = val.map(date => new Date(date)); // try to parse
+                            val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
+                        }
                     }
                 } else if (typeof val === 'string' && type.indexOf('time') !== 0){
                     val = parser(val, format) || val;

From 71b68751f811d6ca7da29a3674adf57dfdba8f87 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 11:19:43 +0100
Subject: [PATCH 24/48] Fix date/time panel toggle

---
 src/components/date-picker/panel/Date/date-panel-mixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js
index b2f666b0..08bc10d8 100644
--- a/src/components/date-picker/panel/Date/date-panel-mixin.js
+++ b/src/components/date-picker/panel/Date/date-panel-mixin.js
@@ -55,7 +55,7 @@ export default {
     },
     methods: {
         handleToggleTime(){
-            this.currentView = this.currentView === 'time' ? this.selectionMode : 'time';
+            this.currentView = this.currentView === 'time' ? 'date' : 'time';
         },
     }
 };

From bcf09be74478736aee367b6f79a2e8d0c3b0459d Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 11:34:50 +0100
Subject: [PATCH 25/48] fix handlePick and remove console.log

removed if/else related to b52e02e4367002c01d04793c2e8059965aa26b80
---
 src/components/date-picker/panel/Date/date-range.vue |  1 -
 src/components/date-picker/panel/Date/date.vue       | 10 ++--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index c7057d85..ca017a4b 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -221,7 +221,6 @@
                 }
             },
             selectionMode(type){
-                console.log('Selection type change!', type);
                 this.currentView = type || 'range';
             }
         },
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index c65d9c2e..529d8e4b 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -168,18 +168,12 @@
                 this.pickerTable = this.getTableType(this.currentView);
             },
             handlePick (value) {
-                const {selectionMode, panelDate, pickerType} = this;
+                const {selectionMode, panelDate} = this;
                 if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1);
                 else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
                 else value = new Date(value);
 
-                if (pickerType === selectionMode){
-                    this.$emit('on-pick', value);
-                } else {
-                    this.selectionMode
-                }
-
-
+                this.$emit('on-pick', value);
             },
         },
     };

From 46726afdf4c11218e254148358b26a39b23b1ed0 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 13:33:48 +0100
Subject: [PATCH 26/48] Fix panels reset on blur and

---
 .../date-picker/panel/Date/date-range.vue           | 11 +++++------
 src/components/date-picker/panel/Date/date.vue      | 12 ++++++++----
 src/components/date-picker/picker.vue               | 13 ++++++++++---
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index ca017a4b..005dc62e 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -198,12 +198,6 @@
                 this.leftPanelDate = leftPanelDate;
                 const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
                 this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
-
-                // reset stuff
-                this.currentView = this.selectionMode || 'range';
-                this.leftPickerTable = `${this.currentView}-table`;
-                this.rightPickerTable = `${this.currentView}-table`;
-
             },
             currentView(currentView){
                 const leftMonth = this.leftPanelDate.getMonth();
@@ -225,6 +219,11 @@
             }
         },
         methods: {
+            reset(){
+                this.currentView = this.selectionMode;
+                this.leftPickerTable = `${this.currentView}-table`;
+                this.rightPickerTable = `${this.currentView}-table`;
+            },
             panelLabelConfig (direction) {
                 const locale = this.t('i.locale');
                 const datePanelLabel = this.t('i.datepicker.datePanelLabel');
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index 529d8e4b..10912f79 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -139,17 +139,21 @@
             value (newVal) {
                 this.dates = newVal;
                 if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date();
-
-                // reset stuff
-                this.currentView = this.selectionMode;
-                this.pickerTable = this.getTableType(this.currentView);
             },
             currentView (currentView) {
                 this.$emit('on-selection-mode-change', currentView);
                 this.pickertable = this.getTableType(currentView);
+            },
+            selectionMode(type){
+                this.currentView = type;
+                this.pickerTable = this.getTableType(type);
             }
         },
         methods: {
+            reset(){
+                this.currentView = this.selectionMode;
+                this.pickerTable = this.getTableType(this.currentView);
+            },
             changeYear(dir){
                 if (this.selectionMode === 'year'){
                     this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 742e035c..4f753e5c 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -35,6 +35,7 @@
                 <div>
                     <component
                         :is="panel"
+                        ref="pickerPanel"
                         :visible="visible"
                         :showTime="type === 'datetime' || type === 'datetimerange'"
                         :confirm="isConfirm"
@@ -212,10 +213,9 @@
         },
         methods: {
             onSelectionModeChange(type){
-
                 if (type.match(/^date/)) type = 'date';
-                this.selectionMode = type;
-                return type;
+                this.selectionMode = oneOf(type, ['year', 'month', 'date', 'time']) && type;
+                return this.selectionMode;
             },
             // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
             handleTransferClick () {
@@ -237,7 +237,12 @@
             },
             handleBlur () {
                 this.visible = false;
+                this.onSelectionModeChange(this.type);
                 this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
+                this.reset();
+            },
+            reset(){
+                this.$refs.pickerPanel.reset && this.$refs.pickerPanel.reset();
             },
             handleInputChange (event) {
                 const isArrayValue = this.type.includes('range') || this.multiple;
@@ -280,6 +285,7 @@
                 this.$emit('on-clear');
                 this.dispatch('FormItem', 'on-form-change', '');
                 this.emitChange();
+                this.reset();
 
                 setTimeout(
                     () => this.onSelectionModeChange(this.type),
@@ -354,6 +360,7 @@
             onPickSuccess(){
                 this.visible = false;
                 this.$emit('on-ok');
+                this.reset();
             },
         },
         watch: {

From 22ff9a62f237e243b501e40bf0ca1ea4e56eacf7 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 13:34:02 +0100
Subject: [PATCH 27/48] fix showSeconds flag logic

---
 src/components/date-picker/panel/Time/time-range.vue | 2 +-
 src/components/date-picker/panel/Time/time.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/date-picker/panel/Time/time-range.vue b/src/components/date-picker/panel/Time/time-range.vue
index f4a65aa8..bbbbf71e 100644
--- a/src/components/date-picker/panel/Time/time-range.vue
+++ b/src/components/date-picker/panel/Time/time-range.vue
@@ -102,7 +102,7 @@
                 ];
             },
             showSeconds () {
-                return (this.format || '').indexOf('ss') !== -1;
+                return !(this.format || '').match(/mm$/);
             },
             leftDatePanelLabel () {
                 return this.panelLabelConfig(this.date);
diff --git a/src/components/date-picker/panel/Time/time.vue b/src/components/date-picker/panel/Time/time.vue
index 35a26888..0ae50469 100644
--- a/src/components/date-picker/panel/Time/time.vue
+++ b/src/components/date-picker/panel/Time/time.vue
@@ -69,7 +69,7 @@
         },
         computed: {
             showSeconds () {
-                return (this.format || '').indexOf('ss') !== -1;
+                return !(this.format || '').match(/mm$/);
             },
             visibleDate () { // TODO
                 const date = this.date;

From 72f225e9387d289ca323b9d834a5f2bde86ca93f Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 14:54:03 +0100
Subject: [PATCH 28/48] Fix date manual input so it falls back to old value
 when parser don't parse the input

---
 src/components/date-picker/picker.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 4f753e5c..aa820604 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -255,8 +255,9 @@
                     this.options.disabledDate;
                 const valueToTest = isArrayValue ? newDate : newDate[0];
                 const isDisabled = disabledDateFn && disabledDateFn(valueToTest);
+                const isValidDate = newDate.reduce((valid, date) => valid && date instanceof Date, true);
 
-                if (newValue !== oldValue && !isDisabled) {
+                if (newValue !== oldValue && !isDisabled && isValidDate) {
                     this.emitChange();
                     this.internalValue = newDate;
                 } else {
@@ -324,7 +325,7 @@
                         }
                     }
                 } else if (typeof val === 'string' && type.indexOf('time') !== 0){
-                    val = parser(val, format) || val;
+                    val = parser(val, format) || null;
                 }
 
                 return (isRange || this.multiple) ? (val || []) : [val];
@@ -344,7 +345,6 @@
                 }
             },
             onPick(dates, visible = false) {
-
                 if (this.multiple){
                     const allDates = [...this.internalValue, dates].filter(Boolean);
                     const timeStamps = allDates.map(date => date.getTime()).filter((ts, i, arr) => arr.indexOf(ts) === i); // filter away duplicates

From 8c16b3014950de8af44d41e16f718f766b39cb0f Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 24 Jan 2018 15:07:09 +0100
Subject: [PATCH 29/48] return empty strings for invalid dates instead of
 `null`

---
 src/components/date-picker/picker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index aa820604..14c56730 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -187,7 +187,7 @@
                     return this.internalValue.slice();
                 } else {
                     const isRange = this.type.includes('range');
-                    const val = this.internalValue.map(date => date instanceof Date ? new Date(date) : date);
+                    const val = this.internalValue.map(date => date instanceof Date ? new Date(date) : (date || ''));
                     return (isRange || this.multiple) ? val : val[0];
                 }
             },

From 73a34dfab5590ce73df021114bebeaf01b21273e Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 31 Jan 2018 12:14:11 +0100
Subject: [PATCH 30/48] Fix year/month pre-selection

---
 .../date-picker/panel/Date/date-range.vue     | 27 +++++++++++++++----
 .../date-picker/panel/Date/date.vue           | 10 ++++---
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 005dc62e..5ff78ca1 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -13,15 +13,16 @@
                         :class="iconBtnCls('prev', '-double')"
                         @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
                     <span
+                        v-if="splitPanels || leftPickerTable === 'date-table'"
                         :class="iconBtnCls('prev')"
                         @click="prevMonth('left')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
                     <date-panel-label
                         :date-panel-label="leftDatePanelLabel"
-                        :current-view="currentView"
+                        :current-view="leftDatePanelView"
                         :date-prefix-cls="datePrefixCls"></date-panel-label>
                     <span
-                        v-if="splitPanels"
+                        v-if="splitPanels || leftPickerTable !== 'date-table'"
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
                     <span
@@ -48,7 +49,7 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
                 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
                     <span
-                        v-if="splitPanels"
+                        v-if="splitPanels || rightPickerTable !== 'date-table'"
                         :class="iconBtnCls('prev', '-double')"
                         @click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
                     <span
@@ -58,12 +59,13 @@
                         v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
                     <date-panel-label
                         :date-panel-label="rightDatePanelLabel"
-                        :current-view="currentView"
+                        :current-view="rightDatePanelView"
                         :date-prefix-cls="datePrefixCls"></date-panel-label>
                     <span
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
                     <span
+                        v-if="splitPanels || rightPickerTable === 'date-table'"
                         :class="iconBtnCls('next')"
                         @click="nextMonth('right')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
@@ -169,6 +171,12 @@
             rightDatePanelLabel(){
                 return this.panelLabelConfig('right');
             },
+            leftDatePanelView(){
+                return this.leftPickerTable.split('-').shift();
+            },
+            rightDatePanelView(){
+                return this.rightPickerTable.split('-').shift();
+            },
             timeDisabled(){
                 return !(this.dates[0] && this.dates[1]);
             },
@@ -287,7 +295,16 @@
             },
             handlePreSelection(panel, value){
                 this[`${panel}PanelDate`] = value;
-                this[`${panel}PickerTable`] = `${this.currentView}-table`;
+                const currentViewType = this[`${panel}PickerTable`];
+                if (currentViewType === 'year-table') this[`${panel}PickerTable`] = 'month-table';
+                else this[`${panel}PickerTable`] = `${this.currentView}-table`;
+
+                if (!this.splitPanels){
+                    const otherPanel = panel === 'left' ? 'right' : 'left';
+                    const type = currentViewType === 'year-table' ? 'FullYear' : 'Month';
+                    this[`${otherPanel}PanelDate`] = value;
+                    this.changePanelDate(otherPanel, type, 1);
+                }
             },
             handleRangePick (val) {
                 if (this.rangeState.selecting || this.currentView === 'time'){
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index 10912f79..7cf97753 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -12,17 +12,19 @@
                     :class="iconBtnCls('prev', '-double')"
                     @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
                 <span
+                    v-if="pickerTable === 'date-table'"
                     :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"
+                    :current-view="pickerTable.split('-').shift()"
                     :date-prefix-cls="datePrefixCls"></date-panel-label>
                 <span
                     :class="iconBtnCls('next', '-double')"
                     @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
                 <span
+                    v-if="pickerTable === 'date-table'"
                     :class="iconBtnCls('next')"
                     @click="changeMonth(+1)"
                     v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
@@ -155,7 +157,7 @@
                 this.pickerTable = this.getTableType(this.currentView);
             },
             changeYear(dir){
-                if (this.selectionMode === 'year'){
+                if (this.selectionMode === 'year' || this.pickerTable === 'year-table'){
                     this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
                 } else {
                     this.panelDate = siblingMonth(this.panelDate, dir * 12);
@@ -169,7 +171,9 @@
             },
             handlePreSelection(value){
                 this.panelDate = value;
-                this.pickerTable = this.getTableType(this.currentView);
+                if (this.pickerTable === 'year-table') this.pickerTable = 'month-table';
+                else this.pickerTable = this.getTableType(this.currentView);
+
             },
             handlePick (value) {
                 const {selectionMode, panelDate} = this;

From 5092777d174656722ec3a7c057902868dfc3fc2e Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 31 Jan 2018 13:30:01 +0100
Subject: [PATCH 31/48] Fix sort of date arrays

---
 src/components/date-picker/panel/Date/date-range.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 5ff78ca1..2305c5a0 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -127,6 +127,10 @@
     const prefixCls = 'ivu-picker-panel';
     const datePrefixCls = 'ivu-date-picker';
 
+    const dateSorter = (a, b) => {
+        if (!a || !b) return 0;
+        return a.getTime() - b.getTime();
+    };
 
     export default {
         name: 'RangeDatePickerPanel',
@@ -185,14 +189,14 @@
                 return {
                     left: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'left'),
                     right: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'right'),
-                }
+                };
             }
         },
         watch: {
             value(newVal) {
                 const minDate = newVal[0] ? toDate(newVal[0]) : null;
                 const maxDate = newVal[1] ? toDate(newVal[1]) : null;
-                this.dates = [minDate, maxDate].sort();
+                this.dates = [minDate, maxDate].sort(dateSorter);
 
                 this.rangeState = {
                     from: this.dates[0],
@@ -308,7 +312,7 @@
             },
             handleRangePick (val) {
                 if (this.rangeState.selecting || this.currentView === 'time'){
-                    const [minDate, maxDate] = [this.rangeState.from, val].sort((a, b) => a - b);
+                    const [minDate, maxDate] = [this.rangeState.from, val].sort(dateSorter);
                     this.dates = [minDate, maxDate];
                     if (this.currentView === 'time'){
                         this.dates = val;

From 7d6ea205db5d90676d39fc08fb78c31128e53666 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 09:30:34 +0100
Subject: [PATCH 32/48] fix broken spec

---
 test/unit/specs/date-picker.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 0a440897..1961b68a 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -20,7 +20,7 @@ describe('DatePicker.vue', () => {
         return !prevMonth && !nextMonth;
       });
       const today = new Date();
-      const daysInCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 0).getDate();
+      const daysInCurrentMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
       expect(daysInCurrentMonth).to.equal(calendarCells.length);
       done();
     });

From 8d5323069b131d3b73cf119455750956358c9dea Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 10:58:09 +0100
Subject: [PATCH 33/48] update panel date on every value change

---
 src/components/date-picker/panel/Date/date.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index 7cf97753..e1157920 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -116,7 +116,7 @@
                 ];
             },
             panelPickerHandlers(){
-                return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection
+                return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection;
             },
             datePanelLabel () {
                 const locale = this.t('i.locale');
@@ -140,7 +140,7 @@
         watch: {
             value (newVal) {
                 this.dates = newVal;
-                if (JSON.stringify(newVal) === '[null]') this.panelDate = this.startDate || new Date();
+                this.panelDate = this.startDate || this.dates[0] || new Date();
             },
             currentView (currentView) {
                 this.$emit('on-selection-mode-change', currentView);

From 34867ff9a95eee6883098b7e78563df330e7c095 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 11:21:12 +0100
Subject: [PATCH 34/48] normalise empty initial values

---
 src/components/date-picker/picker.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 14c56730..b69f86e6 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -74,6 +74,8 @@
 
     const prefixCls = 'ivu-date-picker';
 
+    const isEmptyArray = val => val.reduce((isEmpty, str) => isEmpty && !str || (typeof str === 'string' && str.trim() === ''), true);
+
     export default {
         name: 'CalendarPicker',
         mixins: [ Emitter ],
@@ -155,6 +157,10 @@
                 type: [Date, String, Array],
                 validator(val){
                     if (Array.isArray(val)){
+                        // check if its empty values
+                        if (isEmptyArray(val)) return true;
+
+                        // check if its valid value
                         const [start, end] = val.map(v => new Date(v));
                         return !isNaN(start.getTime()) && !isNaN(end.getTime());
                     } else {
@@ -170,11 +176,15 @@
             }
         },
         data(){
+
+            const isRange = this.type.includes('range');
+            const emptyArray = isRange ? [null, null] : [null];
+            const initialValue = isEmptyArray(this.value || []) ? emptyArray : this.parseDate(this.value);
             return {
                 prefixCls: prefixCls,
                 showClose: false,
                 visible: false,
-                internalValue: this.parseDate(this.value),
+                internalValue: initialValue,
                 disableClickOutSide: false,    // fixed when click a date,trigger clickoutside to close picker
                 disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭,
                 selectionMode: this.onSelectionModeChange(this.type),

From b990d2f4134dc2b425d63f705dec0c5ee4f304c2 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 11:21:37 +0100
Subject: [PATCH 35/48] move logic to inside the correct if clause

---
 src/components/date-picker/panel/Date/date-range.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 2305c5a0..9f721dff 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -312,11 +312,11 @@
             },
             handleRangePick (val) {
                 if (this.rangeState.selecting || this.currentView === 'time'){
-                    const [minDate, maxDate] = [this.rangeState.from, val].sort(dateSorter);
-                    this.dates = [minDate, maxDate];
                     if (this.currentView === 'time'){
                         this.dates = val;
                     } else {
+                        const [minDate, maxDate] = [this.rangeState.from, val].sort(dateSorter);
+                        this.dates = [minDate, maxDate];
                         this.rangeState = {
                             from: minDate,
                             to: maxDate,

From abb0cc87cf79aaf62c9ffb11ae5a85415ac37a8b Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 11:27:53 +0100
Subject: [PATCH 36/48] Correct arrows showing in split panels labels

---
 src/components/date-picker/panel/Date/date-range.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 9f721dff..23425094 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -13,7 +13,7 @@
                         :class="iconBtnCls('prev', '-double')"
                         @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
                     <span
-                        v-if="splitPanels || leftPickerTable === 'date-table'"
+                        v-if="leftPickerTable === 'date-table'"
                         :class="iconBtnCls('prev')"
                         @click="prevMonth('left')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
@@ -26,7 +26,7 @@
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
                     <span
-                        v-if="splitPanels"
+                        v-if="splitPanels && leftPickerTable === 'date-table'"
                         :class="iconBtnCls('next')"
                         @click="nextMonth('left')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
@@ -53,7 +53,7 @@
                         :class="iconBtnCls('prev', '-double')"
                         @click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
                     <span
-                        v-if="splitPanels"
+                        v-if="splitPanels && rightPickerTable === 'date-table'"
                         :class="iconBtnCls('prev')"
                         @click="prevMonth('right')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
@@ -65,7 +65,7 @@
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
                     <span
-                        v-if="splitPanels || rightPickerTable === 'date-table'"
+                        v-if="rightPickerTable === 'date-table'"
                         :class="iconBtnCls('next')"
                         @click="nextMonth('right')"
                         v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>

From 88d24200e8e74f0bcf453a97701c5e691dffa822 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 11:36:11 +0100
Subject: [PATCH 37/48] Fix date toggle in "multiple mode"

---
 src/components/date-picker/picker.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index b69f86e6..75431ab8 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -356,8 +356,10 @@
             },
             onPick(dates, visible = false) {
                 if (this.multiple){
+                    const pickedTimeStamp = dates.getTime();
+                    const indexOfPickedDate = this.internalValue.findIndex(date => date && date.getTime() === pickedTimeStamp);
                     const allDates = [...this.internalValue, dates].filter(Boolean);
-                    const timeStamps = allDates.map(date => date.getTime()).filter((ts, i, arr) => arr.indexOf(ts) === i); // filter away duplicates
+                    const timeStamps = allDates.map(date => date.getTime()).filter((ts, i, arr) => arr.indexOf(ts) === i && i !== indexOfPickedDate); // filter away duplicates
                     this.internalValue = timeStamps.map(ts => new Date(ts));
                 } else {
                     this.internalValue = Array.isArray(dates) ? dates : [dates];

From a1c88ebaf841489bfa09fb5d9caa02c61438e656 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 11:51:30 +0100
Subject: [PATCH 38/48] Correct showWeekNumbers cells logic

---
 src/components/date-picker/base/date-table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/date-picker/base/date-table.vue b/src/components/date-picker/base/date-table.vue
index 31196b84..db498250 100644
--- a/src/components/date-picker/base/date-table.vue
+++ b/src/components/date-picker/base/date-table.vue
@@ -82,7 +82,7 @@
                         start: isRange && time === minDay,
                         end: isRange && time === maxDay
                     };
-                }).cells;
+                }).cells.slice(this.showWeekNumbers ? 8 : 0);
             }
         },
         methods: {

From 4a1734b77edac0a1ac9465d5f17856b6a3725425 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 14:26:44 +0100
Subject: [PATCH 39/48] fix time and time-range parsers

---
 src/components/date-picker/picker.vue | 14 +++++++++++---
 src/components/date-picker/util.js    |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 75431ab8..0aeb1c5d 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -160,11 +160,17 @@
                         // check if its empty values
                         if (isEmptyArray(val)) return true;
 
+                        // check if is time format
+                        if (val[0].match(/^[\d:]+$/) && val[1].match(/^[\d:]+$/)) return true;
+
                         // check if its valid value
                         const [start, end] = val.map(v => new Date(v));
                         return !isNaN(start.getTime()) && !isNaN(end.getTime());
                     } else {
-                        if (typeof val === 'string') val = val.trim();
+                        if (typeof val === 'string') {
+                            val = val.trim();
+                            if (val.match(/^[\d:]+$/)) return true; // time format
+                        }
                         const date = new Date(val);
                         return val === '' || val === null || !isNaN(date.getTime());
                     }
@@ -176,10 +182,10 @@
             }
         },
         data(){
-
             const isRange = this.type.includes('range');
             const emptyArray = isRange ? [null, null] : [null];
-            const initialValue = isEmptyArray(this.value || []) ? emptyArray : this.parseDate(this.value);
+            const initialValue = isEmptyArray((isRange ? this.value : [this.value]) || []) ? emptyArray : this.parseDate(this.value);
+
             return {
                 prefixCls: prefixCls,
                 showClose: false,
@@ -329,6 +335,8 @@
                     } else {
                         if (typeof val === 'string') {
                             val = parser(val, format);
+                        } else if (type === 'timerange') {
+                            val = parser(val, format);
                         } else {
                             val = val.map(date => new Date(date)); // try to parse
                             val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
diff --git a/src/components/date-picker/util.js b/src/components/date-picker/util.js
index 80aca94f..d85a2b56 100644
--- a/src/components/date-picker/util.js
+++ b/src/components/date-picker/util.js
@@ -167,7 +167,7 @@ const RANGE_FORMATTER = function(value, format) {
     return '';
 };
 const RANGE_PARSER = function(text, format) {
-    const array = text.split(RANGE_SEPARATOR);
+    const array = Array.isArray(text) ? text : text.split(RANGE_SEPARATOR);
     if (array.length === 2) {
         const range1 = array[0];
         const range2 = array[1];

From 8878e4a351fb3bf0b5bd0da3b9681ef3fc573816 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Fri, 2 Feb 2018 14:35:55 +0100
Subject: [PATCH 40/48] Remove validator function (because:)

We have too many use cases and we cannot access props inside validator
function, so we cannot do proper checking anyway
---
 src/components/date-picker/picker.vue | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 0aeb1c5d..ea564146 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -154,27 +154,7 @@
                 default: () => []
             },
             value: {
-                type: [Date, String, Array],
-                validator(val){
-                    if (Array.isArray(val)){
-                        // check if its empty values
-                        if (isEmptyArray(val)) return true;
-
-                        // check if is time format
-                        if (val[0].match(/^[\d:]+$/) && val[1].match(/^[\d:]+$/)) return true;
-
-                        // check if its valid value
-                        const [start, end] = val.map(v => new Date(v));
-                        return !isNaN(start.getTime()) && !isNaN(end.getTime());
-                    } else {
-                        if (typeof val === 'string') {
-                            val = val.trim();
-                            if (val.match(/^[\d:]+$/)) return true; // time format
-                        }
-                        const date = new Date(val);
-                        return val === '' || val === null || !isNaN(date.getTime());
-                    }
-                }
+                type: [Date, String, Array]
             },
             options: {
                 type: Object,

From 6017ed750953bdc0bfdfad4c30ee872c8f8f0690 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Mon, 5 Feb 2018 07:50:23 +0100
Subject: [PATCH 41/48] update scroll when panel opens

---
 src/components/date-picker/base/time-spinner.vue | 1 -
 src/components/date-picker/panel/panel-mixin.js  | 5 ++++-
 src/components/date-picker/picker.vue            | 3 +++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/date-picker/base/time-spinner.vue b/src/components/date-picker/base/time-spinner.vue
index 07fdd8fd..86d1296d 100644
--- a/src/components/date-picker/base/time-spinner.vue
+++ b/src/components/date-picker/base/time-spinner.vue
@@ -194,7 +194,6 @@
             }
         },
         mounted () {
-            this.updateScroll();
             this.$nextTick(() => this.compiled = true);
         }
     };
diff --git a/src/components/date-picker/panel/panel-mixin.js b/src/components/date-picker/panel/panel-mixin.js
index d227725a..4ce733ad 100644
--- a/src/components/date-picker/panel/panel-mixin.js
+++ b/src/components/date-picker/panel/panel-mixin.js
@@ -41,6 +41,9 @@ export default {
         handleConfirm(visible) {
             this.$emit('on-pick', this.dates, visible);
         },
-
+        onToggleVisibility(open){
+            const timeSpinner = this.$refs.timeSpinner;
+            if (open && timeSpinner) timeSpinner.updateScroll();
+        }
     }
 };
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index ea564146..4c093e8d 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -230,12 +230,15 @@
             handleFocus () {
                 if (this.readonly) return;
                 this.visible = true;
+                this.$refs.pickerPanel.onToggleVisibility(true);
             },
             handleBlur () {
                 this.visible = false;
                 this.onSelectionModeChange(this.type);
                 this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
                 this.reset();
+                this.$refs.pickerPanel.onToggleVisibility(false);
+
             },
             reset(){
                 this.$refs.pickerPanel.reset && this.$refs.pickerPanel.reset();

From 732b32e451fb27c17bc568e2b3f4cbd0d931d3fe Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Mon, 5 Feb 2018 08:44:31 +0100
Subject: [PATCH 42/48] correct wrong spread syntax

---
 src/components/date-picker/picker/time-picker.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/date-picker/picker/time-picker.js b/src/components/date-picker/picker/time-picker.js
index fcc60c0b..f876b5cc 100644
--- a/src/components/date-picker/picker/time-picker.js
+++ b/src/components/date-picker/picker/time-picker.js
@@ -23,10 +23,10 @@ export default {
         },
         ownPickerProps(){
             return {
-                ...this.disabledHours,
-                ...this.disabledMinutes,
-                ...this.disabledSeconds,
-                ...this.hideDisabledOptions,
+                disabledHours: this.disabledHours,
+                disabledMinutes: this.disabledMinutes,
+                disabledSeconds: this.disabledSeconds,
+                hideDisabledOptions: this.hideDisabledOptions
             };
         }
     },

From 29a91fbb6133a937866e81e7b552ee079002a99c Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Mon, 5 Feb 2018 10:01:19 +0100
Subject: [PATCH 43/48] Correct passing of `confirm` prop, correct initial
 values when no value is passed

---
 src/components/date-picker/base/time-spinner.vue  |  6 +++---
 .../date-picker/panel/Date/date-panel-mixin.js    |  4 ----
 .../date-picker/panel/Time/time-range.vue         | 15 +++++++--------
 src/components/date-picker/panel/Time/time.vue    |  9 ++++-----
 src/components/date-picker/panel/panel-mixin.js   |  6 ++++++
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/date-picker/base/time-spinner.vue b/src/components/date-picker/base/time-spinner.vue
index 86d1296d..e4a163c8 100644
--- a/src/components/date-picker/base/time-spinner.vue
+++ b/src/components/date-picker/base/time-spinner.vue
@@ -28,15 +28,15 @@
         props: {
             hours: {
                 type: [Number, String],
-                default: 0
+                default: NaN
             },
             minutes: {
                 type: [Number, String],
-                default: 0
+                default: NaN
             },
             seconds: {
                 type: [Number, String],
-                default: 0
+                default: NaN
             },
             showSeconds: {
                 type: Boolean,
diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js
index 08bc10d8..892ce890 100644
--- a/src/components/date-picker/panel/Date/date-panel-mixin.js
+++ b/src/components/date-picker/panel/Date/date-panel-mixin.js
@@ -5,10 +5,6 @@ import {initTimeDate } from '../../util';
 
 export default {
     props: {
-        confirm: {
-            type: Boolean,
-            default: false
-        },
         showTime: {
             type: Boolean,
             default: false
diff --git a/src/components/date-picker/panel/Time/time-range.vue b/src/components/date-picker/panel/Time/time-range.vue
index bbbbf71e..3eed7f59 100644
--- a/src/components/date-picker/panel/Time/time-range.vue
+++ b/src/components/date-picker/panel/Time/time-range.vue
@@ -10,9 +10,9 @@
                     ref="timeSpinner"
                     :steps="steps"
                     :show-seconds="showSeconds"
-                    :hours="dateStart.getHours()"
-                    :minutes="dateStart.getMinutes()"
-                    :seconds="dateStart.getSeconds()"
+                    :hours="value[0] && dateStart.getHours()"
+                    :minutes="value[0] && dateStart.getMinutes()"
+                    :seconds="value[0] && dateStart.getSeconds()"
                     :disabled-hours="disabledHours"
                     :disabled-minutes="disabledMinutes"
                     :disabled-seconds="disabledSeconds"
@@ -29,9 +29,9 @@
                     ref="timeSpinnerEnd"
                     :steps="steps"
                     :show-seconds="showSeconds"
-                    :hours="dateEnd.getHours()"
-                    :minutes="dateEnd.getMinutes()"
-                    :seconds="dateEnd.getSeconds()"
+                    :hours="value[1] && dateEnd.getHours()"
+                    :minutes="value[1] && dateEnd.getMinutes()"
+                    :seconds="value[1] && dateEnd.getSeconds()"
                     :disabled-hours="disabledHours"
                     :disabled-minutes="disabledMinutes"
                     :disabled-seconds="disabledSeconds"
@@ -87,8 +87,7 @@
                 timePrefixCls: timePrefixCls,
                 showDate: false,
                 dateStart: dateStart || initTimeDate(),
-                dateEnd: dateEnd || initTimeDate(),
-                confirm: false
+                dateEnd: dateEnd || initTimeDate()
             };
         },
         computed: {
diff --git a/src/components/date-picker/panel/Time/time.vue b/src/components/date-picker/panel/Time/time.vue
index 0ae50469..06876787 100644
--- a/src/components/date-picker/panel/Time/time.vue
+++ b/src/components/date-picker/panel/Time/time.vue
@@ -7,9 +7,9 @@
                     ref="timeSpinner"
                     :show-seconds="showSeconds"
                     :steps="steps"
-                    :hours="date.getHours()"
-                    :minutes="date.getMinutes()"
-                    :seconds="date.getSeconds()"
+                    :hours="value[0] && date.getHours()"
+                    :minutes="value[0] && date.getMinutes()"
+                    :seconds="value[0] && date.getSeconds()"
                     :disabled-hours="disabledHours"
                     :disabled-minutes="disabledMinutes"
                     :disabled-seconds="disabledSeconds"
@@ -63,8 +63,7 @@
                 prefixCls: prefixCls,
                 timePrefixCls: timePrefixCls,
                 date: this.value[0] || initTimeDate(),
-                showDate: false,
-                confirm: false
+                showDate: false
             };
         },
         computed: {
diff --git a/src/components/date-picker/panel/panel-mixin.js b/src/components/date-picker/panel/panel-mixin.js
index 4ce733ad..1cf50361 100644
--- a/src/components/date-picker/panel/panel-mixin.js
+++ b/src/components/date-picker/panel/panel-mixin.js
@@ -2,6 +2,12 @@ const prefixCls = 'ivu-picker-panel';
 const datePrefixCls = 'ivu-date-picker';
 
 export default {
+    props: {
+        confirm: {
+            type: Boolean,
+            default: false
+        }
+    },
     methods: {
         iconBtnCls (direction, type = '') {
             return [

From 755693b58b6986754bb50a57ac2c6e84cbb28cb0 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Wed, 7 Feb 2018 09:33:31 +0100
Subject: [PATCH 44/48] update also timeSpinnerEnd's scroll

---
 src/components/date-picker/panel/panel-mixin.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/date-picker/panel/panel-mixin.js b/src/components/date-picker/panel/panel-mixin.js
index 1cf50361..490eaf7f 100644
--- a/src/components/date-picker/panel/panel-mixin.js
+++ b/src/components/date-picker/panel/panel-mixin.js
@@ -48,8 +48,9 @@ export default {
             this.$emit('on-pick', this.dates, visible);
         },
         onToggleVisibility(open){
-            const timeSpinner = this.$refs.timeSpinner;
+            const {timeSpinner, timeSpinnerEnd} = this.$refs;
             if (open && timeSpinner) timeSpinner.updateScroll();
+            if (open && timeSpinnerEnd) timeSpinnerEnd.updateScroll();
         }
     }
 };

From 65ce6cedcbbeefd0b989d69a61ab558ad4823ca5 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Thu, 8 Feb 2018 11:45:08 +0100
Subject: [PATCH 45/48] keep `this.$refs.drop.update();` because of transfer

---
 src/components/date-picker/picker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 4c093e8d..df3d3987 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -373,6 +373,7 @@
                     const input = this.$el.querySelector('input');
                     if (input) input.blur();
                 }
+                this.$refs.drop.update();
                 this.$emit('on-open-change', state);
             },
             value(val) {

From a781ad1a114db7b7c7bdb18f9c316d535839ba04 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Thu, 8 Feb 2018 11:45:51 +0100
Subject: [PATCH 46/48] hide range and selections outside currentMonth

---
 src/components/date-picker/base/date-table.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/date-picker/base/date-table.vue b/src/components/date-picker/base/date-table.vue
index db498250..b1dcd3b5 100644
--- a/src/components/date-picker/base/date-table.vue
+++ b/src/components/date-picker/base/date-table.vue
@@ -73,14 +73,15 @@
 
                 return this.calendar(tableYear, tableMonth, (cell) => {
                     const time = cell.date && clearHours(cell.date);
+                    const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();
                     return {
                         ...cell,
                         type: time === today ? 'today' : cell.type,
-                        selected: selectedDays.includes(time),
+                        selected: dateIsInCurrentMonth && selectedDays.includes(time),
                         disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
-                        range: isRange && isInRange(time, rangeStart, rangeEnd),
-                        start: isRange && time === minDay,
-                        end: isRange && time === maxDay
+                        range: dateIsInCurrentMonth && isRange && isInRange(time, rangeStart, rangeEnd),
+                        start: dateIsInCurrentMonth && isRange && time === minDay,
+                        end: dateIsInCurrentMonth && isRange && time === maxDay
                     };
                 }).cells.slice(this.showWeekNumbers ? 8 : 0);
             }

From e8a990f54f6335c19d8de424b75b0f5e4e27bf86 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Thu, 8 Feb 2018 11:46:10 +0100
Subject: [PATCH 47/48] hide ranges in month and year tables

---
 src/components/date-picker/base/month-table.vue | 5 +----
 src/components/date-picker/base/year-table.vue  | 6 +-----
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/date-picker/base/month-table.vue b/src/components/date-picker/base/month-table.vue
index 62b26b05..4e899196 100644
--- a/src/components/date-picker/base/month-table.vue
+++ b/src/components/date-picker/base/month-table.vue
@@ -12,7 +12,7 @@
     </div>
 </template>
 <script>
-    import { clearHours, isInRange } from '../util';
+    import { clearHours } from '../util';
     import { deepCopy } from '../../../utils/assist';
     import Locale from '../../../mixins/locale';
     import mixin from './mixin';
@@ -37,8 +37,6 @@
                 };
 
                 const tableYear = this.tableDate.getFullYear();
-                const rangeStart = this.rangeState.from && clearHours(new Date(this.rangeState.from.getFullYear(), this.rangeState.from.getMonth(), 1));
-                const rangeEnd = this.rangeState.to && clearHours(new Date(this.rangeState.to.getFullYear(), this.rangeState.to.getMonth(), 1));
                 const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), date.getMonth(), 1)));
 
                 for (let i = 0; i < 12; i++) {
@@ -46,7 +44,6 @@
                     cell.date = new Date(tableYear, i, 1);
                     cell.text = this.tCell(i + 1);
                     const time = clearHours(cell.date);
-                    cell.range = isInRange(time, rangeStart, rangeEnd);
                     cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'month';
                     cell.selected = selectedDays.includes(time);
                     cells.push(cell);
diff --git a/src/components/date-picker/base/year-table.vue b/src/components/date-picker/base/year-table.vue
index 00ab9f5e..d2b8e180 100644
--- a/src/components/date-picker/base/year-table.vue
+++ b/src/components/date-picker/base/year-table.vue
@@ -11,7 +11,7 @@
     </div>
 </template>
 <script>
-    import { clearHours, isInRange } from '../util';
+    import { clearHours } from '../util';
     import { deepCopy } from '../../../utils/assist';
     import mixin from './mixin';
     import prefixCls from './prefixCls';
@@ -38,17 +38,13 @@
                     disabled: false
                 };
 
-                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)));
 
-
                 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);
                 }

From ebf1f86b124d4630ce491e5d95207e760fdfedb3 Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Thu, 8 Feb 2018 11:46:28 +0100
Subject: [PATCH 48/48] show only 1 date in preselecting mode

---
 .../date-picker/panel/Date/date-range.vue       | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 23425094..c72b7885 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -40,7 +40,7 @@
                     :disabled-date="disabledDate"
                     :range-state="rangeState"
                     :show-week-numbers="showWeekNumbers"
-                    :value="dates"
+                    :value="preSelecting.left ? [dates[0]] : dates"
                     @on-change-range="handleChangeRange"
                     @on-pick="panelPickerHandlers.left"
                     @on-pick-click="handlePickClick"
@@ -79,7 +79,7 @@
                     :range-state="rangeState"
                     :disabled-date="disabledDate"
                     :show-week-numbers="showWeekNumbers"
-                    :value="dates"
+                    :value="preSelecting.right ? [dates[dates.length - 1]] : dates"
                     @on-change-range="handleChangeRange"
                     @on-pick="panelPickerHandlers.right"
                     @on-pick-click="handlePickClick"></component>
@@ -184,11 +184,18 @@
             timeDisabled(){
                 return !(this.dates[0] && this.dates[1]);
             },
-            panelPickerHandlers(){
+            preSelecting(){
                 const tableType = `${this.currentView}-table`;
+
                 return {
-                    left: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'left'),
-                    right: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'right'),
+                    left: this.leftPickerTable !== tableType,
+                    right: this.rightPickerTable !== tableType,
+                };
+            },
+            panelPickerHandlers(){
+                return {
+                    left: this.preSelecting.left ? this.handlePreSelection.bind(this, 'left') : this.handleRangePick,
+                    right: this.preSelecting.right ? this.handlePreSelection.bind(this, 'right') : this.handleRangePick,
                 };
             }
         },