vxe-pc-ui 3.15.22 → 3.15.24

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

@@ -28,6 +28,27 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var _createComponentLog = (0, _log.createComponentLog)('date-range-picker'),
   errLog = _createComponentLog.errLog;
+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
+  };
+}
 var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeDateRangePicker',
   mixins: [_ui.globalMixins.sizeMixin],
@@ -188,26 +209,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   data: function data() {
     var xID = _xeUtils.default.uniqueId();
-    var reactData = {
-      initialized: false,
-      panelIndex: 0,
-      visiblePanel: false,
-      isAniVisible: false,
-      panelStyle: {},
-      panelPlacement: '',
-      isActivated: false,
-      startValue: '',
-      endValue: ''
-    };
-    var internalData = {
-      // selectStatus: false
-      // hpTimeout: undefined
-    };
-    return {
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
       xID: xID,
-      reactData: reactData,
-      internalData: internalData
-    };
+      reactData: reactData
+    });
   },
   computed: Object.assign(Object.assign({}, {}), {
     computeBtnTransfer: function computeBtnTransfer() {
@@ -381,9 +387,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     computePanelLabelObj: function computePanelLabelObj() {
       var $xeDateRangePicker = this;
       var reactData = $xeDateRangePicker.reactData;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue;
-      var vals = startValue || endValue ? [startValue || '', endValue || ''] : [];
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
+      var vals = selectStValue || selectEdValue ? [selectStValue || '', selectEdValue || ''] : [];
       return $xeDateRangePicker.formatRangeLabel(vals);
     },
     computeInputLabel: function computeInputLabel() {
@@ -441,8 +447,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeDateRangePicker = this;
       var props = $xeDateRangePicker;
       var modelValue = props.value,
-        valueType = props.valueType;
-      var isArr = _xeUtils.default.isArray(modelValue);
+        valueType = props.valueType,
+        valueFormat = props.valueFormat;
+      var isArr = valueFormat === 'date' || _xeUtils.default.isArray(modelValue);
       if (valueType) {
         switch (valueType) {
           case 'array':
@@ -454,7 +461,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }
       }
       if (sValue || eValue) {
-        var rest = [sValue || '', eValue || ''];
+        var rest = [sValue || null, eValue || null];
         if (isArr) {
           return rest;
         }
@@ -537,19 +544,19 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           restObj = $xeDateRangePicker.paraeUpdateModel();
         }
       }
-      reactData.startValue = restObj.sValue;
-      reactData.endValue = restObj.eValue;
+      reactData.selectStValue = restObj.sValue;
+      reactData.selectEdValue = restObj.eValue;
     },
     triggerEvent: function triggerEvent(evnt) {
       var $xeDateRangePicker = this;
       var reactData = $xeDateRangePicker.reactData;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue;
-      var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
+      var value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
       $xeDateRangePicker.dispatchEvent(evnt.type, {
         value: value,
-        startValue: startValue,
-        endValue: endValue
+        startValue: selectStValue,
+        endValue: selectEdValue
       }, evnt);
     },
     handleChange: function handleChange(sValue, eValue, evnt) {
@@ -558,19 +565,49 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeDateRangePicker.reactData;
       var $xeForm = $xeDateRangePicker.$xeForm;
       var formItemInfo = $xeDateRangePicker.formItemInfo;
-      var modelValue = props.value;
-      reactData.startValue = sValue;
-      reactData.endValue = eValue;
-      var value = $xeDateRangePicker.getRangeValue(sValue, eValue);
-      var isFinish = sValue && eValue || !sValue && !eValue;
-      $xeDateRangePicker.emitModel(value);
-      $xeDateRangePicker.$emit('update:startValue', sValue || '');
-      $xeDateRangePicker.$emit('update:endValue', eValue || '');
+      var type = props.type,
+        modelValue = props.value,
+        valueFormat = props.valueFormat;
+      var dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
+      var startRest = sValue;
+      var endRest = eValue;
+      if ((0, _util.hasTimestampValueType)(valueFormat)) {
+        if (startRest) {
+          var dateVal = (0, _util.parseDateValue)(startRest, type, {
+            valueFormat: dateValueFormat
+          });
+          startRest = dateVal ? dateVal.getTime() : null;
+        }
+        if (endRest) {
+          var _dateVal = (0, _util.parseDateValue)(endRest, type, {
+            valueFormat: dateValueFormat
+          });
+          endRest = _dateVal ? _dateVal.getTime() : null;
+        }
+      } else if ((0, _util.hasDateValueType)(valueFormat)) {
+        if (startRest) {
+          startRest = (0, _util.parseDateValue)(startRest, type, {
+            valueFormat: dateValueFormat
+          });
+        }
+        if (endRest) {
+          endRest = (0, _util.parseDateValue)(endRest, type, {
+            valueFormat: dateValueFormat
+          });
+        }
+      }
+      reactData.selectStValue = startRest;
+      reactData.selectEdValue = endRest;
+      var value = $xeDateRangePicker.getRangeValue(startRest, endRest);
+      var isFinish = startRest && endRest || !startRest && !endRest;
+      $xeDateRangePicker.$emit('update:modelValue', value);
+      $xeDateRangePicker.$emit('update:startValue', startRest || '');
+      $xeDateRangePicker.$emit('update:endValue', endRest || '');
       if (_xeUtils.default.toValueString(modelValue) !== value) {
         $xeDateRangePicker.dispatchEvent('change', {
           value: value,
-          startValue: sValue,
-          endValue: eValue,
+          startValue: startRest,
+          endValue: endRest,
           isFinish: isFinish
         }, evnt);
         // 自动更新校验状态
@@ -604,13 +641,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeDateRangePicker.reactData;
       var isDisabled = $xeDateRangePicker.computeIsDisabled;
       if (!isDisabled) {
-        var startValue = reactData.startValue,
-          endValue = reactData.endValue;
-        var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
+        var selectStValue = reactData.selectStValue,
+          selectEdValue = reactData.selectEdValue;
+        var value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
         $xeDateRangePicker.dispatchEvent('prefix-click', {
           value: value,
-          startValue: startValue,
-          endValue: endValue
+          startValue: selectStValue,
+          endValue: selectEdValue
         }, evnt);
       }
     },
@@ -659,8 +696,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var date = _ref.date;
       var $xeDateRangePicker = this;
       var reactData = $xeDateRangePicker.reactData;
-      var startValue = reactData.startValue;
-      var endValue = reactData.endValue;
+      var startValue = reactData.selectStValue;
+      var endValue = reactData.selectEdValue;
       if (startValue && endValue) {
         var currTime = date.getTime();
         var startTime = _xeUtils.default.toStringDate(startValue).getTime();
@@ -677,18 +714,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeDateRangePicker.reactData;
       var internalData = $xeDateRangePicker.internalData;
       var autoClose = props.autoClose;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue;
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
       var selectStatus = internalData.selectStatus;
       var 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;
         }
       }
@@ -698,13 +735,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeDateRangePicker.reactData;
       var isDisabled = $xeDateRangePicker.computeIsDisabled;
       if (!isDisabled) {
-        var startValue = reactData.startValue,
-          endValue = reactData.endValue;
-        var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
+        var selectStValue = reactData.selectStValue,
+          selectEdValue = reactData.selectEdValue;
+        var value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
         $xeDateRangePicker.dispatchEvent('suffix-click', {
           value: value,
-          startValue: startValue,
-          endValue: endValue
+          startValue: selectStValue,
+          endValue: selectEdValue
         }, evnt);
       }
     },
@@ -713,20 +750,20 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeDateRangePicker.reactData;
       var $xeForm = $xeDateRangePicker.$xeForm;
       var formItemInfo = $xeDateRangePicker.formItemInfo;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue;
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
       var inpImmediate = $xeDateRangePicker.computeInpImmediate;
       var value = '';
       if (!inpImmediate) {
-        $xeDateRangePicker.handleChange(startValue, endValue, evnt);
+        $xeDateRangePicker.handleChange(selectStValue, selectEdValue, evnt);
       }
       if (!reactData.visiblePanel) {
         reactData.isActivated = false;
       }
       $xeDateRangePicker.dispatchEvent('blur', {
         value: value,
-        startValue: startValue,
-        endValue: endValue
+        startValue: selectStValue,
+        endValue: selectEdValue
       }, evnt);
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {
@@ -769,22 +806,30 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var internalData = $xeDateRangePicker.internalData;
       var selectStatus = internalData.selectStatus;
       var value = params.value,
+        currValue = params.currValue,
         $event = params.$event;
-      var endValue = selectStatus ? reactData.endValue : '';
-      $xeDateRangePicker.handleChange(value, endValue, $event);
+      var paneVals = value ? _xeUtils.default.isString(value) ? value.split(',') : [value] : [];
+      var startValue = '';
+      var endValue = '';
+      if (selectStatus) {
+        startValue = paneVals[0];
+        if (paneVals[1]) {
+          endValue = paneVals[1];
+        } else {
+          endValue = reactData.selectEdValue;
+        }
+      } else {
+        startValue = currValue || _xeUtils.default.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(function () {
-        var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-        var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-        if ($startDatePanel && $endDatePanel) {
-          var startValue = $startDatePanel.getModelValue();
-          if (!endValue && startValue) {
-            $endDatePanel.setPanelDate(_xeUtils.default.toStringDate(startValue));
-          }
-        }
+        $xeDateRangePicker.handleUpdateStartPanelDate();
       });
     },
     endPanelChangeEvent: function endPanelChangeEvent(params) {
@@ -793,90 +838,147 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var internalData = $xeDateRangePicker.internalData;
       var selectStatus = internalData.selectStatus;
       var value = params.value,
+        currValue = params.currValue,
         $event = params.$event;
-      var startValue = selectStatus ? reactData.startValue : '';
-      $xeDateRangePicker.handleChange(startValue, value, $event);
+      var paneVals = value ? _xeUtils.default.isString(value) ? value.split(',') : [value] : [];
+      var startValue = '';
+      var endValue = '';
+      if (selectStatus) {
+        endValue = paneVals[0];
+        if (paneVals[1]) {
+          startValue = paneVals[0];
+          endValue = paneVals[1];
+        } else {
+          startValue = reactData.selectStValue;
+        }
+      } else {
+        endValue = currValue || _xeUtils.default.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(function () {
-        var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-        var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-        if ($startDatePanel && $endDatePanel) {
-          var endValue = $endDatePanel.getModelValue();
-          if (!startValue && endValue) {
-            $startDatePanel.setPanelDate(_xeUtils.default.toStringDate(endValue));
-          }
-        }
+        $xeDateRangePicker.handleUpdateEndPanelDate();
       });
     },
-    startPanelDateBtnChangeEvent: function startPanelDateBtnChangeEvent(params) {
+    handleUpdateStartPanelDate: function handleUpdateStartPanelDate() {
+      var $xeDateRangePicker = this;
+      var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+      var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+      if (!$startDatePanel || !$endDatePanel) {
+        return;
+      }
+      var startPanelDate = $startDatePanel.getPanelDate();
+      var endPanelDate = $endDatePanel.getPanelDate();
+      if (!startPanelDate || !endPanelDate) {
+        return;
+      }
+      var viewType = $startDatePanel.getViewType();
+      var startYear = startPanelDate.getFullYear();
+      var startMonth = startPanelDate.getMonth();
+      var endYear = endPanelDate.getFullYear();
+      var endMonth = endPanelDate.getMonth();
+      switch (viewType) {
+        case 'day':
+        case 'date':
+        case 'week':
+          {
+            if (endYear <= startYear && endMonth <= startMonth) {
+              $endDatePanel.setPanelDate((0, _util.getNextMonth)(startPanelDate));
+            }
+            break;
+          }
+      }
+    },
+    startPanelDateBtnChangeEvent: function startPanelDateBtnChangeEvent() {
       var $xeDateRangePicker = this;
       var props = $xeDateRangePicker;
       var linkedPanels = props.linkedPanels;
+      var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+      var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+      if (!$startDatePanel || !$endDatePanel) {
+        return;
+      }
+      var startPanelDate = $startDatePanel.getPanelDate();
+      var endPanelDate = $endDatePanel.getPanelDate();
+      if (!startPanelDate || !endPanelDate) {
+        return;
+      }
+      var viewType = $startDatePanel.getViewType();
       if (linkedPanels) {
-        var viewType = params.viewType;
-        var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-        var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-        if (!$startDatePanel || !$endDatePanel) {
-          return;
-        }
-        var startPanelDate = $startDatePanel.getPanelDate();
-        if (!startPanelDate) {
-          return;
-        }
-        var endYear = startPanelDate.getFullYear();
-        var 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((0, _util.getNextMonth)(startPanelDate));
               break;
             }
         }
+      } else {
+        $xeDateRangePicker.handleUpdateStartPanelDate();
+      }
+    },
+    handleUpdateEndPanelDate: function handleUpdateEndPanelDate() {
+      var $xeDateRangePicker = this;
+      var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+      var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+      if (!$startDatePanel || !$endDatePanel) {
+        return;
+      }
+      var startPanelDate = $startDatePanel.getPanelDate();
+      var endPanelDate = $endDatePanel.getPanelDate();
+      if (!startPanelDate || !endPanelDate) {
+        return;
+      }
+      var viewType = $endDatePanel.getViewType();
+      var startYear = startPanelDate.getFullYear();
+      var startMonth = startPanelDate.getMonth();
+      var endYear = endPanelDate.getFullYear();
+      var endMonth = endPanelDate.getMonth();
+      switch (viewType) {
+        case 'day':
+        case 'date':
+        case 'week':
+          {
+            if (startYear >= endYear && startMonth >= endMonth) {
+              $startDatePanel.setPanelDate((0, _util.getPrevMonth)(endPanelDate));
+            }
+            break;
+          }
       }
     },
-    endPanelDateBtnChangeEvent: function endPanelDateBtnChangeEvent(params) {
+    endPanelDateBtnChangeEvent: function endPanelDateBtnChangeEvent() {
       var $xeDateRangePicker = this;
       var props = $xeDateRangePicker;
       var linkedPanels = props.linkedPanels;
+      var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+      var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+      if (!$startDatePanel || !$endDatePanel) {
+        return;
+      }
+      var startPanelDate = $startDatePanel.getPanelDate();
+      var endPanelDate = $endDatePanel.getPanelDate();
+      if (!startPanelDate || !endPanelDate) {
+        return;
+      }
+      var viewType = $endDatePanel.getViewType();
       if (linkedPanels) {
-        var viewType = params.viewType;
-        var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
-        var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
-        if (!$startDatePanel || !$endDatePanel) {
-          return;
-        }
-        var endPanelDate = $endDatePanel.getPanelDate();
-        if (!endPanelDate) {
-          return;
-        }
-        var endYear = endPanelDate.getFullYear();
-        var 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((0, _util.getPrevMonth)(endPanelDate));
               break;
             }
         }
+      } else {
+        $xeDateRangePicker.handleUpdateEndPanelDate();
       }
     },
     // 全局事件
@@ -1026,6 +1128,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         reactData.isAniVisible = true;
         setTimeout(function () {
           reactData.visiblePanel = true;
+          $xeDateRangePicker.handleUpdateStartPanelDate();
           $xeDateRangePicker.updatePlacement();
         }, 10);
         $xeDateRangePicker.updateZindex();
@@ -1070,8 +1173,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var autoClose = shortcutOpts.autoClose;
       var code = option.code,
         clickMethod = option.clickMethod;
-      var startValue = reactData.startValue;
-      var endValue = reactData.endValue;
+      var startValue = reactData.selectStValue;
+      var endValue = reactData.selectEdValue;
       var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
       var shortcutParams = {
         $dateRangePicker: $xeDateRangePicker,
@@ -1130,8 +1233,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     setModelValue: function setModelValue(startValue, endValue) {
       var $xeDateRangePicker = this;
       var reactData = $xeDateRangePicker.reactData;
-      reactData.startValue = startValue || '';
-      reactData.endValue = endValue || '';
+      reactData.selectStValue = startValue || '';
+      reactData.selectEdValue = endValue || '';
       var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
       $xeDateRangePicker.emitModel(value);
     },
@@ -1202,6 +1305,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var type = props.type,
         separator = props.separator,
         autoClose = props.autoClose,
+        valueFormat = props.valueFormat,
         showConfirmButton = props.showConfirmButton,
         showClearButton = props.showClearButton;
       var initialized = reactData.initialized,
@@ -1209,8 +1313,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         visiblePanel = reactData.visiblePanel,
         panelPlacement = reactData.panelPlacement,
         panelStyle = reactData.panelStyle,
-        startValue = reactData.startValue,
-        endValue = reactData.endValue;
+        selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue,
+        paneStartVal = reactData.paneStartVal,
+        paneEndVal = reactData.paneEndVal;
       var vSize = $xeDateRangePicker.computeSize;
       var btnTransfer = $xeDateRangePicker.computeBtnTransfer;
       var shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
@@ -1267,15 +1373,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }, [h(_datePanel.default, {
         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,
@@ -1294,15 +1403,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }), h(_datePanel.default, {
         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,
@@ -1329,7 +1441,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }, [showClearBtn ? h(_button.default, {
         props: {
           size: 'mini',
-          disabled: !(startValue || endValue),
+          disabled: !(selectStValue || selectEdValue),
           content: (0, _ui.getI18n)('vxe.button.clear')
         },
         on: {
@@ -1373,14 +1485,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var slots = $xeDateRangePicker.$scopedSlots;
       var reactData = $xeDateRangePicker.reactData;
       var suffixIcon = props.suffixIcon;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue;
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
       var suffixSlot = slots.suffix;
       var isDisabled = $xeDateRangePicker.computeIsDisabled;
       var 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 ? h('div', {
         class: 'vxe-date-range-picker--clear-icon',
@@ -1417,8 +1529,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         type = props.type,
         name = props.name,
         autoComplete = props.autoComplete;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue,
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue,
         visiblePanel = reactData.visiblePanel,
         isActivated = reactData.isActivated;
       var vSize = $xeDateRangePicker.computeSize;
@@ -1437,7 +1549,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var suffix = $xeDateRangePicker.renderSuffixIcon(h);
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-date-range-picker', "type--".concat(type), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--prefix', !!prefix), 'is--suffix', !!suffix), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--active', isActivated), 'show--clear', isClearable && !isDisabled && (startValue || endValue))],
+        class: ['vxe-date-range-picker', "type--".concat(type), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--prefix', !!prefix), 'is--suffix', !!suffix), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--active', isActivated), 'show--clear', isClearable && !isDisabled && (selectStValue || selectEdValue))],
         attrs: {
           spellcheck: false
         }
@@ -1482,6 +1594,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   created: function created() {
     var $xeDateRangePicker = this;
+    $xeDateRangePicker.internalData = createInternalData();
     $xeDateRangePicker.updateModelValue(true);
     _ui.globalEvents.on($xeDateRangePicker, 'mousewheel', $xeDateRangePicker.handleGlobalMousewheelEvent);
     _ui.globalEvents.on($xeDateRangePicker, 'mousedown', $xeDateRangePicker.handleGlobalMousedownEvent);
@@ -1495,6 +1608,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   beforeDestroy: function beforeDestroy() {
     var $xeDateRangePicker = this;
+    var reactData = $xeDateRangePicker.reactData;
+    var internalData = $xeDateRangePicker.internalData;
     var panelElem = $xeDateRangePicker.$refs.refInputPanel;
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem);
@@ -1504,6 +1619,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     _ui.globalEvents.off($xeDateRangePicker, 'mousedown');
     _ui.globalEvents.off($xeDateRangePicker, 'blur');
     _ui.globalEvents.off($xeDateRangePicker, 'resize');
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
   },
   render: function render(h) {
     return this.renderVN(h);