vxe-pc-ui 3.15.22 → 3.15.24

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 } from '../../date-panel/src/util';
+import { parseDateString, parseDateObj, getRangeDateByCode, handleValueFormat, hasTimestampValueType, hasDateValueType, parseDateValue, getPrevMonth, getNextMonth } 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;
@@ -340,8 +344,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() {
@@ -399,8 +403,8 @@ export default {
         getRangeValue(sValue, eValue) {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
-            const { value: modelValue, valueType } = props;
-            let isArr = XEUtils.isArray(modelValue);
+            const { value: modelValue, valueType, valueFormat } = props;
+            let isArr = valueFormat === 'date' || XEUtils.isArray(modelValue);
             if (valueType) {
                 switch (valueType) {
                     case 'array':
@@ -412,7 +416,7 @@ export default {
                 }
             }
             if (sValue || eValue) {
-                const rest = [sValue || '', eValue || ''];
+                const rest = [sValue || null, eValue || null];
                 if (isArr) {
                     return rest;
                 }
@@ -486,15 +490,15 @@ export default {
                     restObj = $xeDateRangePicker.paraeUpdateModel();
                 }
             }
-            reactData.startValue = restObj.sValue;
-            reactData.endValue = restObj.eValue;
+            reactData.selectStValue = restObj.sValue;
+            reactData.selectEdValue = restObj.eValue;
         },
         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;
@@ -502,16 +506,37 @@ export default {
             const reactData = $xeDateRangePicker.reactData;
             const $xeForm = $xeDateRangePicker.$xeForm;
             const formItemInfo = $xeDateRangePicker.formItemInfo;
-            const { value: modelValue } = props;
-            reactData.startValue = sValue;
-            reactData.endValue = eValue;
-            const value = $xeDateRangePicker.getRangeValue(sValue, eValue);
-            const isFinish = (sValue && eValue) || (!sValue && !eValue);
-            $xeDateRangePicker.emitModel(value);
-            $xeDateRangePicker.$emit('update:startValue', sValue || '');
-            $xeDateRangePicker.$emit('update:endValue', eValue || '');
+            const { type, value: modelValue, valueFormat } = props;
+            const dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
+            let startRest = sValue;
+            let endRest = eValue;
+            if (hasTimestampValueType(valueFormat)) {
+                if (startRest) {
+                    const dateVal = parseDateValue(startRest, type, { valueFormat: dateValueFormat });
+                    startRest = dateVal ? dateVal.getTime() : null;
+                }
+                if (endRest) {
+                    const dateVal = parseDateValue(endRest, type, { valueFormat: dateValueFormat });
+                    endRest = dateVal ? dateVal.getTime() : null;
+                }
+            }
+            else if (hasDateValueType(valueFormat)) {
+                if (startRest) {
+                    startRest = parseDateValue(startRest, type, { valueFormat: dateValueFormat });
+                }
+                if (endRest) {
+                    endRest = parseDateValue(endRest, type, { valueFormat: dateValueFormat });
+                }
+            }
+            reactData.selectStValue = startRest;
+            reactData.selectEdValue = endRest;
+            const value = $xeDateRangePicker.getRangeValue(startRest, endRest);
+            const isFinish = (startRest && endRest) || (!startRest && !endRest);
+            $xeDateRangePicker.$emit('update:modelValue', value);
+            $xeDateRangePicker.$emit('update:startValue', startRest || '');
+            $xeDateRangePicker.$emit('update:endValue', endRest || '');
             if (XEUtils.toValueString(modelValue) !== value) {
-                $xeDateRangePicker.dispatchEvent('change', { value, startValue: sValue, endValue: eValue, isFinish }, evnt);
+                $xeDateRangePicker.dispatchEvent('change', { value, startValue: startRest, endValue: endRest, isFinish }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -544,9 +569,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() {
@@ -587,8 +612,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();
@@ -605,18 +630,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;
                 }
             }
@@ -626,9 +651,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) {
@@ -636,16 +661,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);
@@ -683,22 +708,31 @@ 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].join(',');
+            reactData.paneStartVal = [startValue, endValue].join(',');
+            $xeDateRangePicker.handleChange(startValue, endValue, $event);
             $xeDateRangePicker.handleSelectClose();
             if (!selectStatus) {
                 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) {
@@ -706,91 +740,147 @@ 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].join(',');
+            reactData.paneStartVal = [startValue, endValue].join(',');
+            $xeDateRangePicker.handleChange(startValue, endValue, $event);
             $xeDateRangePicker.handleSelectClose();
             if (!selectStatus) {
                 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;
                 }
-            });
+            }
         },
-        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;
                     }
                 }
             }
+            else {
+                $xeDateRangePicker.handleUpdateStartPanelDate();
+            }
         },
-        endPanelDateBtnChangeEvent(params) {
+        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;
+                }
+            }
+        },
+        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;
                     }
                 }
             }
+            else {
+                $xeDateRangePicker.handleUpdateEndPanelDate();
+            }
         },
         // 全局事件
         handleGlobalMousedownEvent(evnt) {
@@ -939,6 +1029,7 @@ export default {
                 reactData.isAniVisible = true;
                 setTimeout(() => {
                     reactData.visiblePanel = true;
+                    $xeDateRangePicker.handleUpdateStartPanelDate();
                     $xeDateRangePicker.updatePlacement();
                 }, 10);
                 $xeDateRangePicker.updateZindex();
@@ -981,8 +1072,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,
@@ -1042,8 +1133,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);
         },
@@ -1111,8 +1202,8 @@ 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;
@@ -1188,15 +1279,18 @@ export default {
                                     h(VxeDatePanelComponent, {
                                         ref: 'refStartDatePanel',
                                         props: {
-                                            value: startValue,
+                                            value: paneStartVal,
+                                            multiple: true,
+                                            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,
@@ -1216,15 +1310,18 @@ export default {
                                     h(VxeDatePanelComponent, {
                                         ref: 'refEndDatePanel',
                                         props: {
-                                            value: endValue,
+                                            value: paneEndVal,
+                                            multiple: true,
+                                            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,
@@ -1264,7 +1361,7 @@ export default {
                                             ? h(VxeButtonComponent, {
                                                 props: {
                                                     size: 'mini',
-                                                    disabled: !(startValue || endValue),
+                                                    disabled: !(selectStValue || selectEdValue),
                                                     content: getI18n('vxe.button.clear')
                                                 },
                                                 on: {
@@ -1333,13 +1430,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
@@ -1389,7 +1486,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;
@@ -1413,7 +1510,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
@@ -1465,6 +1562,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);
@@ -1478,6 +1576,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);
@@ -1487,6 +1587,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);