refactor Datepicker

refactor Datepicker  to render subcomponents in template instead of
creating new Vue instances

src/components/date-picker/base/date-table.vue

@@ -1,88 +1,40 @@
 <template>
-    <div
+    <div :class="classes">
-        :class="classes"
-        @mousemove="handleMouseMove">
         <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: {},
+            /* more props in mixin */
-            year: {},
-            month: {},
-            selectionMode: {
-                default: 'day'
-            },
-            disabledDate: {},
-            minDate: {},
-            maxDate: {},
-            rangeState: {
-                default () {
-                    return {
-                        endDate: null,
-                        selecting: false
-                    };
-                }
-            },
-            value: ''
         },
         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 () {
+            readCells () {
-                const date = new Date(this.year, this.month, 1);
+                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 selectedDays = this.dates.filter(Boolean).map(clearHours);    // timestamp of selected days
-                const minDay = clearHours(new Date(this.minDate));
+                const [minDay, maxDay] = this.dates.map(clearHours);
-                const maxDay = clearHours(new Date(this.maxDate));
+                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;
+                    if (this.selectionMode === 'range'){
-                    cell.start = this.minDate && time === minDay;
+                        cell.range = isInRange(time, rangeStart, rangeEnd);
-                    cell.end = this.maxDate && time === maxDay;
+                        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`,

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);
+        },
+    }
+};

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>

src/components/date-picker/base/prefixCls.js

@@ -0,0 +1,2 @@
+
+export default 'ivu-date-picker-cells';

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: initialValue,
-                internalValue: '',
                 disableClickOutSide: false,    // fixed when click a date,trigger clickoutside to close picker
-                disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭
+                disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭,
-                currentValue: this.value
+                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') {
+                const bottomPlaced = this.placement.match(/^bottom/);
-                    return 'slide-up';
+                return bottomPlaced ? 'slide-up' : 'slide-down';
-                } else {
-                    return 'slide-down';
-                }
             },
-            selectionMode() {
+            visualValue() {
-                if (this.type === 'month') {
-                    return 'month';
-                } else if (this.type === 'year') {
-                    return 'year';
-                }
-
-                return 'day';
-            },
-            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);
             },
-
+            isConfirm(){
-                set (value) {
+                return this.confirm || this.type === 'datetime' || this.type === 'datetimerange';
-                    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;
-                }
             }
         },
         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 = '';
+                if (newValue !== oldValue) {
-                let correctDate = '';
+                    this.emitChange();
-                const type = this.type;
+                    this.internalValue = this.formatDate(newValue);
-                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);
-                }
-
-                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,115 +352,73 @@
             },
             handleClear () {
                 this.visible = false;
-                this.internalValue = '';
+                this.internalValue = this.internalValue.map(() => null);
-                this.currentValue = '';
                 this.$emit('on-clear');
                 this.dispatch('FormItem', 'on-form-change', '');
-                // #2215，当初始设置了 value，直接点 clear，这时 this.picker 还没有加载
+                this.emitChange();
-                if (!this.picker) {
+
-                    this.emitChange('');
+                setTimeout(
-                }
+                    () => this.onSelectionModeChange(this.type),
+                    500 // delay to improve dropdown close visual effect
+                );
             },
-            showPicker () {
+            emitChange () {
-                if (!this.picker) {
+                this.$emit('on-change', this.publicValue);
-                    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);
                 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 parser = (
-                const formatter = (
                     TYPE_VALUE_RESOLVER_MAP[type] ||
                     TYPE_VALUE_RESOLVER_MAP['default']
-                ).formatter;
+                ).parser;
 
-                let newDate = formatter(date, format);
+                if (val && type === 'time' && !(val instanceof Date)) {
-                if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
+                    val = parser(val, this.format || DEFAULT_FORMATS[type]);
-                    newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
+                } 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
                     }
-                return newDate;
+                } else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
+                    val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
                 }
+                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) {
+            visible (state) {
-                if (val) {
+                if (state === false){
-                    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);
                     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) {
+            value(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] ||
@@ -526,20 +436,12 @@
 
                 this.internalValue = val;
                 this.$emit('input', val);
-                }
             },
             open (val) {
-                if (val === true) {
+                this.visible = val === true;
-                    this.visible = val;
-                    this.$emit('on-open-change', true);
-                } else if (val === false) {
-                    this.$emit('on-open-change', false);
-                }
-            }
             },
-        beforeDestroy () {
+            type(type){
-            if (this.picker) {
+                this.onSelectionModeChange(type);
-                this.picker.$destroy();
             }
         },
         mounted () {

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 DatePickerPanel from '../panel/Date/date.vue';
-import DateRangePanel from '../panel/date-range.vue';
+import RangeDatePickerPanel from '../panel/Date/date-range.vue';
-
-const getPanel = function (type) {
-    if (type === 'daterange' || type === 'datetimerange') {
-        return DateRangePanel;
-    }
-    return DatePanel;
-};
 
 import { oneOf } from '../../../utils/assist';
 
@@ -21,19 +13,18 @@ export default {
             },
             default: 'date'
         },
-        value: {}
     },
-    watch: {
+    components: { DatePickerPanel, RangeDatePickerPanel },
-        type(value){
+    computed: {
-            const typeMap = {
+        panel(){
-                year: 'year',
+            const isRange =  this.type === 'daterange' || this.type === 'datetimerange';
-                month: 'month',
+            return isRange ? 'RangeDatePickerPanel' : 'DatePickerPanel';
-                date: 'day'
+        },
-            };
+        ownPickerProps(){
-            const validType = oneOf(value, Object.keys(typeMap));
+            return {};
-            if (validType) this.Panel.selectionMode = typeMap[value];
         }
     },
+/*
     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);
     }
+*/
 };

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 TimePickerPanel from '../panel/Time/time.vue';
-import TimeRangePanel from '../panel/time-range.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: {}
+    computed: {
+        panel(){
+            const isRange =  this.type === 'timerange';
+            return isRange ? 'RangeTimePickerPanel' : 'TimePickerPanel';
         },
-    created () {
+        ownPickerProps(){
-        if (!this.currentValue) {
+            return {
-            if (this.type === 'timerange') {
+                ...this.disabledHours,
-                this.currentValue = ['',''];
+                ...this.disabledMinutes,
-            } else {
+                ...this.disabledSeconds,
-                this.currentValue = '';
+                ...this.hideDisabledOptions,
-            }
+            };
-        }
-        const Panel = Vue.extend(getPanel(this.type));
-        this.Panel = new Panel({
-            propsData: {
-                steps: this.steps
-            }
-        });
         }
+    },
 };