vxe-pc-ui 3.15.23 → 3.15.25

package/es/date-range-picker/src/date-range-picker.js

@@ -3,13 +3,34 @@ import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, commands, globalEvents, createEvent, GLOBAL_EVENT_KEYS, globalMixins, renderEmptyElement } from '../../ui';
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
 import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom';
-import { parseDateString, parseDateObj, getRangeDateByCode, handleValueFormat, hasTimestampValueType, hasDateValueType, parseDateValue } from '../../date-panel/src/util';
+import { parseDateString, parseDateObj, getRangeDateByCode, handleValueFormat, hasTimestampValueType, hasDateValueType, parseDateValue, getNextMonth, getPrevMonth, getNextYear, getPrevYear } from '../../date-panel/src/util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { createComponentLog } from '../../ui/src/log';
 import VxeDatePanelComponent from '../../date-panel/src/date-panel';
 import VxeButtonComponent from '../../button/src/button';
 import VxeButtonGroupComponent from '../../button/src/button-group';
 const { errLog } = createComponentLog('date-range-picker');
+function createReactData() {
+    return {
+        initialized: false,
+        panelIndex: 0,
+        visiblePanel: false,
+        isAniVisible: false,
+        panelStyle: {},
+        panelPlacement: '',
+        isActivated: false,
+        selectStValue: '',
+        selectEdValue: '',
+        paneStartVal: [],
+        paneEndVal: []
+    };
+}
+function createInternalData() {
+    return {
+    // selectStatus: false
+    // hpTimeout: undefined
+    };
+}
 export default {
     name: 'VxeDateRangePicker',
     mixins: [
@@ -150,26 +171,9 @@ export default {
     },
     data() {
         const xID = XEUtils.uniqueId();
-        const reactData = {
-            initialized: false,
-            panelIndex: 0,
-            visiblePanel: false,
-            isAniVisible: false,
-            panelStyle: {},
-            panelPlacement: '',
-            isActivated: false,
-            startValue: '',
-            endValue: ''
-        };
-        const internalData = {
-        // selectStatus: false
-        // hpTimeout: undefined
-        };
-        return {
-            xID,
-            reactData,
-            internalData
-        };
+        const reactData = createReactData();
+        return Object.assign(Object.assign({}, {}), { xID,
+            reactData });
     },
     computed: Object.assign(Object.assign({}, {}), { computeBtnTransfer() {
             const $xeDateRangePicker = this;
@@ -256,11 +260,18 @@ export default {
             const { startValue, endValue } = props;
             return `${startValue || ''}${endValue || ''}`;
         },
-        computeIsDateTimeType() {
+        computeIsTimeType() {
+            const $xeDateRangePicker = this;
+            const props = $xeDateRangePicker;
+            const { type } = props;
+            return type === 'time';
+        },
+        computeIsTimeOrDateTimeType() {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
             const { type } = props;
-            return type === 'time' || type === 'datetime';
+            const isTimeType = $xeDateRangePicker.computeIsTimeType;
+            return isTimeType || type === 'datetime';
         },
         computeIsDatePickerType() {
             const $xeDateRangePicker = this;
@@ -340,8 +351,8 @@ export default {
         computePanelLabelObj() {
             const $xeDateRangePicker = this;
             const reactData = $xeDateRangePicker.reactData;
-            const { startValue, endValue } = reactData;
-            const vals = startValue || endValue ? [startValue || '', endValue || ''] : [];
+            const { selectStValue, selectEdValue } = reactData;
+            const vals = selectStValue || selectEdValue ? [selectStValue || '', selectEdValue || ''] : [];
             return $xeDateRangePicker.formatRangeLabel(vals);
         },
         computeInputLabel() {
@@ -465,7 +476,7 @@ export default {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
             const reactData = $xeDateRangePicker.reactData;
-            const { value: modelValue, startValue, endValue } = props;
+            const { value: modelValue, startValue, endValue, valueFormat } = props;
             let restObj = {
                 sValue: '',
                 eValue: ''
@@ -486,15 +497,27 @@ export default {
                     restObj = $xeDateRangePicker.paraeUpdateModel();
                 }
             }
-            reactData.startValue = restObj.sValue;
-            reactData.endValue = restObj.eValue;
+            let startRest = restObj.sValue;
+            let endRest = restObj.eValue;
+            if (valueFormat === 'timestamp') {
+                if (XEUtils.isString(startRest) && /^\d+$/.test(startRest)) {
+                    startRest = Number(startRest);
+                }
+                if (XEUtils.isString(endRest) && /^\d+$/.test(endRest)) {
+                    endRest = Number(endRest);
+                }
+            }
+            reactData.selectStValue = startRest;
+            reactData.selectEdValue = endRest;
+            reactData.paneEndVal = [startRest, endRest];
+            reactData.paneStartVal = [startRest, endRest];
         },
         triggerEvent(evnt) {
             const $xeDateRangePicker = this;
             const reactData = $xeDateRangePicker.reactData;
-            const { startValue, endValue } = reactData;
-            const value = $xeDateRangePicker.getRangeValue(startValue, endValue);
-            $xeDateRangePicker.dispatchEvent(evnt.type, { value, startValue, endValue }, evnt);
+            const { selectStValue, selectEdValue } = reactData;
+            const value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
+            $xeDateRangePicker.dispatchEvent(evnt.type, { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
         },
         handleChange(sValue, eValue, evnt) {
             const $xeDateRangePicker = this;
@@ -524,8 +547,8 @@ export default {
                     endRest = parseDateValue(endRest, type, { valueFormat: dateValueFormat });
                 }
             }
-            reactData.startValue = startRest;
-            reactData.endValue = endRest;
+            reactData.selectStValue = startRest;
+            reactData.selectEdValue = endRest;
             const value = $xeDateRangePicker.getRangeValue(startRest, endRest);
             const isFinish = (startRest && endRest) || (!startRest && !endRest);
             $xeDateRangePicker.$emit('update:modelValue', value);
@@ -565,9 +588,9 @@ export default {
             const reactData = $xeDateRangePicker.reactData;
             const isDisabled = $xeDateRangePicker.computeIsDisabled;
             if (!isDisabled) {
-                const { startValue, endValue } = reactData;
-                const value = $xeDateRangePicker.getRangeValue(startValue, endValue);
-                $xeDateRangePicker.dispatchEvent('prefix-click', { value, startValue, endValue }, evnt);
+                const { selectStValue, selectEdValue } = reactData;
+                const value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
+                $xeDateRangePicker.dispatchEvent('prefix-click', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
             }
         },
         hidePanel() {
@@ -608,8 +631,8 @@ export default {
         panelCellClassName({ date }) {
             const $xeDateRangePicker = this;
             const reactData = $xeDateRangePicker.reactData;
-            const startValue = reactData.startValue;
-            const endValue = reactData.endValue;
+            const startValue = reactData.selectStValue;
+            const endValue = reactData.selectEdValue;
             if (startValue && endValue) {
                 const currTime = date.getTime();
                 const startTime = XEUtils.toStringDate(startValue).getTime();
@@ -626,18 +649,18 @@ export default {
             const reactData = $xeDateRangePicker.reactData;
             const internalData = $xeDateRangePicker.internalData;
             const { autoClose } = props;
-            const { startValue, endValue } = reactData;
+            const { selectStValue, selectEdValue } = reactData;
             const { selectStatus } = internalData;
             const isDatePickerType = $xeDateRangePicker.computeIsDatePickerType;
             if (autoClose) {
                 if (selectStatus && isDatePickerType) {
-                    if (startValue && endValue) {
+                    if (selectStValue && selectEdValue) {
                         $xeDateRangePicker.hidePanel();
                     }
                 }
             }
             else {
-                if (startValue && endValue) {
+                if (selectStValue && selectEdValue) {
                     internalData.selectStatus = false;
                 }
             }
@@ -647,9 +670,9 @@ export default {
             const reactData = $xeDateRangePicker.reactData;
             const isDisabled = $xeDateRangePicker.computeIsDisabled;
             if (!isDisabled) {
-                const { startValue, endValue } = reactData;
-                const value = $xeDateRangePicker.getRangeValue(startValue, endValue);
-                $xeDateRangePicker.dispatchEvent('suffix-click', { value, startValue, endValue }, evnt);
+                const { selectStValue, selectEdValue } = reactData;
+                const value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
+                $xeDateRangePicker.dispatchEvent('suffix-click', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
             }
         },
         blurEvent(evnt) {
@@ -657,16 +680,16 @@ export default {
             const reactData = $xeDateRangePicker.reactData;
             const $xeForm = $xeDateRangePicker.$xeForm;
             const formItemInfo = $xeDateRangePicker.formItemInfo;
-            const { startValue, endValue } = reactData;
+            const { selectStValue, selectEdValue } = reactData;
             const inpImmediate = $xeDateRangePicker.computeInpImmediate;
             const value = '';
             if (!inpImmediate) {
-                $xeDateRangePicker.handleChange(startValue, endValue, evnt);
+                $xeDateRangePicker.handleChange(selectStValue, selectEdValue, evnt);
             }
             if (!reactData.visiblePanel) {
                 reactData.isActivated = false;
             }
-            $xeDateRangePicker.dispatchEvent('blur', { value, startValue, endValue }, evnt);
+            $xeDateRangePicker.dispatchEvent('blur', { value, startValue: selectStValue, endValue: selectEdValue }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -682,12 +705,17 @@ export default {
         },
         confirmEvent(evnt) {
             const $xeDateRangePicker = this;
+            const isTimeType = $xeDateRangePicker.computeIsTimeType;
             const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
             const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
             if ($startDatePanel && $endDatePanel) {
                 const startValue = $startDatePanel.getModelValue();
                 const endValue = $endDatePanel.getModelValue();
-                if ((startValue && !endValue) || (!startValue && endValue)) {
+                if (isTimeType) {
+                    $startDatePanel.confirmByEvent(evnt);
+                    $endDatePanel.confirmByEvent(evnt);
+                }
+                else if ((startValue && !endValue) || (!startValue && endValue)) {
                     $xeDateRangePicker.handleChange('', '', evnt);
                 }
                 else {
@@ -704,22 +732,36 @@ export default {
             const reactData = $xeDateRangePicker.reactData;
             const internalData = $xeDateRangePicker.internalData;
             const { selectStatus } = internalData;
-            const { value, $event } = params;
-            const endValue = selectStatus ? reactData.endValue : '';
-            $xeDateRangePicker.handleChange(value, endValue, $event);
+            const { value, currValue, $event } = params;
+            const paneVals = value ? (XEUtils.isString(value) ? value.split(',') : [value]) : [];
+            let startValue = '';
+            let endValue = '';
+            if (selectStatus) {
+                startValue = paneVals[0];
+                if (paneVals[1]) {
+                    endValue = paneVals[1];
+                }
+                else {
+                    endValue = reactData.selectEdValue;
+                }
+            }
+            else {
+                startValue = currValue || XEUtils.last(paneVals);
+            }
+            reactData.paneEndVal = [startValue, endValue];
+            reactData.paneStartVal = [startValue, endValue];
+            $xeDateRangePicker.handleChange(startValue, endValue, $event);
             $xeDateRangePicker.handleSelectClose();
-            if (!selectStatus) {
+            if (selectStatus) {
+                if (startValue && endValue) {
+                    internalData.selectStatus = false;
+                }
+            }
+            else {
                 internalData.selectStatus = true;
             }
             $xeDateRangePicker.$nextTick(() => {
-                const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-                const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-                if ($startDatePanel && $endDatePanel) {
-                    const startValue = $startDatePanel.getModelValue();
-                    if (!endValue && startValue) {
-                        $endDatePanel.setPanelDate(XEUtils.toStringDate(startValue));
-                    }
-                }
+                $xeDateRangePicker.handleUpdateStartPanelDate();
             });
         },
         endPanelChangeEvent(params) {
@@ -727,91 +769,200 @@ export default {
             const reactData = $xeDateRangePicker.reactData;
             const internalData = $xeDateRangePicker.internalData;
             const { selectStatus } = internalData;
-            const { value, $event } = params;
-            const startValue = selectStatus ? reactData.startValue : '';
-            $xeDateRangePicker.handleChange(startValue, value, $event);
+            const { value, currValue, $event } = params;
+            const paneVals = value ? (XEUtils.isString(value) ? value.split(',') : [value]) : [];
+            let startValue = '';
+            let endValue = '';
+            if (selectStatus) {
+                endValue = paneVals[0];
+                if (paneVals[1]) {
+                    startValue = paneVals[0];
+                    endValue = paneVals[1];
+                }
+                else {
+                    startValue = reactData.selectStValue;
+                }
+            }
+            else {
+                endValue = currValue || XEUtils.last(paneVals);
+            }
+            reactData.paneEndVal = [startValue, endValue];
+            reactData.paneStartVal = [startValue, endValue];
+            $xeDateRangePicker.handleChange(startValue, endValue, $event);
             $xeDateRangePicker.handleSelectClose();
-            if (!selectStatus) {
+            if (selectStatus) {
+                if (startValue && endValue) {
+                    internalData.selectStatus = false;
+                }
+            }
+            else {
                 internalData.selectStatus = true;
             }
             $xeDateRangePicker.$nextTick(() => {
-                const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-                const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-                if ($startDatePanel && $endDatePanel) {
-                    const endValue = $endDatePanel.getModelValue();
-                    if (!startValue && endValue) {
-                        $startDatePanel.setPanelDate(XEUtils.toStringDate(endValue));
+                $xeDateRangePicker.handleUpdateEndPanelDate();
+            });
+        },
+        handleUpdateStartPanelDate() {
+            const $xeDateRangePicker = this;
+            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+            if (!$startDatePanel || !$endDatePanel) {
+                return;
+            }
+            const startPanelDate = $startDatePanel.getPanelDate();
+            const endPanelDate = $endDatePanel.getPanelDate();
+            if (!startPanelDate || !endPanelDate) {
+                return;
+            }
+            const viewType = $startDatePanel.getViewType();
+            const startYear = startPanelDate.getFullYear();
+            const startMonth = startPanelDate.getMonth();
+            const endYear = endPanelDate.getFullYear();
+            const endMonth = endPanelDate.getMonth();
+            switch (viewType) {
+                case 'day':
+                case 'date':
+                case 'week': {
+                    if (endYear <= startYear && endMonth <= startMonth) {
+                        $endDatePanel.setPanelDate(getNextMonth(startPanelDate));
                     }
+                    break;
                 }
-            });
+                case 'month':
+                case 'quarter': {
+                    if (endYear <= startYear) {
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate));
+                    }
+                    break;
+                }
+                case 'year': {
+                    const yearList = $startDatePanel.computeYearList;
+                    if (yearList.some((item) => XEUtils.isDateSame(item.date, endPanelDate, 'yyyy'))) {
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate, yearList.length));
+                    }
+                    break;
+                }
+            }
         },
-        startPanelDateBtnChangeEvent(params) {
+        startPanelDateBtnChangeEvent() {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
             const { linkedPanels } = props;
+            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+            if (!$startDatePanel || !$endDatePanel) {
+                return;
+            }
+            const startPanelDate = $startDatePanel.getPanelDate();
+            const endPanelDate = $endDatePanel.getPanelDate();
+            if (!startPanelDate || !endPanelDate) {
+                return;
+            }
+            const viewType = $startDatePanel.getViewType();
             if (linkedPanels) {
-                const { viewType } = params;
-                const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-                const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-                if (!$startDatePanel || !$endDatePanel) {
-                    return;
-                }
-                const startPanelDate = $startDatePanel.getPanelDate();
-                if (!startPanelDate) {
-                    return;
-                }
-                const endYear = startPanelDate.getFullYear();
-                const endMonth = startPanelDate.getMonth();
                 switch (viewType) {
                     case 'day':
                     case 'date':
                     case 'week': {
-                        if (endMonth < 11) {
-                            startPanelDate.setMonth(endMonth + 1);
-                        }
-                        else {
-                            startPanelDate.setFullYear(endYear + 1);
-                            startPanelDate.setMonth(0);
-                        }
-                        $endDatePanel.setPanelDate(startPanelDate);
+                        $endDatePanel.setPanelDate(getNextMonth(startPanelDate));
+                        break;
+                    }
+                    case 'month':
+                    case 'quarter': {
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate));
+                        break;
+                    }
+                    case 'year': {
+                        const yearList = $startDatePanel.computeYearList;
+                        $endDatePanel.setPanelDate(getNextYear(startPanelDate, yearList.length));
                         break;
                     }
                 }
             }
+            else {
+                $xeDateRangePicker.handleUpdateStartPanelDate();
+            }
+        },
+        handleUpdateEndPanelDate() {
+            const $xeDateRangePicker = this;
+            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+            if (!$startDatePanel || !$endDatePanel) {
+                return;
+            }
+            const startPanelDate = $startDatePanel.getPanelDate();
+            const endPanelDate = $endDatePanel.getPanelDate();
+            if (!startPanelDate || !endPanelDate) {
+                return;
+            }
+            const viewType = $endDatePanel.getViewType();
+            const startYear = startPanelDate.getFullYear();
+            const startMonth = startPanelDate.getMonth();
+            const endYear = endPanelDate.getFullYear();
+            const endMonth = endPanelDate.getMonth();
+            switch (viewType) {
+                case 'day':
+                case 'date':
+                case 'week': {
+                    if (startYear >= endYear && startMonth >= endMonth) {
+                        $startDatePanel.setPanelDate(getPrevMonth(endPanelDate));
+                    }
+                    break;
+                }
+                case 'month':
+                case 'quarter': {
+                    if (startYear >= endYear) {
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate));
+                    }
+                    break;
+                }
+                case 'year': {
+                    const yearList = $endDatePanel.computeYearList;
+                    if (yearList.some((item) => XEUtils.isDateSame(item.date, startPanelDate, 'yyyy'))) {
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate, yearList.length));
+                    }
+                    break;
+                }
+            }
         },
-        endPanelDateBtnChangeEvent(params) {
+        endPanelDateBtnChangeEvent() {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
             const { linkedPanels } = props;
+            const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+            const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+            if (!$startDatePanel || !$endDatePanel) {
+                return;
+            }
+            const startPanelDate = $startDatePanel.getPanelDate();
+            const endPanelDate = $endDatePanel.getPanelDate();
+            if (!startPanelDate || !endPanelDate) {
+                return;
+            }
+            const viewType = $endDatePanel.getViewType();
             if (linkedPanels) {
-                const { viewType } = params;
-                const $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-                const $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-                if (!$startDatePanel || !$endDatePanel) {
-                    return;
-                }
-                const endPanelDate = $endDatePanel.getPanelDate();
-                if (!endPanelDate) {
-                    return;
-                }
-                const endYear = endPanelDate.getFullYear();
-                const endMonth = endPanelDate.getMonth();
                 switch (viewType) {
                     case 'day':
                     case 'date':
                     case 'week': {
-                        if (endMonth) {
-                            endPanelDate.setMonth(endMonth - 1);
-                        }
-                        else {
-                            endPanelDate.setFullYear(endYear - 1);
-                            endPanelDate.setMonth(11);
-                        }
-                        $startDatePanel.setPanelDate(endPanelDate);
+                        $startDatePanel.setPanelDate(getPrevMonth(endPanelDate));
+                        break;
+                    }
+                    case 'month':
+                    case 'quarter': {
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate));
+                        break;
+                    }
+                    case 'year': {
+                        const yearList = $endDatePanel.computeYearList;
+                        $startDatePanel.setPanelDate(getPrevYear(endPanelDate, yearList.length));
                         break;
                     }
                 }
             }
+            else {
+                $xeDateRangePicker.handleUpdateEndPanelDate();
+            }
         },
         // 全局事件
         handleGlobalMousedownEvent(evnt) {
@@ -960,6 +1111,7 @@ export default {
                 reactData.isAniVisible = true;
                 setTimeout(() => {
                     reactData.visiblePanel = true;
+                    $xeDateRangePicker.handleUpdateStartPanelDate();
                     $xeDateRangePicker.updatePlacement();
                 }, 10);
                 $xeDateRangePicker.updateZindex();
@@ -1002,8 +1154,8 @@ export default {
             const shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
             const { autoClose } = shortcutOpts;
             const { code, clickMethod } = option;
-            let startValue = reactData.startValue;
-            let endValue = reactData.endValue;
+            let startValue = reactData.selectStValue;
+            let endValue = reactData.selectEdValue;
             let value = $xeDateRangePicker.getRangeValue(startValue, endValue);
             const shortcutParams = {
                 $dateRangePicker: $xeDateRangePicker,
@@ -1063,8 +1215,8 @@ export default {
         setModelValue(startValue, endValue) {
             const $xeDateRangePicker = this;
             const reactData = $xeDateRangePicker.reactData;
-            reactData.startValue = startValue || '';
-            reactData.endValue = endValue || '';
+            reactData.selectStValue = startValue || '';
+            reactData.selectEdValue = endValue || '';
             const value = $xeDateRangePicker.getRangeValue(startValue, endValue);
             $xeDateRangePicker.emitModel(value);
         },
@@ -1132,15 +1284,16 @@ export default {
             if (popupOpts.enabled === false) {
                 return renderEmptyElement($xeDateRangePicker);
             }
-            const { type, separator, autoClose, showConfirmButton, showClearButton } = props;
-            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, startValue, endValue } = reactData;
+            const { type, separator, autoClose, valueFormat, showConfirmButton, showClearButton } = props;
+            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, selectStValue, selectEdValue, paneStartVal, paneEndVal } = reactData;
             const vSize = $xeDateRangePicker.computeSize;
             const btnTransfer = $xeDateRangePicker.computeBtnTransfer;
             const shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
             const isClearable = $xeDateRangePicker.computeIsClearable;
             const panelLabelObj = $xeDateRangePicker.computePanelLabelObj;
             const shortcutList = $xeDateRangePicker.computeShortcutList;
-            const isDateTimeType = $xeDateRangePicker.computeIsDateTimeType;
+            const isTimeType = $xeDateRangePicker.computeIsTimeType;
+            const isTimeOrDateTimeType = $xeDateRangePicker.computeIsTimeOrDateTimeType;
             const defaultDates = $xeDateRangePicker.computeDefaultDates;
             const defaultTimes = $xeDateRangePicker.computeDefaultTimes;
             const timeOpts = $xeDateRangePicker.computeTimeOpts;
@@ -1156,7 +1309,7 @@ export default {
             const [sdDate, edDate] = defaultDates;
             const [sdTime, edTime] = defaultTimes;
             const hasShortcutBtn = shortcutList.length > 0;
-            const showConfirmBtn = (showConfirmButton === null ? (isDateTimeType || !autoClose) : showConfirmButton);
+            const showConfirmBtn = (showConfirmButton === null ? (isTimeOrDateTimeType || !autoClose) : showConfirmButton);
             const showClearBtn = (showClearButton === null ? isClearable : showClearButton);
             return h('div', {
                 ref: 'refInputPanel',
@@ -1209,15 +1362,18 @@ export default {
                                     h(VxeDatePanelComponent, {
                                         ref: 'refStartDatePanel',
                                         props: {
-                                            value: startValue,
+                                            value: paneStartVal,
+                                            multiple: !isTimeType,
+                                            valueSort: true,
+                                            limitCount: 3,
+                                            defaultMode: 'first',
                                             type: props.type,
                                             className: props.className,
                                             minDate: props.minDate,
                                             maxDate: props.maxDate,
-                                            endDate: endValue,
                                             startDay: props.startDay,
                                             labelFormat: props.labelFormat,
-                                            valueFormat: props.valueFormat,
+                                            valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
                                             timeFormat: props.timeFormat,
                                             defaultDate: sdDate,
                                             defaultTime: sdTime,
@@ -1237,15 +1393,18 @@ export default {
                                     h(VxeDatePanelComponent, {
                                         ref: 'refEndDatePanel',
                                         props: {
-                                            value: endValue,
+                                            value: paneEndVal,
+                                            multiple: !isTimeType,
+                                            valueSort: true,
+                                            limitCount: 3,
+                                            defaultMode: 'last',
                                             type: props.type,
                                             className: props.className,
                                             minDate: props.minDate,
                                             maxDate: props.maxDate,
-                                            startDate: startValue,
                                             startDay: props.startDay,
                                             labelFormat: props.labelFormat,
-                                            valueFormat: props.valueFormat,
+                                            valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
                                             timeFormat: props.timeFormat,
                                             defaultDate: edDate,
                                             defaultTime: edTime,
@@ -1285,7 +1444,7 @@ export default {
                                             ? h(VxeButtonComponent, {
                                                 props: {
                                                     size: 'mini',
-                                                    disabled: !(startValue || endValue),
+                                                    disabled: !(selectStValue || selectEdValue),
                                                     content: getI18n('vxe.button.clear')
                                                 },
                                                 on: {
@@ -1354,13 +1513,13 @@ export default {
             const slots = $xeDateRangePicker.$scopedSlots;
             const reactData = $xeDateRangePicker.reactData;
             const { suffixIcon } = props;
-            const { startValue, endValue } = reactData;
+            const { selectStValue, selectEdValue } = reactData;
             const suffixSlot = slots.suffix;
             const isDisabled = $xeDateRangePicker.computeIsDisabled;
             const isClearable = $xeDateRangePicker.computeIsClearable;
             return h('div', {
                 class: ['vxe-date-range-picker--suffix', {
-                        'is--clear': isClearable && !isDisabled && (startValue || endValue)
+                        'is--clear': isClearable && !isDisabled && (selectStValue || selectEdValue)
                     }]
             }, [
                 isClearable
@@ -1410,7 +1569,7 @@ export default {
             const props = $xeDateRangePicker;
             const reactData = $xeDateRangePicker.reactData;
             const { className, type, name, autoComplete } = props;
-            const { startValue, endValue, visiblePanel, isActivated } = reactData;
+            const { selectStValue, selectEdValue, visiblePanel, isActivated } = reactData;
             const vSize = $xeDateRangePicker.computeSize;
             const isDisabled = $xeDateRangePicker.computeIsDisabled;
             const formReadonly = $xeDateRangePicker.computeFormReadonly;
@@ -1434,7 +1593,7 @@ export default {
                         'is--visible': visiblePanel,
                         'is--disabled': isDisabled,
                         'is--active': isActivated,
-                        'show--clear': isClearable && !isDisabled && (startValue || endValue)
+                        'show--clear': isClearable && !isDisabled && (selectStValue || selectEdValue)
                     }],
                 attrs: {
                     spellcheck: false
@@ -1486,6 +1645,7 @@ export default {
     },
     created() {
         const $xeDateRangePicker = this;
+        $xeDateRangePicker.internalData = createInternalData();
         $xeDateRangePicker.updateModelValue(true);
         globalEvents.on($xeDateRangePicker, 'mousewheel', $xeDateRangePicker.handleGlobalMousewheelEvent);
         globalEvents.on($xeDateRangePicker, 'mousedown', $xeDateRangePicker.handleGlobalMousedownEvent);
@@ -1499,6 +1659,8 @@ export default {
     },
     beforeDestroy() {
         const $xeDateRangePicker = this;
+        const reactData = $xeDateRangePicker.reactData;
+        const internalData = $xeDateRangePicker.internalData;
         const panelElem = $xeDateRangePicker.$refs.refInputPanel;
         if (panelElem && panelElem.parentNode) {
             panelElem.parentNode.removeChild(panelElem);
@@ -1508,6 +1670,8 @@ export default {
         globalEvents.off($xeDateRangePicker, 'mousedown');
         globalEvents.off($xeDateRangePicker, 'blur');
         globalEvents.off($xeDateRangePicker, 'resize');
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
     },
     render(h) {
         return this.renderVN(h);