vxe-pc-ui 3.16.0 → 3.16.1

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

@@ -0,0 +1,1878 @@
+"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 _vn = require("../../ui/src/vn");
+var _util = require("../../date-panel/src/util");
+var _log = require("../../ui/src/log");
+var _datePanel = _interopRequireDefault(require("../../date-panel"));
+var _button = _interopRequireDefault(require("../../button"));
+var _buttonGroup = _interopRequireDefault(require("../../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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
+var _createComponentLog = (0, _log.createComponentLog)('date-picker'),
+  warnLog = _createComponentLog.warnLog,
+  errLog = _createComponentLog.errLog;
+var defaultMaskPlaceholder = '_';
+var maskedTypes = ['year', 'month', 'date', 'datetime', 'time'];
+var inputMaskedKeys = ['y', 'M', 'd', 'H', 'm', 'n', 's'];
+var parseInputKayMaps = {};
+inputMaskedKeys.forEach(function (key) {
+  parseInputKayMaps[key] = true;
+});
+function createReactData() {
+  return {
+    initialized: false,
+    panelIndex: 0,
+    visiblePanel: false,
+    isAniVisible: false,
+    panelStyle: {},
+    panelPlacement: '',
+    isActivated: false,
+    inputValue: '',
+    labelFlag: 0
+  };
+}
+function createInternalData() {
+  return {
+    // hpTimeout: undefined,
+    // fsTimeout: undefined,
+    inputLabel: '',
+    laseFocusMasked: 0
+  };
+}
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeDatePicker',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: [String, Number, Date, Array],
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    type: {
+      type: String,
+      default: 'date'
+    },
+    clearable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.clearable;
+      }
+    },
+    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)().datePicker.size || (0, _ui.getConfig)().size;
+      }
+    },
+    multiple: Boolean,
+    limitCount: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.limitCount;
+      }
+    },
+    // date、week、month、quarter、year
+    startDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.startDate;
+      }
+    },
+    endDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.endDate;
+      }
+    },
+    defaultDate: [String, Number, Date],
+    defaultTime: [String, Number, Date],
+    minDate: [String, Number, Date],
+    maxDate: [String, Number, Date],
+    startDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.startDay;
+      }
+    },
+    labelFormat: String,
+    valueFormat: String,
+    timeFormat: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    festivalMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.festivalMethod;
+      }
+    },
+    disabledMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.disabledMethod;
+      }
+    },
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.selectDay;
+      }
+    },
+    showClearButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.showClearButton;
+      }
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.showConfirmButton;
+      }
+    },
+    autoClose: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().datePicker.autoClose;
+      }
+    },
+    maskedConfig: Object,
+    prefixIcon: String,
+    suffixIcon: String,
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    timeConfig: Object,
+    popupConfig: Object,
+    shortcutConfig: Object,
+    // 已废弃 startWeek，被 startDay 替换
+    startWeek: Number
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeDatePicker = this;
+    return {
+      $xeDatePicker: $xeDatePicker
+    };
+  },
+  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 $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var $xeTable = $xeDatePicker.$xeTable;
+      var $xeModal = $xeDatePicker.$xeModal;
+      var $xeDrawer = $xeDatePicker.$xeDrawer;
+      var $xeForm = $xeDatePicker.$xeForm;
+      var transfer = props.transfer;
+      var popupOpts = $xeDatePicker.computePopupOpts;
+      if (_xeUtils.default.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer;
+      }
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().datePicker.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var $xeForm = $xeDatePicker.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var $xeForm = $xeDatePicker.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeIsTimeType: function computeIsTimeType() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var type = props.type;
+      return type === 'time';
+    },
+    computeIsTimeOrDateTimeType: function computeIsTimeOrDateTimeType() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var type = props.type;
+      var isTimeType = $xeDatePicker.computeIsTimeType;
+      return isTimeType || type === 'datetime';
+    },
+    computeIsDatePickerType: function computeIsDatePickerType() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
+      return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeIsClearable: function computeIsClearable() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return props.clearable;
+    },
+    computeIsDatePanelType: function computeIsDatePanelType() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
+      return isTimeOrDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeDateListValue: function computeDateListValue() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var modelValue = props.value,
+        type = props.type,
+        multiple = props.multiple;
+      var isDatePanelType = $xeDatePicker.computeIsDatePanelType;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      if (multiple && modelValue && isDatePanelType) {
+        return _xeUtils.default.toValueString(modelValue).split(',').map(function (item) {
+          var date = (0, _util.parseDateValue)(item, type, {
+            valueFormat: dateValueFormat
+          });
+          if (_xeUtils.default.isValidDate(date)) {
+            return date;
+          }
+          return date;
+        });
+      }
+      return [];
+    },
+    computeDateStartDate: function computeDateStartDate() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return props.startDate ? _xeUtils.default.toStringDate(props.startDate) : null;
+    },
+    computeDateEndDate: function computeDateEndDate() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return props.endDate ? _xeUtils.default.toStringDate(props.endDate) : null;
+    },
+    computeLimitMaxCount: function computeLimitMaxCount() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return props.multiple ? _xeUtils.default.toNumber(props.limitCount) : 0;
+    },
+    computeDateMultipleValue: function computeDateMultipleValue() {
+      var $xeDatePicker = this;
+      var dateListValue = $xeDatePicker.computeDateListValue;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateValueFormat);
+      });
+    },
+    computeOverCount: function computeOverCount() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var multiple = props.multiple;
+      var limitMaxCount = $xeDatePicker.computeLimitMaxCount;
+      var dateMultipleValue = $xeDatePicker.computeDateMultipleValue;
+      if (multiple && limitMaxCount) {
+        return dateMultipleValue.length >= limitMaxCount;
+      }
+      return false;
+    },
+    computeInputReadonly: function computeInputReadonly() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var type = props.type,
+        editable = props.editable,
+        multiple = props.multiple;
+      var formReadonly = $xeDatePicker.computeFormReadonly;
+      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
+    },
+    computeInpPlaceholder: function computeInpPlaceholder() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      var globalPlaceholder = (0, _ui.getConfig)().datePicker.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.base.pleaseSelect');
+    },
+    computeInpImmediate: function computeInpImmediate() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var immediate = props.immediate;
+      return immediate;
+    },
+    computeTimeOpts: function computeTimeOpts() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return Object.assign({}, (0, _ui.getConfig)().datePicker.timeConfig, props.timeConfig);
+    },
+    computePopupOpts: function computePopupOpts() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return Object.assign({}, (0, _ui.getConfig)().datePicker.popupConfig, props.popupConfig);
+    },
+    computeShortcutOpts: function computeShortcutOpts() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return Object.assign({}, (0, _ui.getConfig)().datePicker.shortcutConfig, props.shortcutConfig);
+    },
+    computeShortcutList: function computeShortcutList() {
+      var $xeDatePicker = this;
+      var shortcutOpts = $xeDatePicker.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 $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var labelFormat = props.labelFormat;
+      return labelFormat || (0, _ui.getI18n)("vxe.input.date.labelFormat.".concat(props.type));
+    },
+    computeDateValueFormat: function computeDateValueFormat() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var type = props.type,
+        valueFormat = props.valueFormat;
+      return (0, _util.handleValueFormat)(type, valueFormat);
+    },
+    computeDateMaskedFormat: function computeDateMaskedFormat() {
+      var $xeDatePicker = this;
+      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
+      return dateLabelFormat;
+    },
+    computeFirstDayOfWeek: function computeFirstDayOfWeek() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var startDay = props.startDay;
+      return _xeUtils.default.toNumber(startDay);
+    },
+    computePanelLabel: function computePanelLabel() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var type = props.type,
+        multiple = props.multiple;
+      var inputValue = reactData.inputValue;
+      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+      var vals = inputValue ? multiple ? inputValue.split(',') : [inputValue] : [];
+      return vals.map(function (val) {
+        var dateObj = (0, _util.parseDateObj)(val, type, {
+          valueFormat: dateValueFormat,
+          labelFormat: dateLabelFormat,
+          firstDay: firstDayOfWeek
+        });
+        return dateObj.label;
+      }).join(', ');
+    },
+    computeMaskedOpts: function computeMaskedOpts() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return Object.assign({}, (0, _ui.getConfig)().datePicker.maskedConfig, props.maskedConfig);
+    },
+    computeMaskChar: function computeMaskChar() {
+      var $xeDatePicker = this;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var maskPlaceholder = maskedOpts.maskPlaceholder;
+      return (maskPlaceholder ? ('' + maskPlaceholder)[0] : '') || defaultMaskPlaceholder;
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeDatePicker = this;
+      $xeDatePicker.$emit(type, (0, _ui.createEvent)(evnt, {
+        $datePicker: $xeDatePicker
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeDatePicker = this;
+      var _events = $xeDatePicker._events;
+      if (_events && _events.modelValue) {
+        $xeDatePicker.$emit('modelValue', value);
+      } else {
+        $xeDatePicker.$emit('model-value', value);
+      }
+    },
+    updateModelValue: function updateModelValue() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var modelValue = props.value;
+      var val = '';
+      if (modelValue) {
+        if (_xeUtils.default.isNumber(modelValue) && /^[0-9]{11,15}$/.test("".concat(modelValue))) {
+          val = new Date(modelValue);
+        } else {
+          val = modelValue;
+        }
+      }
+      reactData.inputValue = val;
+    },
+    handleInputLabel: function handleInputLabel(text, isUpdate) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      internalData.inputLabel = text;
+      if (isUpdate) {
+        reactData.labelFlag++;
+      }
+    },
+    triggerEvent: function triggerEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var inputValue = reactData.inputValue;
+      $xeDatePicker.dispatchEvent(evnt.type, {
+        value: inputValue
+      }, evnt);
+    },
+    handleChange: function handleChange(value, evnt) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var $xeForm = $xeDatePicker.$xeForm;
+      var formItemInfo = $xeDatePicker.formItemInfo;
+      var type = props.type,
+        modelValue = props.value,
+        valueFormat = props.valueFormat;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      reactData.inputValue = value;
+      if ((0, _util.hasTimestampValueType)(valueFormat)) {
+        var dateVal = (0, _util.parseDateValue)(value, type, {
+          valueFormat: dateValueFormat
+        });
+        var timeNum = dateVal ? dateVal.getTime() : null;
+        $xeDatePicker.emitModel(timeNum);
+        if (modelValue !== timeNum) {
+          $xeDatePicker.dispatchEvent('change', {
+            value: timeNum
+          }, evnt);
+          // 自动更新校验状态
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, timeNum);
+          }
+        }
+      } else if ((0, _util.hasDateValueType)(valueFormat)) {
+        var _dateVal = (0, _util.parseDateValue)(value, type, {
+          valueFormat: dateValueFormat
+        });
+        $xeDatePicker.emitModel(_dateVal);
+        if (modelValue && _dateVal ? _xeUtils.default.toStringDate(modelValue).getTime() !== _dateVal.getTime() : modelValue !== _dateVal) {
+          $xeDatePicker.dispatchEvent('change', {
+            value: _dateVal
+          }, evnt);
+          // 自动更新校验状态
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, _dateVal);
+          }
+        }
+      } else {
+        $xeDatePicker.emitModel(value);
+        if (_xeUtils.default.toValueString(modelValue) !== value) {
+          $xeDatePicker.dispatchEvent('change', {
+            value: value
+          }, evnt);
+          // 自动更新校验状态
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+          }
+        }
+      }
+    },
+    inputEvent: function inputEvent(evnt) {
+      var $xeDatePicker = this;
+      var inputElem = evnt.target;
+      var value = inputElem.value;
+      $xeDatePicker.handleInputLabel(value, true);
+      $xeDatePicker.dispatchEvent('input', {
+        value: value
+      }, evnt);
+    },
+    changeEvent: function changeEvent(evnt) {
+      var $xeDatePicker = this;
+      var inpImmediate = $xeDatePicker.computeInpImmediate;
+      if (!inpImmediate) {
+        $xeDatePicker.triggerEvent(evnt);
+      }
+    },
+    clickPrefixEvent: function clickPrefixEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var isDisabled = $xeDatePicker.computeIsDisabled;
+      if (!isDisabled) {
+        var inputValue = reactData.inputValue;
+        $xeDatePicker.dispatchEvent('prefix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    },
+    hidePanel: function hidePanel() {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      return new Promise(function (resolve) {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(function () {
+          reactData.isAniVisible = false;
+          resolve();
+        }, 350);
+      });
+    },
+    dateChange: function dateChange(date, isReload) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var modelValue = props.value,
+        multiple = props.multiple;
+      var isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+      if (props.type === 'week') {
+        var sWeek = _xeUtils.default.toNumber(props.selectDay);
+        date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+      }
+      var inpVal = _xeUtils.default.toDateString(date, dateValueFormat, {
+        firstDay: firstDayOfWeek
+      });
+      if (multiple) {
+        var overCount = $xeDatePicker.computeOverCount;
+        // 如果为多选
+        if (isTimeOrDateTimeType) {
+          // 如果是datetime特殊类型
+          var dateListValue = isReload ? [] : _toConsumableArray($xeDatePicker.computeDateListValue);
+          var datetimeRest = [];
+          var eqIndex = _xeUtils.default.findIndexOf(dateListValue, function (val) {
+            return _xeUtils.default.isDateSame(date, val, 'yyyyMMdd');
+          });
+          if (eqIndex === -1) {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            dateListValue.push(date);
+          } else {
+            dateListValue.splice(eqIndex, 1);
+          }
+          dateListValue.forEach(function (item) {
+            if (item) {
+              datetimeRest.push(item);
+            }
+          });
+          $xeDatePicker.handleChange(datetimeRest.map(function (date) {
+            return _xeUtils.default.toDateString(date, dateValueFormat);
+          }).join(','), {
+            type: 'update'
+          });
+        } else {
+          var dateMultipleValue = isReload ? [] : $xeDatePicker.computeDateMultipleValue;
+          // 如果是日期类型
+          if (dateMultipleValue.some(function (val) {
+            return _xeUtils.default.isEqual(val, inpVal);
+          })) {
+            $xeDatePicker.handleChange(dateMultipleValue.filter(function (val) {
+              return !_xeUtils.default.isEqual(val, inpVal);
+            }).join(','), {
+              type: 'update'
+            });
+          } else {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            $xeDatePicker.handleChange(dateMultipleValue.concat([inpVal]).join(','), {
+              type: 'update'
+            });
+          }
+        }
+      } else {
+        // 如果为单选
+        if (!_xeUtils.default.isEqual(modelValue, inpVal)) {
+          $xeDatePicker.handleChange(inpVal, {
+            type: 'update'
+          });
+        }
+      }
+    },
+    dateRevert: function dateRevert() {
+      var $xeDatePicker = this;
+      var panelLabel = $xeDatePicker.computePanelLabel;
+      $xeDatePicker.handleInputLabel(panelLabel, true);
+    },
+    afterCheckValue: function afterCheckValue(inpVal) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type,
+        editable = props.editable,
+        multiple = props.multiple,
+        maskedConfig = props.maskedConfig;
+      var inputLabel = internalData.inputLabel;
+      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var dateStartDate = $xeDatePicker.computeDateStartDate;
+      var dateEndDate = $xeDatePicker.computeDateEndDate;
+      if (!inpVal) {
+        $xeDatePicker.handleChange('', {
+          type: 'check'
+        });
+        return;
+      }
+      // 掩码格式处理
+      if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+        var allMaskedKeys = dateLabelFormat.match(new RegExp("(".concat(inputMaskedKeys.join('|'), ")+"), 'g'));
+        if (allMaskedKeys) {
+          allMaskedKeys.forEach(function (formatKey) {
+            var fkIndex = dateLabelFormat.indexOf(formatKey);
+            if (fkIndex > -1) {
+              var valStr = inpVal.slice(fkIndex, fkIndex + formatKey.length).replace(/\D/g, '');
+              if (!valStr) {
+                return;
+              }
+              var valNum = _xeUtils.default.toNumber(valStr);
+              // 自动纠错最小值
+              if (!valNum && ['MM', 'dd'].includes(formatKey)) {
+                valNum = 1;
+              }
+              inpVal = inpVal.slice(0, fkIndex) + _xeUtils.default.padStart((0, _util.checkDateInputFormat)(valNum, formatKey), formatKey.length, '0') + inpVal.slice(fkIndex + formatKey.length);
+            }
+          });
+        }
+      }
+      var $datePanel = $xeDatePicker.$refs.refDatePanel;
+      if ($datePanel) {
+        return $datePanel.checkValue(inpVal);
+      }
+      var inpDateVal = (0, _util.parseDateValue)(inpVal, type, {
+        valueFormat: dateLabelFormat
+      });
+      if (!_xeUtils.default.isValidDate(inpDateVal)) {
+        $xeDatePicker.dateRevert();
+        return;
+      }
+      if (type === 'time') {
+        inpDateVal = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat);
+        if (inputLabel !== inpDateVal) {
+          $xeDatePicker.handleChange(inpDateVal, {
+            type: 'check'
+          });
+        }
+        $xeDatePicker.handleInputLabel(inpDateVal, true);
+        return;
+      }
+      if (dateEndDate && inpDateVal > dateEndDate) {
+        inpDateVal = dateEndDate;
+      }
+      if (dateStartDate && inpDateVal < dateStartDate) {
+        inpDateVal = dateStartDate;
+      }
+      var isChange = false;
+      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+      if (type === 'datetime') {
+        var dateValue = reactData.inputValue;
+        if (inpVal !== _xeUtils.default.toDateString(dateValue, dateLabelFormat) || inpVal !== _xeUtils.default.toDateString(inpDateVal, dateLabelFormat)) {
+          isChange = true;
+        }
+      } else {
+        isChange = true;
+      }
+      var label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+        firstDay: firstDayOfWeek
+      });
+      $xeDatePicker.handleInputLabel(label, true);
+      if (isChange) {
+        $xeDatePicker.dateChange(inpDateVal);
+      }
+    },
+    clearValueEvent: function clearValueEvent(evnt, value) {
+      var $xeDatePicker = this;
+      var isDatePickerType = $xeDatePicker.computeIsDatePickerType;
+      if (isDatePickerType) {
+        $xeDatePicker.hidePanel();
+      }
+      $xeDatePicker.handleChange('', evnt);
+      $xeDatePicker.dispatchEvent('clear', {
+        value: value
+      }, evnt);
+    },
+    clickSuffixEvent: function clickSuffixEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var isDisabled = $xeDatePicker.computeIsDisabled;
+      if (!isDisabled) {
+        var inputValue = reactData.inputValue;
+        $xeDatePicker.dispatchEvent('suffix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    },
+    checkMaskedInputValue: function checkMaskedInputValue(numStr, chunkFormat, isFull) {
+      var $xeDatePicker = this;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var align = maskedOpts.align;
+      var maskChar = $xeDatePicker.computeMaskChar;
+      var numVal = _xeUtils.default.toNumber(numStr);
+      var restVal = (0, _util.checkDateInputFormat)(numVal, chunkFormat);
+      if (isFull) {
+        // 自动纠错最小值
+        if (!restVal && ['MM', 'dd'].includes(chunkFormat)) {
+          restVal = 1;
+        }
+      }
+      var restStr = '' + restVal;
+      if (numStr.length > restStr.length) {
+        restStr = restStr.padStart(numStr.length, '0');
+      }
+      if (isFull) {
+        return _xeUtils.default.padStart(restStr, chunkFormat.length, '0');
+      }
+      return _xeUtils.default[align === 'right' ? 'padStart' : 'padEnd'](restVal, chunkFormat.length, maskChar);
+    },
+    handleArrowInputDate: function handleArrowInputDate(evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type,
+        multiple = props.multiple;
+      if (multiple) {
+        return;
+      }
+      var targetElem = $xeDatePicker.$refs.refInputTarget;
+      if (!targetElem) {
+        return;
+      }
+      var inpValue = targetElem.value;
+      if (!inpValue) {
+        return;
+      }
+      var dateMaskedFormat = $xeDatePicker.computeDateMaskedFormat;
+      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
+      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+      var maskChar = $xeDatePicker.computeMaskChar;
+      var selectionStart = targetElem.selectionStart || 0;
+      var selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      var skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+      if (!skRest) {
+        return;
+      }
+      if (isUpArrow || isDwArrow) {
+        var chunkFormat = skRest[0] || '';
+        var chunkStartIndex = skRest.index || 0;
+        var chunkEndIndex = chunkStartIndex + chunkFormat.length;
+        var chunkValue = inpValue.slice(chunkStartIndex, chunkEndIndex);
+        if (parseInputKayMaps[selectKey]) {
+          var chunkNum = ((0, _util.isAllSameChar)(chunkValue, maskChar) ? (0, _util.getChunkDefaultNum)(selectKey) : _xeUtils.default.toNumber(chunkValue)) + (isUpArrow ? 1 : -1);
+          var restValue = inpValue.slice(0, chunkStartIndex) + $xeDatePicker.checkMaskedInputValue('' + chunkNum, chunkFormat, true) + inpValue.slice(chunkEndIndex);
+          evnt.preventDefault();
+          if (restValue.indexOf(maskChar) === -1) {
+            // 解析日期
+            var inpDateVal = (0, _util.parseDateValue)(restValue, type, {
+              valueFormat: dateLabelFormat
+            });
+            if (_xeUtils.default.isValidDate(inpDateVal)) {
+              var label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+                firstDay: firstDayOfWeek
+              });
+              targetElem.value = label;
+              $xeDatePicker.handleInputLabel(label, false);
+            }
+          } else {
+            targetElem.value = restValue;
+            $xeDatePicker.handleInputLabel(restValue, false);
+          }
+        }
+        targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+      } else if (isLtArrow || isRtArrow) {
+        var currKeyIndex = inputMaskedKeys.indexOf(selectKey);
+        if (currKeyIndex > -1) {
+          var allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp("(".concat(inputMaskedKeys.join('|'), ")+"), 'g')) || [], function (fullKey) {
+            return fullKey[0];
+          });
+          var currIndex = _xeUtils.default.findIndexOf(allMaskedKeys, function (key) {
+            return selectKey === key[0];
+          });
+          var targetFormatKey = isLtArrow ? allMaskedKeys[currIndex - 1] || allMaskedKeys[0] : allMaskedKeys[currIndex + 1] || allMaskedKeys[allMaskedKeys.length - 1];
+          var targetKey = targetFormatKey ? targetFormatKey[0] : '';
+          var sktRest = dateMaskedFormat.match(new RegExp(targetKey + '+'));
+          if (sktRest) {
+            evnt.preventDefault();
+            var mtStartIndex = sktRest.index || 0;
+            var mtEndIndex = mtStartIndex + sktRest[0].length;
+            targetElem.setSelectionRange(mtStartIndex, mtEndIndex);
+          }
+        }
+      }
+      internalData.isTriggerMasked = true;
+    },
+    handleMaskedInputDate: function handleMaskedInputDate(evnt) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var internalData = $xeDatePicker.internalData;
+      var multiple = props.multiple;
+      if (multiple) {
+        return;
+      }
+      var targetElem = $xeDatePicker.$refs.refInputTarget;
+      if (!targetElem) {
+        return;
+      }
+      var isControlKey = (0, _dom.hasControlKey)(evnt);
+      if (isControlKey) {
+        return;
+      }
+      evnt.preventDefault();
+      var eKey = evnt.key;
+      var isDeleleKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+      var isBackspaceKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.BACKSPACE);
+      var isNumKey = eKey >= '0' && eKey <= '9';
+      var numKey = isNumKey ? evnt.key : '';
+      if (!(isDeleleKey || isBackspaceKey || isNumKey)) {
+        return;
+      }
+      var isTriggerMasked = internalData.isTriggerMasked;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var align = maskedOpts.align;
+      var dateMaskedFormat = $xeDatePicker.computeDateMaskedFormat;
+      var maskChar = $xeDatePicker.computeMaskChar;
+      var inpValue = targetElem.value || dateMaskedFormat;
+      var selectionStart = targetElem.selectionStart || 0;
+      var selectionEnd = targetElem.selectionEnd || 0;
+      var selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      var skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+      if (!skRest) {
+        return;
+      }
+      var allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp("(".concat(inputMaskedKeys.join('|'), ")+"), 'g')) || [], function (fullKey) {
+        return fullKey[0];
+      });
+      var chunkFormat = skRest[0] || '';
+      var chunkStartIndex = skRest.index || 0;
+      var chunkEndIndex = chunkStartIndex + chunkFormat.length;
+      var currKeyIndex = allMaskedKeys.indexOf(selectKey);
+      // 全选 | 如果无效字符
+      var isAllSelected = !selectionStart && selectionEnd === inpValue.length && allMaskedKeys.length > 1;
+      var isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+      if (isAllSelected || isNotMasked) {
+        inpValue = dateMaskedFormat;
+      }
+      var chunkValue = isDeleleKey ? '' : inpValue.slice(chunkStartIndex, chunkEndIndex);
+      var chunkNums = chunkValue.match(/\d/g) || [];
+      var chunkNumList = isTriggerMasked && !isBackspaceKey ? [] : chunkNums.slice(0);
+      if (isNumKey) {
+        chunkNumList.push(numKey);
+        chunkValue = $xeDatePicker.checkMaskedInputValue(chunkNumList.join(''), chunkFormat, false);
+      } else if (isBackspaceKey) {
+        chunkNumList.pop();
+        chunkValue = _xeUtils.default[align === 'right' ? 'padStart' : 'padEnd'](chunkNumList.join(''), chunkFormat.length, maskChar);
+      }
+      var restValue = inpValue.slice(0, chunkStartIndex) + chunkValue + inpValue.slice(chunkEndIndex);
+      restValue = restValue.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+      targetElem.value = restValue;
+      $xeDatePicker.handleInputLabel(restValue, false);
+      // 如果是全选/删除
+      if (isAllSelected) {
+        if (isBackspaceKey || isDeleleKey) {
+          var firstMaskedKeys = allMaskedKeys[0];
+          var firstSkRest = dateMaskedFormat.match(new RegExp("".concat(firstMaskedKeys, "+")));
+          if (firstSkRest) {
+            var firstChunkFormat = firstSkRest[0];
+            targetElem.setSelectionRange(0, firstChunkFormat.length);
+            internalData.isTriggerMasked = true;
+            return;
+          }
+        }
+      } else {
+        if (isBackspaceKey && !chunkNums.length) {
+          // 回退到上一个数字块
+          for (var i = currKeyIndex - 1; i >= 0; i--) {
+            var prveChunkKey = allMaskedKeys[i];
+            var prveSkRest = dateMaskedFormat.match(new RegExp("".concat(prveChunkKey, "+")));
+            if (prveSkRest) {
+              var prveChunkFormat = prveSkRest[0];
+              var prveChunkStartIndex = prveSkRest.index || 0;
+              var prveChunkEndIndex = prveChunkStartIndex + prveChunkFormat.length;
+              var prveChunkValue = restValue.slice(prveChunkStartIndex, prveChunkEndIndex);
+              var prveChunkNums = prveChunkValue.match(/\d/g) || [];
+              if (prveChunkNums.length) {
+                prveChunkNums.pop();
+                prveChunkValue = _xeUtils.default[align === 'right' ? 'padStart' : 'padEnd'](prveChunkNums.join(''), prveChunkFormat.length, maskChar);
+                restValue = restValue.slice(0, prveChunkStartIndex) + prveChunkValue + restValue.slice(prveChunkEndIndex);
+                targetElem.value = restValue;
+                $xeDatePicker.handleInputLabel(restValue, false);
+                targetElem.setSelectionRange(prveChunkStartIndex, prveChunkEndIndex);
+                return;
+              }
+            }
+          }
+          var _firstMaskedKeys = allMaskedKeys[0];
+          var _firstSkRest = dateMaskedFormat.match(new RegExp("".concat(_firstMaskedKeys, "+")));
+          if (_firstSkRest) {
+            var _firstChunkFormat = _firstSkRest[0];
+            restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+            targetElem.value = restValue;
+            $xeDatePicker.handleInputLabel(restValue, false);
+            targetElem.setSelectionRange(0, _firstChunkFormat.length);
+            internalData.isTriggerMasked = true;
+            return;
+          }
+          return;
+        }
+      }
+      var maskStartIndex = skRest.index || 0;
+      var maskEndIndex = maskStartIndex + skRest[0].length;
+      // 如果输入完成，跳转下一个
+      if (chunkNumList.length >= chunkValue.length) {
+        var nextKeys = allMaskedKeys.slice(currKeyIndex + 1);
+        if (currKeyIndex > -1) {
+          var nextRest = nextKeys.length ? dateMaskedFormat.match(new RegExp("(".concat(nextKeys.join('|'), ")+"))) : null;
+          // 如果当前数字块已输入，则跳转下一个数字块
+          if (nextRest) {
+            maskStartIndex = nextRest.index || 0;
+            maskEndIndex = maskStartIndex + nextRest[0].length;
+            targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+          } else {
+            targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+          }
+        }
+        internalData.isTriggerMasked = true;
+        return;
+      }
+      targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+      internalData.isTriggerMasked = false;
+    },
+    handleMaskedSelectedDate: function handleMaskedSelectedDate(evnt, isFocus) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type,
+        multiple = props.multiple,
+        modelValue = props.value;
+      internalData.fsTimeout = undefined;
+      if (multiple) {
+        return;
+      }
+      if (!maskedTypes.includes(type)) {
+        return;
+      }
+      var targetElem = $xeDatePicker.$refs.refInputTarget;
+      if (!targetElem) {
+        return;
+      }
+      var laseFocusMasked = internalData.laseFocusMasked;
+      if (laseFocusMasked && Date.now() - laseFocusMasked < 100) {
+        return;
+      }
+      var dateMaskedFormat = $xeDatePicker.computeDateMaskedFormat;
+      var maskChar = $xeDatePicker.computeMaskChar;
+      var selectionStart = targetElem.selectionStart || 0;
+      var selectionEnd = targetElem.selectionEnd || 0;
+      var inpValue = targetElem.value;
+      var allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp("(".concat(inputMaskedKeys.join('|'), ")+"), 'g')) || [], function (fullKey) {
+        return fullKey[0];
+      });
+      // 如果为空
+      if (!inpValue) {
+        var restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+        // 还原值
+        if (isFocus && modelValue) {
+          var chunkNums = ('' + _xeUtils.default.toNumber(modelValue)).match(/\d/g) || [];
+          var useNumIndex = 0;
+          restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), function (txt) {
+            return chunkNums[useNumIndex++] || txt;
+          });
+        }
+        var firstMaskedKeys = allMaskedKeys[0];
+        var firstSkRest = dateMaskedFormat.match(new RegExp("".concat(firstMaskedKeys, "+")));
+        if (firstSkRest) {
+          evnt.preventDefault();
+          var firstChunkFormat = firstSkRest[0];
+          targetElem.value = restValue;
+          $xeDatePicker.handleInputLabel(restValue, false);
+          targetElem.setSelectionRange(0, firstChunkFormat.length);
+          internalData.laseFocusMasked = Date.now();
+          return;
+        }
+      }
+      // 全选 | 如果无效字符
+      var isAllSelected = !selectionStart && selectionEnd === inpValue.length && allMaskedKeys.length > 1;
+      var isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+      if (isAllSelected || isNotMasked) {
+        var _restValue = '';
+        // 还原值
+        if (isNotMasked && inpValue) {
+          var _chunkNums = inpValue.match(/\d/g) || [];
+          var _useNumIndex = 0;
+          _restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), function () {
+            return _chunkNums[_useNumIndex++] || maskChar;
+          });
+        } else {
+          dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+        }
+        var _firstMaskedKeys2 = allMaskedKeys[0];
+        var _firstSkRest2 = dateMaskedFormat.match(new RegExp("".concat(_firstMaskedKeys2, "+")));
+        if (_firstSkRest2) {
+          evnt.preventDefault();
+          var _firstChunkFormat2 = _firstSkRest2[0];
+          targetElem.value = _restValue;
+          $xeDatePicker.handleInputLabel(_restValue, false);
+          targetElem.setSelectionRange(0, _firstChunkFormat2.length);
+          internalData.laseFocusMasked = Date.now();
+          return;
+        }
+      }
+      // 是否选择数字块
+      var selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      if (selectKey) {
+        evnt.preventDefault();
+        var skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+        if (skRest) {
+          var chunkFormat = skRest[0] || '';
+          var chunkStartIndex = skRest.index || 0;
+          var chunkEndIndex = chunkStartIndex + chunkFormat.length;
+          targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+          internalData.isTriggerMasked = true;
+          internalData.laseFocusMasked = Date.now();
+        }
+      }
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var $xeForm = $xeDatePicker.$xeForm;
+      var formItemInfo = $xeDatePicker.formItemInfo;
+      var inputValue = reactData.inputValue;
+      var inpImmediate = $xeDatePicker.computeInpImmediate;
+      var value = inputValue;
+      if (!inpImmediate) {
+        $xeDatePicker.handleChange(value, evnt);
+      }
+      if (!reactData.visiblePanel) {
+        var inputLabel = internalData.inputLabel;
+        reactData.isActivated = false;
+        // 未打开面板时才校验
+        $xeDatePicker.afterCheckValue(inputLabel);
+      }
+      $xeDatePicker.dispatchEvent('blur', {
+        value: value
+      }, evnt);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      }
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var fsTimeout = internalData.fsTimeout;
+      var multiple = props.multiple,
+        editable = props.editable,
+        maskedConfig = props.maskedConfig;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var popupOpts = $xeDatePicker.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      reactData.isActivated = true;
+      if (fsTimeout) {
+        clearTimeout(fsTimeout);
+      }
+      if (!trigger || trigger === 'default') {
+        $xeDatePicker.datePickerOpenEvent(evnt);
+      } else if (trigger === 'icon') {
+        $xeDatePicker.hidePanel();
+      }
+      if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+        internalData.fsTimeout = setTimeout(function () {
+          $xeDatePicker.handleMaskedSelectedDate(evnt, true);
+        }, 20);
+      }
+      $xeDatePicker.triggerEvent(evnt);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var internalData = $xeDatePicker.internalData;
+      var multiple = props.multiple,
+        editable = props.editable,
+        maskedConfig = props.maskedConfig;
+      var fsTimeout = internalData.fsTimeout;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      if (fsTimeout) {
+        clearTimeout(fsTimeout);
+      }
+      if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+        internalData.fsTimeout = setTimeout(function () {
+          $xeDatePicker.handleMaskedSelectedDate(evnt);
+        }, 10);
+      }
+      $xeDatePicker.triggerEvent(evnt);
+    },
+    keydownEvent: function keydownEvent(evnt) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type,
+        editable = props.editable,
+        maskedConfig = props.maskedConfig;
+      var visiblePanel = reactData.visiblePanel;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+      var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+      var isLtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+      var isRtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+      var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+      if (editable) {
+        if (isEnter) {
+          var inputLabel = internalData.inputLabel;
+          if (visiblePanel) {
+            $xeDatePicker.hidePanel();
+          }
+          $xeDatePicker.afterCheckValue(inputLabel);
+        } else if (maskedTypes.includes(type)) {
+          if ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled) {
+            if (maskedOpts.isArrow && (isUpArrow || isDwArrow || isLtArrow || isRtArrow)) {
+              $xeDatePicker.handleArrowInputDate(evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow);
+            } else if (maskedOpts.isMasked) {
+              $xeDatePicker.handleMaskedInputDate(evnt);
+            }
+          }
+        }
+      }
+      $xeDatePicker.triggerEvent(evnt);
+    },
+    keyupEvent: function keyupEvent(evnt) {
+      var $xeDatePicker = this;
+      $xeDatePicker.triggerEvent(evnt);
+    },
+    confirmEvent: function confirmEvent(evnt) {
+      var $xeDatePicker = this;
+      var $datePanel = $xeDatePicker.$refs.refDatePanel;
+      if ($datePanel) {
+        $datePanel.confirmByEvent(evnt);
+      }
+      $xeDatePicker.hidePanel();
+    },
+    panelChangeEvent: function panelChangeEvent(params) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var multiple = props.multiple,
+        autoClose = props.autoClose;
+      var value = params.value,
+        $event = params.$event;
+      var isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
+      $xeDatePicker.handleChange(value, $event);
+      if (!multiple && !isTimeOrDateTimeType) {
+        if (autoClose) {
+          $xeDatePicker.hidePanel();
+        }
+      }
+    },
+    panelConfirmEvent: function panelConfirmEvent(params) {
+      var $xeDatePicker = this;
+      $xeDatePicker.dispatchEvent('confirm', params, params.$event);
+    },
+    panelRevertEvent: function panelRevertEvent(params) {
+      var $xeDatePicker = this;
+      $xeDatePicker.handleInputLabel(params.label, true);
+    },
+    // 全局事件
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      var el = $xeDatePicker.$refs.refElem;
+      var panelWrapperElem = $xeDatePicker.$refs.refPanelWrapper;
+      var isDisabled = $xeDatePicker.computeIsDisabled;
+      if (!isDisabled && isActivated) {
+        var currActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
+        if (currActivated !== isActivated) {
+          reactData.isActivated = currActivated;
+        }
+        if (!currActivated) {
+          if (visiblePanel) {
+            $xeDatePicker.hidePanel();
+            var inputLabel = internalData.inputLabel;
+            $xeDatePicker.afterCheckValue(inputLabel);
+          }
+        }
+      }
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeDatePicker.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) {
+            $xeDatePicker.hidePanel();
+          }
+        }
+      }
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeDatePicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelWrapperElem = $xeDatePicker.$refs.refPanelWrapper;
+          if ((0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag) {
+            $xeDatePicker.updatePlacement();
+          } else {
+            $xeDatePicker.hidePanel();
+          }
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var isActivated = reactData.isActivated,
+        visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeDatePicker.hidePanel();
+      }
+      if (isActivated) {
+        reactData.isActivated = false;
+      }
+      if (visiblePanel || isActivated) {
+        $xeDatePicker.afterCheckValue(internalData.inputLabel);
+        var targetElem = $xeDatePicker.$refs.refInputTarget;
+        if (targetElem) {
+          targetElem.blur();
+        }
+      }
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeDatePicker.updatePlacement();
+      }
+    },
+    // 弹出面板
+    updateZindex: function updateZindex() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var popupOpts = $xeDatePicker.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 $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var placement = props.placement;
+      var panelIndex = reactData.panelIndex;
+      var targetElem = $xeDatePicker.$refs.refInputTarget;
+      var panelElem = $xeDatePicker.$refs.refInputPanel;
+      if (!panelElem) {
+        return $xeDatePicker.$nextTick();
+      }
+      var btnTransfer = $xeDatePicker.computeBtnTransfer;
+      var popupOpts = $xeDatePicker.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 $xeDatePicker.$nextTick().then(handleStyle);
+    },
+    showPanel: function showPanel() {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeDatePicker.computeIsDisabled;
+      var btnTransfer = $xeDatePicker.computeBtnTransfer;
+      var panelElem = $xeDatePicker.$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;
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        setTimeout(function () {
+          reactData.visiblePanel = true;
+          $xeDatePicker.updatePlacement();
+        }, 10);
+        $xeDatePicker.updateZindex();
+        return $xeDatePicker.updatePlacement();
+      }
+      return $xeDatePicker.$nextTick();
+    },
+    datePickerOpenEvent: function datePickerOpenEvent(evnt) {
+      var $xeDatePicker = this;
+      var formReadonly = $xeDatePicker.computeFormReadonly;
+      if (!formReadonly) {
+        evnt.preventDefault();
+        $xeDatePicker.showPanel();
+      }
+    },
+    clickIconEvent: function clickIconEvent(evnt) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var popupOpts = $xeDatePicker.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      if (!trigger || trigger === 'default' || trigger === 'icon') {
+        if (visiblePanel) {
+          $xeDatePicker.hidePanel();
+        } else {
+          $xeDatePicker.datePickerOpenEvent(evnt);
+        }
+      }
+    },
+    handleShortcutEvent: function handleShortcutEvent(_ref) {
+      var option = _ref.option,
+        $event = _ref.$event;
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var type = props.type;
+      var inputValue = reactData.inputValue;
+      var shortcutOpts = $xeDatePicker.computeShortcutOpts;
+      var autoClose = shortcutOpts.autoClose;
+      var code = option.code,
+        clickMethod = option.clickMethod;
+      var value = inputValue;
+      var shortcutParams = {
+        $datePicker: $xeDatePicker,
+        option: option,
+        value: value,
+        code: code
+      };
+      if (!clickMethod && code) {
+        var gCommandOpts = _ui.commands.get(code);
+        var dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null;
+        if (dpCommandMethod) {
+          dpCommandMethod(shortcutParams);
+        } else {
+          var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+          var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+          switch (code) {
+            case 'now':
+            case 'prev':
+            case 'next':
+            case 'minus':
+            case 'plus':
+              {
+                var restObj = (0, _util.getDateByCode)(code, value, type, {
+                  valueFormat: dateValueFormat,
+                  firstDay: firstDayOfWeek
+                });
+                value = restObj.value;
+                shortcutParams.value = value;
+                $xeDatePicker.handleChange(value, $event);
+                break;
+              }
+            default:
+              errLog('vxe.error.notCommands', [code]);
+              break;
+          }
+        }
+      } else {
+        var optClickMethod = clickMethod || shortcutOpts.clickMethod;
+        if (optClickMethod) {
+          optClickMethod(shortcutParams);
+        }
+      }
+      if (autoClose) {
+        $xeDatePicker.hidePanel();
+      }
+      $xeDatePicker.dispatchEvent('shortcut-click', shortcutParams, $event);
+    },
+    setModelValue: function setModelValue(value) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      reactData.inputValue = value;
+      $xeDatePicker.emitModel(value);
+    },
+    setModelValueByEvent: function setModelValueByEvent(evnt, value) {
+      var $xeDatePicker = this;
+      $xeDatePicker.handleChange(value || '', evnt);
+    },
+    focus: function focus() {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var inputElem = $xeDatePicker.$refs.refInputTarget;
+      reactData.isActivated = true;
+      inputElem.focus();
+      return $xeDatePicker.$nextTick();
+    },
+    blur: function blur() {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var inputElem = $xeDatePicker.$refs.refInputTarget;
+      inputElem.blur();
+      reactData.isActivated = false;
+      return $xeDatePicker.$nextTick();
+    },
+    select: function select() {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var inputElem = $xeDatePicker.$refs.refInputTarget;
+      inputElem.select();
+      reactData.isActivated = false;
+      return $xeDatePicker.$nextTick();
+    },
+    //
+    // Render
+    //
+    renderShortcutBtn: function renderShortcutBtn(h, pos, isVertical) {
+      var $xeDatePicker = this;
+      var shortcutOpts = $xeDatePicker.computeShortcutOpts;
+      var position = shortcutOpts.position,
+        align = shortcutOpts.align,
+        mode = shortcutOpts.mode;
+      var shortcutList = $xeDatePicker.computeShortcutList;
+      if ((0, _utils.isEnableConf)(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
+        return h('div', {
+          class: "vxe-date-picker--layout-".concat(pos, "-wrapper")
+        }, [h(_buttonGroup.default, {
+          props: {
+            options: shortcutList,
+            mode: mode,
+            align: align,
+            vertical: isVertical
+          },
+          on: {
+            click: $xeDatePicker.handleShortcutEvent
+          }
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeDatePicker);
+    },
+    renderPanel: function renderPanel(h) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var slots = $xeDatePicker.$scopedSlots;
+      var reactData = $xeDatePicker.reactData;
+      var popupOpts = $xeDatePicker.computePopupOpts;
+      if (popupOpts.enabled === false) {
+        return (0, _ui.renderEmptyElement)($xeDatePicker);
+      }
+      var type = props.type,
+        multiple = props.multiple,
+        showClearButton = props.showClearButton,
+        showConfirmButton = props.showConfirmButton;
+      var initialized = reactData.initialized,
+        isAniVisible = reactData.isAniVisible,
+        visiblePanel = reactData.visiblePanel,
+        panelPlacement = reactData.panelPlacement,
+        panelStyle = reactData.panelStyle,
+        inputValue = reactData.inputValue;
+      var vSize = $xeDatePicker.computeSize;
+      var btnTransfer = $xeDatePicker.computeBtnTransfer;
+      var shortcutOpts = $xeDatePicker.computeShortcutOpts;
+      var isClearable = $xeDatePicker.computeIsClearable;
+      var isTimeOrDateTimeType = $xeDatePicker.computeIsTimeOrDateTimeType;
+      var shortcutList = $xeDatePicker.computeShortcutList;
+      var timeOpts = $xeDatePicker.computeTimeOpts;
+      var dateStartDate = $xeDatePicker.computeDateStartDate;
+      var dateEndDate = $xeDatePicker.computeDateEndDate;
+      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 hasShortcutBtn = shortcutList.length > 0;
+      var showConfirmBtn = showConfirmButton === null ? isTimeOrDateTimeType || multiple : showConfirmButton;
+      var showClearBtn = showClearButton === null ? isClearable && showConfirmBtn && type !== 'time' : showClearButton;
+      return h('div', {
+        ref: 'refInputPanel',
+        class: ['vxe-table--ignore-clear vxe-date-picker--panel', "type--".concat(type), _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-picker--layout-all-wrapper', "type--".concat(type), ppClassName ? _xeUtils.default.isFunction(ppClassName) ? ppClassName({
+          $datePicker: $xeDatePicker
+        }) : ppClassName : '', _defineProperty({}, "size--".concat(vSize), vSize)]
+      }, [topSlot ? h('div', {
+        class: 'vxe-date-picker--layout-top-wrapper'
+      }, topSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'top'), h('div', {
+        class: 'vxe-date-picker--layout-body-layout-wrapper'
+      }, [leftSlot ? h('div', {
+        class: 'vxe-date-picker--layout-left-wrapper'
+      }, leftSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'left', true), h('div', {
+        class: 'vxe-date-picker--layout-body-content-wrapper'
+      }, [headerSlot ? h('div', {
+        class: 'vxe-date-picker--layout-header-wrapper'
+      }, headerSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'header'), h('div', {
+        class: 'vxe-date-picker--layout-body-wrapper'
+      }, [h(_datePanel.default, {
+        ref: 'refDatePanel',
+        props: {
+          value: reactData.inputValue,
+          type: props.type,
+          className: props.className,
+          multiple: props.multiple,
+          limitCount: props.limitCount,
+          startDate: dateStartDate,
+          endDate: dateEndDate,
+          defaultDate: props.defaultDate,
+          defaultTime: props.defaultTime,
+          minDate: props.minDate,
+          maxDate: props.maxDate,
+          startDay: props.startDay,
+          labelFormat: props.labelFormat,
+          valueFormat: props.valueFormat,
+          timeFormat: props.timeFormat,
+          timeConfig: timeOpts,
+          festivalMethod: props.festivalMethod,
+          disabledMethod: props.disabledMethod,
+          selectDay: props.selectDay
+        },
+        on: {
+          change: $xeDatePicker.panelChangeEvent,
+          confirm: $xeDatePicker.panelConfirmEvent,
+          revert: $xeDatePicker.panelRevertEvent
+        }
+      })]), h('div', {
+        class: 'vxe-date-picker--layout-footer-wrapper'
+      }, [h('div', {
+        class: 'vxe-date-picker--layout-footer-custom'
+      }, footerSlot ? footerSlot({}) : [$xeDatePicker.renderShortcutBtn(h, 'footer')]), showClearBtn || showConfirmBtn ? h('div', {
+        class: 'vxe-date-picker--layout-footer-btns'
+      }, [showClearBtn ? h(_button.default, {
+        props: {
+          size: 'mini',
+          disabled: inputValue === '' || _xeUtils.default.eqNull(inputValue),
+          content: (0, _ui.getI18n)('vxe.button.clear')
+        },
+        on: {
+          click: $xeDatePicker.clearValueEvent
+        }
+      }) : (0, _ui.renderEmptyElement)($xeDatePicker), showConfirmBtn ? h(_button.default, {
+        props: {
+          size: 'mini',
+          status: 'primary',
+          content: (0, _ui.getI18n)('vxe.button.confirm')
+        },
+        on: {
+          click: $xeDatePicker.confirmEvent
+        }
+      }) : (0, _ui.renderEmptyElement)($xeDatePicker)]) : (0, _ui.renderEmptyElement)($xeDatePicker)])]), rightSlot ? h('div', {
+        class: 'vxe-date-picker--layout-right-wrapper'
+      }, rightSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'right', true)]), bottomSlot ? h('div', {
+        class: 'vxe-date-picker--layout-bottom-wrapper'
+      }, bottomSlot({})) : $xeDatePicker.renderShortcutBtn(h, 'bottom')])] : []);
+    },
+    renderPrefixIcon: function renderPrefixIcon(h) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var slots = $xeDatePicker.$scopedSlots;
+      var prefixIcon = props.prefixIcon;
+      var prefixSlot = slots.prefix;
+      return prefixSlot || prefixIcon ? h('div', {
+        class: 'vxe-date-picker--prefix',
+        on: {
+          click: $xeDatePicker.clickPrefixEvent
+        }
+      }, [h('div', {
+        class: 'vxe-date-picker--prefix-icon'
+      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [h('i', {
+        class: prefixIcon
+      })])]) : null;
+    },
+    renderSuffixIcon: function renderSuffixIcon(h) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var slots = $xeDatePicker.$scopedSlots;
+      var reactData = $xeDatePicker.reactData;
+      var suffixIcon = props.suffixIcon;
+      var inputValue = reactData.inputValue;
+      var suffixSlot = slots.suffix;
+      var isDisabled = $xeDatePicker.computeIsDisabled;
+      var isClearable = $xeDatePicker.computeIsClearable;
+      return h('div', {
+        class: ['vxe-date-picker--suffix', {
+          'is--clear': isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
+        }]
+      }, [isClearable ? h('div', {
+        class: 'vxe-date-picker--clear-icon',
+        on: {
+          click: $xeDatePicker.clearValueEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().INPUT_CLEAR
+      })]) : (0, _ui.renderEmptyElement)($xeDatePicker), $xeDatePicker.renderExtraSuffixIcon(h), suffixSlot || suffixIcon ? h('div', {
+        class: 'vxe-date-picker--suffix-icon',
+        on: {
+          click: $xeDatePicker.clickSuffixEvent
+        }
+      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [h('i', {
+        class: suffixIcon
+      })]) : (0, _ui.renderEmptyElement)($xeDatePicker)]);
+    },
+    renderExtraSuffixIcon: function renderExtraSuffixIcon(h) {
+      var $xeDatePicker = this;
+      return h('div', {
+        class: 'vxe-date-picker--control-icon',
+        on: {
+          click: $xeDatePicker.clickIconEvent
+        }
+      }, [h('i', {
+        class: ['vxe-date-picker--date-picker-icon', (0, _ui.getIcon)().DATE_PICKER_DATE]
+      })]);
+    },
+    renderVN: function renderVN(h) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var className = props.className,
+        type = props.type,
+        name = props.name,
+        autoComplete = props.autoComplete;
+      var inputValue = reactData.inputValue,
+        visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated,
+        labelFlag = reactData.labelFlag;
+      var inputLabel = internalData.inputLabel;
+      var vSize = $xeDatePicker.computeSize;
+      var isDisabled = $xeDatePicker.computeIsDisabled;
+      var formReadonly = $xeDatePicker.computeFormReadonly;
+      var panelLabel = $xeDatePicker.computePanelLabel;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-date-picker--readonly', "type--".concat(type), className]
+        }, panelLabel);
+      }
+      var inputReadonly = $xeDatePicker.computeInputReadonly;
+      var inpPlaceholder = $xeDatePicker.computeInpPlaceholder;
+      var isClearable = $xeDatePicker.computeIsClearable;
+      var prefix = $xeDatePicker.renderPrefixIcon(h);
+      var suffix = $xeDatePicker.renderSuffixIcon(h);
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-date-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 && !(inputValue === '' || _xeUtils.default.eqNull(inputValue)))],
+        attrs: {
+          spellcheck: false
+        }
+      }, [prefix || (0, _ui.renderEmptyElement)($xeDatePicker), h('div', {
+        class: 'vxe-date-picker--wrapper'
+      }, [h('input', {
+        ref: 'refInputTarget',
+        class: 'vxe-date-picker--inner',
+        domProps: {
+          value: labelFlag ? inputLabel : ''
+        },
+        attrs: {
+          name: name,
+          type: 'text',
+          placeholder: inpPlaceholder,
+          readonly: inputReadonly,
+          disabled: isDisabled,
+          autocomplete: autoComplete
+        },
+        on: {
+          keydown: $xeDatePicker.keydownEvent,
+          keyup: $xeDatePicker.keyupEvent,
+          click: $xeDatePicker.clickEvent,
+          input: $xeDatePicker.inputEvent,
+          change: $xeDatePicker.changeEvent,
+          focus: $xeDatePicker.focusEvent,
+          blur: $xeDatePicker.blurEvent
+        }
+      })]), suffix || (0, _ui.renderEmptyElement)($xeDatePicker),
+      // 下拉面板
+      $xeDatePicker.renderPanel(h)]);
+    }
+  },
+  watch: {
+    computePanelLabel: function computePanelLabel(val) {
+      var $xeDatePicker = this;
+      $xeDatePicker.handleInputLabel(val, true);
+    },
+    value: function value() {
+      var $xeDatePicker = this;
+      $xeDatePicker.updateModelValue();
+    }
+  },
+  created: function created() {
+    var $xeDatePicker = this;
+    var props = $xeDatePicker;
+    $xeDatePicker.internalData = createInternalData();
+    var type = props.type,
+      multiple = props.multiple,
+      maskedConfig = props.maskedConfig;
+    if ((0, _utils.isEnableConf)(maskedConfig)) {
+      if (multiple) {
+        errLog('vxe.error.notSupportProp', ['multiple', 'control-config.enabled=true', 'control-config.enabled=false']);
+      }
+      if (!maskedTypes.includes(type)) {
+        warnLog('vxe.error.notSupportProp', ['control-config.enabled=true', "type=".concat(type), "type=".concat(maskedTypes.join('|'))]);
+      }
+    }
+    $xeDatePicker.updateModelValue();
+    _ui.globalEvents.on($xeDatePicker, 'mousewheel', $xeDatePicker.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeDatePicker, 'mousedown', $xeDatePicker.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeDatePicker, 'keydown', $xeDatePicker.handleGlobalKeydownEvent);
+    _ui.globalEvents.on($xeDatePicker, 'blur', $xeDatePicker.handleGlobalBlurEvent);
+    _ui.globalEvents.on($xeDatePicker, 'resize', $xeDatePicker.handleGlobalResizeEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeDatePicker = this;
+    var reactData = $xeDatePicker.reactData;
+    var internalData = $xeDatePicker.internalData;
+    var panelElem = $xeDatePicker.$refs.refInputPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeDatePicker, 'mousewheel');
+    _ui.globalEvents.off($xeDatePicker, 'mousedown');
+    _ui.globalEvents.off($xeDatePicker, 'keydown');
+    _ui.globalEvents.off($xeDatePicker, 'blur');
+    _ui.globalEvents.off($xeDatePicker, 'resize');
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */