vxe-pc-ui 3.16.0 → 3.16.2

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

@@ -0,0 +1,1722 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _utils = require("../../ui/src/utils");
+var _dom = require("../../ui/src/dom");
+var _util = require("../../date-panel/src/util");
+var _vn = require("../../ui/src/vn");
+var _log = require("../../ui/src/log");
+var _datePanel = _interopRequireDefault(require("../../date-panel/src/date-panel"));
+var _button = _interopRequireDefault(require("../../button/src/button"));
+var _buttonGroup = _interopRequireDefault(require("../../button/src/button-group"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+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],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: [String, Number, Date, Array],
+    startValue: [String, Number, Date],
+    endValue: [String, Number, Date],
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    type: {
+      type: String,
+      default: 'date'
+    },
+    clearable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.clearable;
+      }
+    },
+    linkedPanels: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.linkedPanels;
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    placeholder: String,
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    form: String,
+    className: String,
+    zIndex: Number,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.size || (0, _ui.getConfig)().size;
+      }
+    },
+    // startDate: {
+    //   type: [String, Number, Date] as PropType<VxeDateRangePickerPropTypes.StartDate>,
+    //   default: () => getConfig().dateRangePicker.startDate
+    // },
+    // endDate: {
+    //   type: [String, Number, Date] as PropType<VxeDateRangePickerPropTypes.EndDate>,
+    //   default: () => getConfig().dateRangePicker.endDate
+    // },
+    minDate: [String, Number, Date],
+    maxDate: [String, Number, Date],
+    defaultDate: [String, Number, Date, Array],
+    defaultTime: [String, Number, Date, Array],
+    startDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.startDay;
+      }
+    },
+    labelFormat: String,
+    valueFormat: String,
+    timeFormat: String,
+    valueType: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    festivalMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.festivalMethod;
+      }
+    },
+    disabledMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.disabledMethod;
+      }
+    },
+    separator: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.separator;
+      }
+    },
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.selectDay;
+      }
+    },
+    showClearButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.showClearButton;
+      }
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.showConfirmButton;
+      }
+    },
+    autoClose: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().dateRangePicker.autoClose;
+      }
+    },
+    prefixIcon: String,
+    suffixIcon: String,
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    timeConfig: Object,
+    popupConfig: Object,
+    shortcutConfig: Object
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeDateRangePicker = this;
+    return {
+      $xeDateRangePicker: $xeDateRangePicker
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
+      xID: xID,
+      reactData: reactData
+    });
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var $xeTable = $xeDateRangePicker.$xeTable;
+      var $xeModal = $xeDateRangePicker.$xeModal;
+      var $xeDrawer = $xeDateRangePicker.$xeDrawer;
+      var $xeForm = $xeDateRangePicker.$xeForm;
+      var transfer = props.transfer;
+      var popupOpts = $xeDateRangePicker.computePopupOpts;
+      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer;
+      }
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().dateRangePicker.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var $xeForm = $xeDateRangePicker.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var $xeForm = $xeDateRangePicker.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeDefaultDates: function computeDefaultDates() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var defaultDate = props.defaultDate;
+      if (defaultDate) {
+        if (_xeUtils.default.isArray(defaultDate)) {
+          return defaultDate;
+        }
+        if ("".concat(defaultDate).indexOf(',') > -1) {
+          return "".concat(defaultDate).split(',');
+        }
+        return [defaultDate, defaultDate];
+      }
+      return [];
+    },
+    computeDefaultTimes: function computeDefaultTimes() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var defaultTime = props.defaultTime;
+      if (defaultTime) {
+        if (_xeUtils.default.isArray(defaultTime)) {
+          return defaultTime;
+        }
+        if ("".concat(defaultTime).indexOf(',') > -1) {
+          return "".concat(defaultTime).split(',');
+        }
+        return [defaultTime, defaultTime];
+      }
+      return [];
+    },
+    computeMVal: function computeMVal() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var startValue = props.startValue,
+        endValue = props.endValue;
+      return "".concat(startValue || '').concat(endValue || '');
+    },
+    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;
+      var isTimeType = $xeDateRangePicker.computeIsTimeType;
+      return isTimeType || type === 'datetime';
+    },
+    computeIsDatePickerType: function computeIsDatePickerType() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeIsClearable: function computeIsClearable() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      return props.clearable;
+    },
+    computeInpPlaceholder: function computeInpPlaceholder() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      var globalPlaceholder = (0, _ui.getConfig)().dateRangePicker.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.dateRangePicker.pleaseRange');
+    },
+    computeInpImmediate: function computeInpImmediate() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var immediate = props.immediate;
+      return immediate;
+    },
+    computeTimeOpts: function computeTimeOpts() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return Object.assign({}, (0, _ui.getConfig)().dateRangePicker.timeConfig, props.timeConfig);
+    },
+    computePopupOpts: function computePopupOpts() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      return Object.assign({}, (0, _ui.getConfig)().dateRangePicker.popupConfig, props.popupConfig);
+    },
+    computeShortcutOpts: function computeShortcutOpts() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      return Object.assign({}, (0, _ui.getConfig)().dateRangePicker.shortcutConfig, props.shortcutConfig);
+    },
+    computeShortcutList: function computeShortcutList() {
+      var $xeDateRangePicker = this;
+      var shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
+      var options = shortcutOpts.options;
+      if (options) {
+        return options.map(function (option, index) {
+          return Object.assign({
+            name: "".concat(option.name || option.code || index)
+          }, option);
+        });
+      }
+      return [];
+    },
+    computeDateLabelFormat: function computeDateLabelFormat() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var labelFormat = props.labelFormat;
+      return labelFormat || (0, _ui.getI18n)("vxe.input.date.labelFormat.".concat(props.type));
+    },
+    computeDateValueFormat: function computeDateValueFormat() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var type = props.type,
+        valueFormat = props.valueFormat;
+      return (0, _util.handleValueFormat)(type, valueFormat);
+    },
+    computeFirstDayOfWeek: function computeFirstDayOfWeek() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var startDay = props.startDay;
+      return _xeUtils.default.toNumber(startDay);
+    },
+    computePanelLabelObj: function computePanelLabelObj() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
+      var vals = selectStValue || selectEdValue ? [selectStValue || '', selectEdValue || ''] : [];
+      return $xeDateRangePicker.formatRangeLabel(vals);
+    },
+    computeInputLabel: function computeInputLabel() {
+      var $xeDateRangePicker = this;
+      var panelLabelObj = $xeDateRangePicker.computePanelLabelObj;
+      return panelLabelObj.label;
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeDateRangePicker = this;
+      $xeDateRangePicker.$emit(type, (0, _ui.createEvent)(evnt, {
+        $dateRangePicker: $xeDateRangePicker
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeDateRangePicker = this;
+      var _events = $xeDateRangePicker._events;
+      if (_events && _events.modelValue) {
+        $xeDateRangePicker.$emit('modelValue', value);
+      } else {
+        $xeDateRangePicker.$emit('model-value', value);
+      }
+    },
+    formatRangeLabel: function formatRangeLabel(vals) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var type = props.type,
+        separator = props.separator;
+      var dateLabelFormat = $xeDateRangePicker.computeDateLabelFormat;
+      var dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
+      var firstDayOfWeek = $xeDateRangePicker.computeFirstDayOfWeek;
+      var startRest = vals[0] ? (0, _util.parseDateObj)(vals[0], type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      }) : null;
+      var endRest = vals[1] ? (0, _util.parseDateObj)(vals[1], type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      }) : null;
+      var startLabel = startRest ? startRest.label : '';
+      var endLabel = endRest ? endRest.label : '';
+      return {
+        label: (startLabel || endLabel ? [startLabel, endLabel] : []).join("".concat(separator || ' ~ ')),
+        startLabel: startLabel,
+        endLabel: endLabel
+      };
+    },
+    getRangeValue: function getRangeValue(sValue, eValue) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var modelValue = props.value,
+        valueType = props.valueType,
+        valueFormat = props.valueFormat;
+      var isArr = valueFormat === 'date' || _xeUtils.default.isArray(modelValue);
+      if (valueType) {
+        switch (valueType) {
+          case 'array':
+            isArr = true;
+            break;
+          case 'string':
+            isArr = false;
+            break;
+        }
+      }
+      if (sValue || eValue) {
+        var rest = [sValue || null, eValue || null];
+        if (isArr) {
+          return rest;
+        }
+        return rest.join(',');
+      }
+      return isArr ? [] : '';
+    },
+    paraeUpdateModel: function paraeUpdateModel() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var type = props.type,
+        modelValue = props.value;
+      var dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
+      var sValue = '';
+      var eValue = '';
+      if (_xeUtils.default.isArray(modelValue)) {
+        var date1 = (0, _util.parseDateString)(modelValue[0], type, {
+          valueFormat: dateValueFormat
+        });
+        var date2 = (0, _util.parseDateString)(modelValue[1], type, {
+          valueFormat: dateValueFormat
+        });
+        if (date1 || date2) {
+          sValue = date1 || '';
+          eValue = date2 || '';
+        }
+      } else if (_xeUtils.default.isString(modelValue)) {
+        var strArr = modelValue.split(',');
+        if (strArr[0] || strArr[1]) {
+          sValue = strArr[0] || '';
+          eValue = strArr[1] || '';
+        }
+      }
+      return {
+        sValue: sValue,
+        eValue: eValue
+      };
+    },
+    parseUpdateData: function parseUpdateData() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var type = props.type,
+        startValue = props.startValue,
+        endValue = props.endValue;
+      var dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
+      var sValue = '';
+      var eValue = '';
+      sValue = (0, _util.parseDateString)(startValue, type, {
+        valueFormat: dateValueFormat
+      });
+      eValue = (0, _util.parseDateString)(endValue, type, {
+        valueFormat: dateValueFormat
+      });
+      return {
+        sValue: sValue,
+        eValue: eValue
+      };
+    },
+    updateModelValue: function updateModelValue(isModel) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var reactData = $xeDateRangePicker.reactData;
+      var modelValue = props.value,
+        startValue = props.startValue,
+        endValue = props.endValue,
+        valueFormat = props.valueFormat;
+      var restObj = {
+        sValue: '',
+        eValue: ''
+      };
+      if (isModel) {
+        if (modelValue) {
+          restObj = $xeDateRangePicker.paraeUpdateModel();
+        } else {
+          restObj = $xeDateRangePicker.parseUpdateData();
+        }
+      } else {
+        if (startValue || endValue) {
+          restObj = $xeDateRangePicker.parseUpdateData();
+        } else {
+          restObj = $xeDateRangePicker.paraeUpdateModel();
+        }
+      }
+      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 selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
+      var value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
+      $xeDateRangePicker.dispatchEvent(evnt.type, {
+        value: value,
+        startValue: selectStValue,
+        endValue: selectEdValue
+      }, evnt);
+    },
+    handleChange: function handleChange(sValue, eValue, evnt) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var reactData = $xeDateRangePicker.reactData;
+      var $xeForm = $xeDateRangePicker.$xeForm;
+      var formItemInfo = $xeDateRangePicker.formItemInfo;
+      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: startRest,
+          endValue: endRest,
+          isFinish: isFinish
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      }
+    },
+    changeEvent: function changeEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var inpImmediate = $xeDateRangePicker.computeInpImmediate;
+      if (!inpImmediate) {
+        $xeDateRangePicker.triggerEvent(evnt);
+      }
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var popupOpts = $xeDateRangePicker.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      reactData.isActivated = true;
+      if (!trigger || trigger === 'default') {
+        $xeDateRangePicker.dateRangePickerOpenEvent(evnt);
+      } else if (trigger === 'icon') {
+        $xeDateRangePicker.hidePanel();
+      }
+      $xeDateRangePicker.triggerEvent(evnt);
+    },
+    clickPrefixEvent: function clickPrefixEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var isDisabled = $xeDateRangePicker.computeIsDisabled;
+      if (!isDisabled) {
+        var selectStValue = reactData.selectStValue,
+          selectEdValue = reactData.selectEdValue;
+        var value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
+        $xeDateRangePicker.dispatchEvent('prefix-click', {
+          value: value,
+          startValue: selectStValue,
+          endValue: selectEdValue
+        }, evnt);
+      }
+    },
+    hidePanel: function hidePanel() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var internalData = $xeDateRangePicker.internalData;
+      return new Promise(function (resolve) {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(function () {
+          reactData.isAniVisible = false;
+          resolve();
+        }, 350);
+      });
+    },
+    clearValueEvent: function clearValueEvent(evnt, value) {
+      var $xeDateRangePicker = this;
+      var isDatePickerType = $xeDateRangePicker.computeIsDatePickerType;
+      if (isDatePickerType) {
+        $xeDateRangePicker.hidePanel();
+      }
+      var startValue = '';
+      var endValue = '';
+      $xeDateRangePicker.handleChange(startValue, endValue, evnt);
+      $xeDateRangePicker.dispatchEvent('clear', {
+        value: value,
+        startValue: startValue,
+        endValue: endValue
+      }, evnt);
+    },
+    checkValue: function checkValue() {
+      var $xeDateRangePicker = this;
+      var $startDatePanel = $xeDateRangePicker.$refs.refStartDatePanel;
+      var $endDatePanel = $xeDateRangePicker.$refs.refEndDatePanel;
+      if ($startDatePanel && $endDatePanel) {
+        var startValue = $startDatePanel.getModelValue();
+        var endValue = $endDatePanel.getModelValue();
+        if (!startValue || !endValue) {
+          $xeDateRangePicker.handleChange('', '', {
+            type: 'check'
+          });
+        }
+      }
+    },
+    panelCellClassName: function panelCellClassName(_ref) {
+      var date = _ref.date;
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var startValue = reactData.selectStValue;
+      var endValue = reactData.selectEdValue;
+      if (startValue && endValue) {
+        var currTime = date.getTime();
+        var startTime = _xeUtils.default.toStringDate(startValue).getTime();
+        var endTime = _xeUtils.default.toStringDate(endValue).getTime();
+        if (currTime >= startTime && currTime <= endTime) {
+          return 'is--range-selected';
+        }
+      }
+      return '';
+    },
+    handleSelectClose: function handleSelectClose() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var reactData = $xeDateRangePicker.reactData;
+      var internalData = $xeDateRangePicker.internalData;
+      var autoClose = props.autoClose;
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
+      var selectStatus = internalData.selectStatus;
+      var isDatePickerType = $xeDateRangePicker.computeIsDatePickerType;
+      if (autoClose) {
+        if (selectStatus && isDatePickerType) {
+          if (selectStValue && selectEdValue) {
+            $xeDateRangePicker.hidePanel();
+          }
+        }
+      } else {
+        if (selectStValue && selectEdValue) {
+          internalData.selectStatus = false;
+        }
+      }
+    },
+    clickSuffixEvent: function clickSuffixEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var isDisabled = $xeDateRangePicker.computeIsDisabled;
+      if (!isDisabled) {
+        var selectStValue = reactData.selectStValue,
+          selectEdValue = reactData.selectEdValue;
+        var value = $xeDateRangePicker.getRangeValue(selectStValue, selectEdValue);
+        $xeDateRangePicker.dispatchEvent('suffix-click', {
+          value: value,
+          startValue: selectStValue,
+          endValue: selectEdValue
+        }, evnt);
+      }
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var $xeForm = $xeDateRangePicker.$xeForm;
+      var formItemInfo = $xeDateRangePicker.formItemInfo;
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue;
+      var inpImmediate = $xeDateRangePicker.computeInpImmediate;
+      var value = '';
+      if (!inpImmediate) {
+        $xeDateRangePicker.handleChange(selectStValue, selectEdValue, evnt);
+      }
+      if (!reactData.visiblePanel) {
+        reactData.isActivated = false;
+      }
+      $xeDateRangePicker.dispatchEvent('blur', {
+        value: value,
+        startValue: selectStValue,
+        endValue: selectEdValue
+      }, evnt);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      }
+    },
+    keydownEvent: function keydownEvent(evnt) {
+      var $xeDateRangePicker = this;
+      $xeDateRangePicker.triggerEvent(evnt);
+    },
+    keyupEvent: function keyupEvent(evnt) {
+      var $xeDateRangePicker = this;
+      $xeDateRangePicker.triggerEvent(evnt);
+    },
+    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 (isTimeType) {
+          $startDatePanel.confirmByEvent(evnt);
+          $endDatePanel.confirmByEvent(evnt);
+        } else if (startValue && !endValue || !startValue && endValue) {
+          $xeDateRangePicker.handleChange('', '', evnt);
+        } else {
+          $startDatePanel.confirmByEvent(evnt);
+          $endDatePanel.confirmByEvent(evnt);
+        }
+        var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
+        $xeDateRangePicker.dispatchEvent('confirm', {
+          value: value,
+          startValue: startValue,
+          endValue: endValue
+        }, evnt);
+      }
+      $xeDateRangePicker.hidePanel();
+    },
+    startPanelChangeEvent: function startPanelChangeEvent(params) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var internalData = $xeDateRangePicker.internalData;
+      var selectStatus = internalData.selectStatus;
+      var value = params.value,
+        currValue = params.currValue,
+        $event = params.$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 (startValue && endValue) {
+          internalData.selectStatus = false;
+        }
+      } else {
+        internalData.selectStatus = true;
+      }
+      $xeDateRangePicker.$nextTick(function () {
+        $xeDateRangePicker.handleUpdateStartPanelDate();
+      });
+    },
+    endPanelChangeEvent: function endPanelChangeEvent(params) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var internalData = $xeDateRangePicker.internalData;
+      var selectStatus = internalData.selectStatus;
+      var value = params.value,
+        currValue = params.currValue,
+        $event = params.$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 (startValue && endValue) {
+          internalData.selectStatus = false;
+        }
+      } else {
+        internalData.selectStatus = true;
+      }
+      $xeDateRangePicker.$nextTick(function () {
+        $xeDateRangePicker.handleUpdateEndPanelDate();
+      });
+    },
+    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) {
+        switch (viewType) {
+          case 'day':
+          case 'date':
+          case 'week':
+            {
+              $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();
+      }
+    },
+    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) {
+        switch (viewType) {
+          case 'day':
+          case 'date':
+          case 'week':
+            {
+              $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();
+      }
+    },
+    // 全局事件
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      var el = $xeDateRangePicker.$refs.refElem;
+      var panelWrapperElem = $xeDateRangePicker.$refs.refPanelWrapper;
+      var isDisabled = $xeDateRangePicker.computeIsDisabled;
+      if (!isDisabled && isActivated) {
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
+        if (!reactData.isActivated) {
+          if (visiblePanel) {
+            $xeDateRangePicker.checkValue();
+            $xeDateRangePicker.hidePanel();
+          }
+        }
+      }
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeDateRangePicker.computeIsDisabled;
+      if (!isDisabled) {
+        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
+        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        if (isTab) {
+          reactData.isActivated = false;
+        }
+        if (visiblePanel) {
+          if (isEsc || isTab) {
+            $xeDateRangePicker.checkValue();
+            $xeDateRangePicker.hidePanel();
+          }
+        }
+      }
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeDateRangePicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelWrapperElem = $xeDateRangePicker.$refs.refPanelWrapper;
+          if ((0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag) {
+            $xeDateRangePicker.updatePlacement();
+          } else {
+            $xeDateRangePicker.checkValue();
+            $xeDateRangePicker.hidePanel();
+          }
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      if (visiblePanel) {
+        $xeDateRangePicker.checkValue();
+        $xeDateRangePicker.hidePanel();
+      }
+      if (isActivated) {
+        reactData.isActivated = false;
+      }
+      if (visiblePanel || isActivated) {
+        var targetElem = $xeDateRangePicker.$refs.refInputTarget;
+        if (targetElem) {
+          targetElem.blur();
+        }
+      }
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeDateRangePicker.updatePlacement();
+      }
+    },
+    // 弹出面板
+    updateZindex: function updateZindex() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var reactData = $xeDateRangePicker.reactData;
+      var popupOpts = $xeDateRangePicker.computePopupOpts;
+      var customZIndex = popupOpts.zIndex || props.zIndex;
+      if (customZIndex) {
+        reactData.panelIndex = _xeUtils.default.toNumber(customZIndex);
+      } else if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var reactData = $xeDateRangePicker.reactData;
+      var placement = props.placement;
+      var panelIndex = reactData.panelIndex;
+      var targetElem = $xeDateRangePicker.$refs.refInputTarget;
+      var panelElem = $xeDateRangePicker.$refs.refInputPanel;
+      if (!panelElem) {
+        return $xeDateRangePicker.$nextTick();
+      }
+      var btnTransfer = $xeDateRangePicker.computeBtnTransfer;
+      var popupOpts = $xeDateRangePicker.computePopupOpts;
+      var handleStyle = function handleStyle() {
+        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          defaultPlacement: popupOpts.defaultPlacement,
+          teleportTo: btnTransfer
+        });
+        var panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return $xeDateRangePicker.$nextTick().then(handleStyle);
+    },
+    showPanel: function showPanel() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var internalData = $xeDateRangePicker.internalData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeDateRangePicker.computeIsDisabled;
+      var btnTransfer = $xeDateRangePicker.computeBtnTransfer;
+      var panelElem = $xeDateRangePicker.$refs.refInputPanel;
+      if (!isDisabled && !visiblePanel) {
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          if (btnTransfer && panelElem) {
+            document.body.appendChild(panelElem);
+          }
+        }
+        if (internalData.hpTimeout) {
+          clearTimeout(internalData.hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        internalData.selectStatus = false;
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        setTimeout(function () {
+          reactData.visiblePanel = true;
+          $xeDateRangePicker.handleUpdateStartPanelDate();
+          $xeDateRangePicker.updatePlacement();
+        }, 10);
+        $xeDateRangePicker.updateZindex();
+        return $xeDateRangePicker.updatePlacement();
+      }
+      return $xeDateRangePicker.$nextTick();
+    },
+    dateRangePickerOpenEvent: function dateRangePickerOpenEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var formReadonly = $xeDateRangePicker.computeFormReadonly;
+      if (!formReadonly) {
+        evnt.preventDefault();
+        $xeDateRangePicker.showPanel();
+      }
+    },
+    clickIconEvent: function clickIconEvent(evnt) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var popupOpts = $xeDateRangePicker.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (!trigger || trigger === 'default' || trigger === 'icon') {
+        if (visiblePanel) {
+          $xeDateRangePicker.hidePanel();
+        } else {
+          $xeDateRangePicker.dateRangePickerOpenEvent(evnt);
+        }
+      }
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeDateRangePicker = this;
+      $xeDateRangePicker.triggerEvent(evnt);
+    },
+    handleShortcutEvent: function handleShortcutEvent(_ref2) {
+      var option = _ref2.option,
+        $event = _ref2.$event;
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var reactData = $xeDateRangePicker.reactData;
+      var type = props.type;
+      var shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
+      var autoClose = shortcutOpts.autoClose;
+      var code = option.code,
+        clickMethod = option.clickMethod;
+      var startValue = reactData.selectStValue;
+      var endValue = reactData.selectEdValue;
+      var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
+      var shortcutParams = {
+        $dateRangePicker: $xeDateRangePicker,
+        option: option,
+        value: value,
+        startValue: startValue,
+        endValue: endValue,
+        code: code
+      };
+      if (!clickMethod && code) {
+        var gCommandOpts = _ui.commands.get(code);
+        var drpCommandMethod = gCommandOpts ? gCommandOpts.dateRangePickerCommandMethod : null;
+        if (drpCommandMethod) {
+          drpCommandMethod(shortcutParams);
+        } else {
+          var dateValueFormat = $xeDateRangePicker.computeDateValueFormat;
+          var firstDayOfWeek = $xeDateRangePicker.computeFirstDayOfWeek;
+          switch (code) {
+            case 'last1':
+            case 'last3':
+            case 'last7':
+            case 'last30':
+            case 'last60':
+            case 'last90':
+            case 'last180':
+              {
+                var restObj = (0, _util.getRangeDateByCode)(code, value, type, {
+                  valueFormat: dateValueFormat,
+                  firstDay: firstDayOfWeek
+                });
+                startValue = restObj.startValue;
+                endValue = restObj.endValue;
+                value = $xeDateRangePicker.getRangeValue(startValue, endValue);
+                shortcutParams.value = value;
+                shortcutParams.startValue = startValue;
+                shortcutParams.endValue = endValue;
+                $xeDateRangePicker.handleChange(startValue, endValue, $event);
+                break;
+              }
+            default:
+              errLog('vxe.error.notCommands', [code]);
+              break;
+          }
+        }
+      } else {
+        var optClickMethod = clickMethod || shortcutOpts.clickMethod;
+        if (optClickMethod) {
+          optClickMethod(shortcutParams);
+        }
+      }
+      if (autoClose) {
+        $xeDateRangePicker.hidePanel();
+      }
+      $xeDateRangePicker.dispatchEvent('shortcut-click', shortcutParams, $event);
+    },
+    setModelValue: function setModelValue(startValue, endValue) {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      reactData.selectStValue = startValue || '';
+      reactData.selectEdValue = endValue || '';
+      var value = $xeDateRangePicker.getRangeValue(startValue, endValue);
+      $xeDateRangePicker.emitModel(value);
+    },
+    setModelValueByEvent: function setModelValueByEvent(evnt, startValue, endValue) {
+      var $xeDateRangePicker = this;
+      $xeDateRangePicker.handleChange(startValue || '', endValue || '', evnt);
+    },
+    focus: function focus() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var inputElem = $xeDateRangePicker.$refs.refInputTarget;
+      reactData.isActivated = true;
+      inputElem.focus();
+      return $xeDateRangePicker.$nextTick();
+    },
+    blur: function blur() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var inputElem = $xeDateRangePicker.$refs.refInputTarget;
+      inputElem.blur();
+      reactData.isActivated = false;
+      return $xeDateRangePicker.$nextTick();
+    },
+    select: function select() {
+      var $xeDateRangePicker = this;
+      var reactData = $xeDateRangePicker.reactData;
+      var inputElem = $xeDateRangePicker.$refs.refInputTarget;
+      inputElem.select();
+      reactData.isActivated = false;
+      return $xeDateRangePicker.$nextTick();
+    },
+    //
+    // Render
+    //
+    renderShortcutBtn: function renderShortcutBtn(h, pos, isVertical) {
+      var $xeDateRangePicker = this;
+      var shortcutOpts = $xeDateRangePicker.computeShortcutOpts;
+      var position = shortcutOpts.position,
+        align = shortcutOpts.align,
+        mode = shortcutOpts.mode;
+      var shortcutList = $xeDateRangePicker.computeShortcutList;
+      if ((0, _utils.isEnableConf)(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
+        return h('div', {
+          class: "vxe-date-range-picker--layout-".concat(pos, "-wrapper")
+        }, [h(_buttonGroup.default, {
+          props: {
+            options: shortcutList,
+            mode: mode,
+            align: align,
+            vertical: isVertical
+          },
+          on: {
+            click: $xeDateRangePicker.handleShortcutEvent
+          }
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeDateRangePicker);
+    },
+    renderPanel: function renderPanel(h) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var slots = $xeDateRangePicker.$scopedSlots;
+      var reactData = $xeDateRangePicker.reactData;
+      var popupOpts = $xeDateRangePicker.computePopupOpts;
+      if (popupOpts.enabled === false) {
+        return (0, _ui.renderEmptyElement)($xeDateRangePicker);
+      }
+      var type = props.type,
+        separator = props.separator,
+        autoClose = props.autoClose,
+        valueFormat = props.valueFormat,
+        showConfirmButton = props.showConfirmButton,
+        showClearButton = props.showClearButton;
+      var initialized = reactData.initialized,
+        isAniVisible = reactData.isAniVisible,
+        visiblePanel = reactData.visiblePanel,
+        panelPlacement = reactData.panelPlacement,
+        panelStyle = reactData.panelStyle,
+        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 isTimeType = $xeDateRangePicker.computeIsTimeType;
+      var isTimeOrDateTimeType = $xeDateRangePicker.computeIsTimeOrDateTimeType;
+      var defaultDates = $xeDateRangePicker.computeDefaultDates;
+      var defaultTimes = $xeDateRangePicker.computeDefaultTimes;
+      var timeOpts = $xeDateRangePicker.computeTimeOpts;
+      var startLabel = panelLabelObj.startLabel,
+        endLabel = panelLabelObj.endLabel;
+      var position = shortcutOpts.position;
+      var headerSlot = slots.header;
+      var footerSlot = slots.footer;
+      var topSlot = slots.top;
+      var bottomSlot = slots.bottom;
+      var leftSlot = slots.left;
+      var rightSlot = slots.right;
+      var ppClassName = popupOpts.className;
+      var _defaultDates = _slicedToArray(defaultDates, 2),
+        sdDate = _defaultDates[0],
+        edDate = _defaultDates[1];
+      var _defaultTimes = _slicedToArray(defaultTimes, 2),
+        sdTime = _defaultTimes[0],
+        edTime = _defaultTimes[1];
+      var hasShortcutBtn = shortcutList.length > 0;
+      var showConfirmBtn = showConfirmButton === null ? isTimeOrDateTimeType || !autoClose : showConfirmButton;
+      var showClearBtn = showClearButton === null ? isClearable : showClearButton;
+      return h('div', {
+        ref: 'refInputPanel',
+        class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', "type--".concat(type), ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
+          $dateRangePicker: $xeDateRangePicker
+        }) : ppClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', isAniVisible), 'ani--enter', visiblePanel), 'show--top', !!(topSlot || headerSlot || hasShortcutBtn && (position === 'top' || position === 'header'))), 'show--bottom', !!(bottomSlot || footerSlot || hasShortcutBtn && (position === 'bottom' || position === 'footer'))), 'show--left', !!(leftSlot || hasShortcutBtn && position === 'left')), 'show--right', !!(rightSlot || hasShortcutBtn && position === 'right'))],
+        attrs: {
+          placement: panelPlacement
+        },
+        style: panelStyle
+      }, initialized && (visiblePanel || isAniVisible) ? [h('div', {
+        ref: 'refPanelWrapper',
+        class: ['vxe-date-range-picker--layout-all-wrapper', "type--".concat(type), _defineProperty({}, "size--".concat(vSize), vSize)]
+      }, [topSlot ? h('div', {
+        class: 'vxe-date-range-picker--layout-top-wrapper'
+      }, topSlot({})) : $xeDateRangePicker.renderShortcutBtn(h, 'top'), h('div', {
+        class: 'vxe-date-range-picker--layout-body-layout-wrapper'
+      }, [leftSlot ? h('div', {
+        class: 'vxe-date-range-picker--layout-left-wrapper'
+      }, leftSlot({})) : $xeDateRangePicker.renderShortcutBtn(h, 'left', true), h('div', {
+        class: 'vxe-date-range-picker--layout-body-content-wrapper'
+      }, [headerSlot ? h('div', {
+        class: 'vxe-date-range-picker--layout-header-wrapper'
+      }, headerSlot({})) : $xeDateRangePicker.renderShortcutBtn(h, 'header'), h('div', {
+        class: 'vxe-date-range-picker--layout-body-wrapper'
+      }, [h(_datePanel.default, {
+        ref: 'refStartDatePanel',
+        props: {
+          value: paneStartVal,
+          multiple: !isTimeType,
+          valueSort: true,
+          limitCount: 3,
+          defaultMode: 'first',
+          type: props.type,
+          className: props.className,
+          minDate: props.minDate,
+          maxDate: props.maxDate,
+          startDay: props.startDay,
+          labelFormat: props.labelFormat,
+          valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
+          timeFormat: props.timeFormat,
+          defaultDate: sdDate,
+          defaultTime: sdTime,
+          timeConfig: timeOpts,
+          festivalMethod: props.festivalMethod,
+          disabledMethod: props.disabledMethod,
+          cellClassName: $xeDateRangePicker.panelCellClassName,
+          selectDay: props.selectDay
+        },
+        on: {
+          change: $xeDateRangePicker.startPanelChangeEvent,
+          datePrev: $xeDateRangePicker.endPanelDateBtnChangeEvent,
+          dateToday: $xeDateRangePicker.endPanelDateBtnChangeEvent,
+          dateNext: $xeDateRangePicker.endPanelDateBtnChangeEvent
+        }
+      }), h(_datePanel.default, {
+        ref: 'refEndDatePanel',
+        props: {
+          value: paneEndVal,
+          multiple: !isTimeType,
+          valueSort: true,
+          limitCount: 3,
+          defaultMode: 'last',
+          type: props.type,
+          className: props.className,
+          minDate: props.minDate,
+          maxDate: props.maxDate,
+          startDay: props.startDay,
+          labelFormat: props.labelFormat,
+          valueFormat: valueFormat === 'date' || valueFormat === 'timestamp' ? '' : valueFormat,
+          timeFormat: props.timeFormat,
+          defaultDate: edDate,
+          defaultTime: edTime,
+          timeConfig: timeOpts,
+          festivalMethod: props.festivalMethod,
+          disabledMethod: props.disabledMethod,
+          cellClassName: $xeDateRangePicker.panelCellClassName,
+          selectDay: props.selectDay
+        },
+        on: {
+          change: $xeDateRangePicker.endPanelChangeEvent,
+          datePrev: $xeDateRangePicker.endPanelDateBtnChangeEvent,
+          dateToday: $xeDateRangePicker.endPanelDateBtnChangeEvent,
+          dateNext: $xeDateRangePicker.endPanelDateBtnChangeEvent
+        }
+      })]), h('div', {
+        class: 'vxe-date-range-picker--layout-footer-wrapper'
+      }, [h('div', {
+        class: 'vxe-date-range-picker--layout-footer-label'
+      }, startLabel || endLabel ? [h('span', startLabel), h('span', "".concat(separator || '')), h('span', endLabel)] : "".concat(separator || '')), h('div', {
+        class: 'vxe-date-range-picker--layout-footer-custom'
+      }, footerSlot ? footerSlot({}) : [$xeDateRangePicker.renderShortcutBtn(h, 'footer')]), h('div', {
+        class: 'vxe-date-range-picker--layout-footer-btns'
+      }, [showClearBtn ? h(_button.default, {
+        props: {
+          size: 'mini',
+          disabled: !(selectStValue || selectEdValue),
+          content: (0, _ui.getI18n)('vxe.button.clear')
+        },
+        on: {
+          click: $xeDateRangePicker.clearValueEvent
+        }
+      }) : (0, _ui.renderEmptyElement)($xeDateRangePicker), showConfirmBtn ? h(_button.default, {
+        props: {
+          size: 'mini',
+          status: 'primary',
+          content: (0, _ui.getI18n)('vxe.button.confirm')
+        },
+        on: {
+          click: $xeDateRangePicker.confirmEvent
+        }
+      }) : (0, _ui.renderEmptyElement)($xeDateRangePicker)])])]), rightSlot ? h('div', {
+        class: 'vxe-date-range-picker--layout-right-wrapper'
+      }, rightSlot({})) : $xeDateRangePicker.renderShortcutBtn(h, 'right', true)]), bottomSlot ? h('div', {
+        class: 'vxe-date-range-picker--layout-bottom-wrapper'
+      }, bottomSlot({})) : $xeDateRangePicker.renderShortcutBtn(h, 'bottom')])] : []);
+    },
+    renderPrefixIcon: function renderPrefixIcon(h) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var slots = $xeDateRangePicker.$scopedSlots;
+      var prefixIcon = props.prefixIcon;
+      var prefixSlot = slots.prefix;
+      return prefixSlot || prefixIcon ? h('div', {
+        class: 'vxe-date-range-picker--prefix',
+        on: {
+          click: $xeDateRangePicker.clickPrefixEvent
+        }
+      }, [h('div', {
+        class: 'vxe-date-range-picker--prefix-icon'
+      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [h('i', {
+        class: prefixIcon
+      })])]) : null;
+    },
+    renderSuffixIcon: function renderSuffixIcon(h) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var slots = $xeDateRangePicker.$scopedSlots;
+      var reactData = $xeDateRangePicker.reactData;
+      var suffixIcon = props.suffixIcon;
+      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 && (selectStValue || selectEdValue)
+        }]
+      }, [isClearable ? h('div', {
+        class: 'vxe-date-range-picker--clear-icon',
+        on: {
+          click: $xeDateRangePicker.clearValueEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().INPUT_CLEAR
+      })]) : (0, _ui.renderEmptyElement)($xeDateRangePicker), $xeDateRangePicker.renderExtraSuffixIcon(h), suffixSlot || suffixIcon ? h('div', {
+        class: 'vxe-date-range-picker--suffix-icon',
+        on: {
+          click: $xeDateRangePicker.clickSuffixEvent
+        }
+      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [h('i', {
+        class: suffixIcon
+      })]) : (0, _ui.renderEmptyElement)($xeDateRangePicker)]);
+    },
+    renderExtraSuffixIcon: function renderExtraSuffixIcon(h) {
+      var $xeDateRangePicker = this;
+      return h('div', {
+        class: 'vxe-date-range-picker--control-icon',
+        on: {
+          click: $xeDateRangePicker.dateRangePickerOpenEvent
+        }
+      }, [h('i', {
+        class: ['vxe-date-range-picker--date-picker-icon', (0, _ui.getIcon)().DATE_PICKER_DATE]
+      })]);
+    },
+    renderVN: function renderVN(h) {
+      var $xeDateRangePicker = this;
+      var props = $xeDateRangePicker;
+      var reactData = $xeDateRangePicker.reactData;
+      var className = props.className,
+        type = props.type,
+        name = props.name,
+        autoComplete = props.autoComplete;
+      var selectStValue = reactData.selectStValue,
+        selectEdValue = reactData.selectEdValue,
+        visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      var vSize = $xeDateRangePicker.computeSize;
+      var isDisabled = $xeDateRangePicker.computeIsDisabled;
+      var formReadonly = $xeDateRangePicker.computeFormReadonly;
+      var inputLabel = $xeDateRangePicker.computeInputLabel;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-date-range-picker--readonly', "type--".concat(type), className]
+        }, inputLabel);
+      }
+      var inpPlaceholder = $xeDateRangePicker.computeInpPlaceholder;
+      var isClearable = $xeDateRangePicker.computeIsClearable;
+      var prefix = $xeDateRangePicker.renderPrefixIcon(h);
+      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 && (selectStValue || selectEdValue))],
+        attrs: {
+          spellcheck: false
+        }
+      }, [prefix || (0, _ui.renderEmptyElement)($xeDateRangePicker), h('div', {
+        class: 'vxe-date-range-picker--wrapper'
+      }, [h('input', {
+        ref: 'refInputTarget',
+        class: 'vxe-date-range-picker--inner',
+        domProps: {
+          value: inputLabel
+        },
+        attrs: {
+          name: name,
+          type: 'text',
+          placeholder: inpPlaceholder,
+          editable: false,
+          disabled: isDisabled,
+          autocomplete: autoComplete
+        },
+        on: {
+          keydown: $xeDateRangePicker.keydownEvent,
+          keyup: $xeDateRangePicker.keyupEvent,
+          click: $xeDateRangePicker.clickEvent,
+          change: $xeDateRangePicker.changeEvent,
+          focus: $xeDateRangePicker.focusEvent,
+          blur: $xeDateRangePicker.blurEvent
+        }
+      })]), suffix || (0, _ui.renderEmptyElement)($xeDateRangePicker),
+      // 下拉面板
+      $xeDateRangePicker.renderPanel(h)]);
+    }
+  },
+  watch: {
+    value: function value() {
+      var $xeDateRangePicker = this;
+      $xeDateRangePicker.updateModelValue(true);
+    },
+    computeMVal: function computeMVal() {
+      var $xeDateRangePicker = this;
+      $xeDateRangePicker.updateModelValue(false);
+    }
+  },
+  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);
+    _ui.globalEvents.on($xeDateRangePicker, 'keydown', $xeDateRangePicker.handleGlobalKeydownEvent);
+    _ui.globalEvents.on($xeDateRangePicker, 'blur', $xeDateRangePicker.handleGlobalBlurEvent);
+    _ui.globalEvents.on($xeDateRangePicker, 'resize', $xeDateRangePicker.handleGlobalResizeEvent);
+  },
+  deactivated: function deactivated() {
+    var $xeDateRangePicker = this;
+    $xeDateRangePicker.checkValue();
+  },
+  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);
+    }
+    $xeDateRangePicker.checkValue();
+    _ui.globalEvents.off($xeDateRangePicker, 'mousewheel');
+    _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);
+  }
+});
+/* define-vxe-component end */