vxe-pc-ui 3.15.23 → 3.15.25

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() {
@@ -296,11 +302,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         endValue = props.endValue;
       return "".concat(startValue || '').concat(endValue || '');
     },
-    computeIsDateTimeType: function computeIsDateTimeType() {
+    computeIsTimeType: function computeIsTimeType() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var type = props.type;
+      return type === 'time';
+    },
+    computeIsTimeOrDateTimeType: function computeIsTimeOrDateTimeType() {
       var $xeDateRangePicker = this;
       var props = $xeDateRangePicker;
       var type = props.type;
-      return type === 'time' || type === 'datetime';
+      var isTimeType = $xeDateRangePicker.computeIsTimeType;
+      return isTimeType || type === 'datetime';
     },
     computeIsDatePickerType: function computeIsDatePickerType() {
       var $xeDateRangePicker = this;
@@ -381,9 +394,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() {
@@ -520,7 +533,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeDateRangePicker.reactData;
       var modelValue = props.value,
         startValue = props.startValue,
-        endValue = props.endValue;
+        endValue = props.endValue,
+        valueFormat = props.valueFormat;
       var restObj = {
         sValue: '',
         eValue: ''
@@ -538,19 +552,31 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           restObj = $xeDateRangePicker.paraeUpdateModel();
         }
       }
-      reactData.startValue = restObj.sValue;
-      reactData.endValue = restObj.eValue;
+      var startRest = restObj.sValue;
+      var endRest = restObj.eValue;
+      if (valueFormat === 'timestamp') {
+        if (_xeUtils.default.isString(startRest) && /^\d+$/.test(startRest)) {
+          startRest = Number(startRest);
+        }
+        if (_xeUtils.default.isString(endRest) && /^\d+$/.test(endRest)) {
+          endRest = Number(endRest);
+        }
+      }
+      reactData.selectStValue = startRest;
+      reactData.selectEdValue = endRest;
+      reactData.paneEndVal = [startRest, endRest];
+      reactData.paneStartVal = [startRest, endRest];
     },
     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) {
@@ -590,8 +616,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           });
         }
       }
-      reactData.startValue = startRest;
-      reactData.endValue = endRest;
+      reactData.selectStValue = startRest;
+      reactData.selectEdValue = endRest;
       var value = $xeDateRangePicker.getRangeValue(startRest, endRest);
       var isFinish = startRest && endRest || !startRest && !endRest;
       $xeDateRangePicker.$emit('update:modelValue', value);
@@ -635,13 +661,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);
       }
     },
@@ -690,8 +716,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();
@@ -708,18 +734,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;
         }
       }
@@ -729,13 +755,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);
       }
     },
@@ -744,20 +770,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) {
@@ -774,12 +800,16 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     confirmEvent: function confirmEvent(evnt) {
       var $xeDateRangePicker = this;
+      var isTimeType = $xeDateRangePicker.computeIsTimeType;
       var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
       var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
       if ($startDatePanel && $endDatePanel) {
         var startValue = $startDatePanel.getModelValue();
         var 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 {
           $startDatePanel.confirmByEvent(evnt);
@@ -800,22 +830,34 @@ 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];
+      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(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) {
@@ -824,90 +866,211 @@ 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];
+      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(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;
+          }
+        case 'month':
+        case 'quarter':
+          {
+            if (endYear <= startYear) {
+              $endDatePanel.setPanelDate((0, _util.getNextYear)(startPanelDate));
+            }
+            break;
+          }
+        case 'year':
+          {
+            var yearList = $startDatePanel.computeYearList;
+            if (yearList.some(function (item) {
+              return _xeUtils.default.isDateSame(item.date, endPanelDate, 'yyyy');
+            })) {
+              $endDatePanel.setPanelDate((0, _util.getNextYear)(startPanelDate, yearList.length));
+            }
+            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;
+            }
+          case 'month':
+          case 'quarter':
+            {
+              $endDatePanel.setPanelDate((0, _util.getNextYear)(startPanelDate));
+              break;
+            }
+          case 'year':
+            {
+              var yearList = $startDatePanel.computeYearList;
+              $endDatePanel.setPanelDate((0, _util.getNextYear)(startPanelDate, yearList.length));
               break;
             }
         }
+      } else {
+        $xeDateRangePicker.handleUpdateStartPanelDate();
       }
     },
-    endPanelDateBtnChangeEvent: function endPanelDateBtnChangeEvent(params) {
+    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;
+          }
+        case 'month':
+        case 'quarter':
+          {
+            if (startYear >= endYear) {
+              $startDatePanel.setPanelDate((0, _util.getPrevYear)(endPanelDate));
+            }
+            break;
+          }
+        case 'year':
+          {
+            var yearList = $endDatePanel.computeYearList;
+            if (yearList.some(function (item) {
+              return _xeUtils.default.isDateSame(item.date, startPanelDate, 'yyyy');
+            })) {
+              $startDatePanel.setPanelDate((0, _util.getPrevYear)(endPanelDate, yearList.length));
+            }
+            break;
+          }
+      }
+    },
+    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;
+            }
+          case 'month':
+          case 'quarter':
+            {
+              $startDatePanel.setPanelDate((0, _util.getPrevYear)(endPanelDate));
+              break;
+            }
+          case 'year':
+            {
+              var yearList = $endDatePanel.computeYearList;
+              $startDatePanel.setPanelDate((0, _util.getPrevYear)(endPanelDate, yearList.length));
               break;
             }
         }
+      } else {
+        $xeDateRangePicker.handleUpdateEndPanelDate();
       }
     },
     // 全局事件
@@ -1057,6 +1220,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();
@@ -1101,8 +1265,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,
@@ -1161,8 +1325,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);
     },
@@ -1233,6 +1397,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,
@@ -1240,15 +1405,18 @@ 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;
       var isClearable = $xeDateRangePicker.computeIsClearable;
       var panelLabelObj = $xeDateRangePicker.computePanelLabelObj;
       var shortcutList = $xeDateRangePicker.computeShortcutList;
-      var isDateTimeType = $xeDateRangePicker.computeIsDateTimeType;
+      var isTimeType = $xeDateRangePicker.computeIsTimeType;
+      var isTimeOrDateTimeType = $xeDateRangePicker.computeIsTimeOrDateTimeType;
       var defaultDates = $xeDateRangePicker.computeDefaultDates;
       var defaultTimes = $xeDateRangePicker.computeDefaultTimes;
       var timeOpts = $xeDateRangePicker.computeTimeOpts;
@@ -1269,7 +1437,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         sdTime = _defaultTimes[0],
         edTime = _defaultTimes[1];
       var hasShortcutBtn = shortcutList.length > 0;
-      var showConfirmBtn = showConfirmButton === null ? isDateTimeType || !autoClose : showConfirmButton;
+      var showConfirmBtn = showConfirmButton === null ? isTimeOrDateTimeType || !autoClose : showConfirmButton;
       var showClearBtn = showClearButton === null ? isClearable : showClearButton;
       return h('div', {
         ref: 'refInputPanel',
@@ -1298,15 +1466,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }, [h(_datePanel.default, {
         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,
@@ -1325,15 +1496,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }), h(_datePanel.default, {
         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,
@@ -1360,7 +1534,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: {
@@ -1404,14 +1578,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',
@@ -1448,8 +1622,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;
@@ -1468,7 +1642,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
         }
@@ -1513,6 +1687,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);
@@ -1526,6 +1701,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);
@@ -1535,6 +1712,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);