refactor Datepicker

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

refactor Datepicker
refactor Datepicker to render subcomponents in template instead of creating new Vue instances
Sergio Crisostomo
1 parent 0b51803b
Showing 7 changed files with 332 additions and 439 deletions Show diff stats
src/components/date-picker/base/date-table.vue
src/components/date-picker/base/mixin.js
src/components/date-picker/base/month-table.vue
src/components/date-picker/base/prefixCls.js
src/components/date-picker/picker.vue
src/components/date-picker/picker/date-picker.js
src/components/date-picker/picker/time-picker.js
 <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`,
+
+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
+<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>
+
+export default 'ivu-date-picker-cells';
 \ No newline at end of file
@@ -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';
-            },
-            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;
-                }
+                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(){
+                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;
-
-                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;
-                    }
+                const newValue = event.target.value;
-                    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('');
-                }
-            },
-            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;
+                this.emitChange();
-                    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();
+                setTimeout(
+                    () => this.onSelectionModeChange(this.type),
+                    500 // delay to improve dropdown close visual effect
+                );
             },
-            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 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];
                 }
-                return newDate;
+
+                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();
+            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.$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;
-
-                    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);
-                }
+                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 () {
-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);
     }
+*/
 };
-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
-            }
-        });
-    }
+    },
 };