vxe-pc-ui 3.0.0 → 3.0.1

package/lib/input/src/input.js

@@ -0,0 +1,2897 @@
+"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-picker/src/util");
+var _util2 = require("../../number-input/src/util");
+var _vn = require("../..//ui/src/vn");
+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 _default2 = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeInput',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: [String, Number, Date],
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    clearable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().input.clearable;
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    placeholder: String,
+    maxLength: [String, Number],
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    align: String,
+    form: String,
+    className: String,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().input.size || (0, _ui.getConfig)().size;
+      }
+    },
+    multiple: Boolean,
+    // text
+    showWordCount: Boolean,
+    countMethod: Function,
+    // number、integer、float
+    min: {
+      type: [String, Number],
+      default: null
+    },
+    max: {
+      type: [String, Number],
+      default: null
+    },
+    step: [String, Number],
+    exponential: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().input.exponential;
+      }
+    },
+    // number、integer、float、password
+    controls: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().input.controls;
+      }
+    },
+    // float
+    digits: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().input.digits;
+      }
+    },
+    // date、week、month、quarter、year
+    startDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().input.startDate;
+      }
+    },
+    endDate: {
+      type: [String, Number, Date],
+      default: function _default() {
+        return (0, _ui.getConfig)().input.endDate;
+      }
+    },
+    minDate: [String, Number, Date],
+    maxDate: [String, Number, Date],
+    // 已废弃 startWeek，被 startDay 替换
+    startWeek: Number,
+    startDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().input.startDay;
+      }
+    },
+    labelFormat: String,
+    valueFormat: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    festivalMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().input.festivalMethod;
+      }
+    },
+    disabledMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().input.disabledMethod;
+      }
+    },
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: function _default() {
+        return (0, _ui.getConfig)().input.selectDay;
+      }
+    },
+    prefixIcon: String,
+    suffixIcon: String,
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    // 已废弃
+    maxlength: [String, Number],
+    // 已废弃
+    autocomplete: String
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeSelect = this;
+    return {
+      $xeSelect: $xeSelect
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      initialized: false,
+      panelIndex: 0,
+      showPwd: false,
+      visiblePanel: false,
+      isAniVisible: false,
+      panelStyle: {},
+      panelPlacement: '',
+      isActivated: false,
+      inputValue: '',
+      datetimePanelValue: null,
+      datePanelValue: null,
+      datePanelLabel: '',
+      datePanelType: 'day',
+      selectMonth: null,
+      currentDate: null
+    };
+    var internalData = {
+      yearSize: 12,
+      monthSize: 20,
+      quarterSize: 8,
+      hpTimeout: undefined,
+      dnTimeout: undefined
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var $xeTable = $xeInput.$xeTable;
+      var $xeModal = $xeInput.$xeModal;
+      var $xeDrawer = $xeInput.$xeDrawer;
+      var $xeForm = $xeInput.$xeForm;
+      var transfer = props.transfer;
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().input.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeInput = this;
+      var $xeForm = $xeInput.$xeForm;
+      if ($xeForm) {
+        return $xeForm.readonly;
+      }
+      return false;
+    },
+    computeIsReadonly: function computeIsReadonly() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var readonly = props.readonly;
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var $xeForm = $xeInput.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeInpMaxLength: function computeInpMaxLength() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var maxLength = props.maxLength,
+        maxlength = props.maxlength;
+      var maxLen = maxLength || maxlength;
+      var isNumType = $xeInput.computeIsNumType;
+      // 数值最大长度限制 16 位，包含小数
+      if (isNumType) {
+        if (!_xeUtils.default.toNumber(maxLen)) {
+          return 16;
+        }
+      }
+      return maxLen;
+    },
+    computeIsDateTimeType: function computeIsDateTimeType() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type;
+      return type === 'time' || type === 'datetime';
+    },
+    computeIsNumType: function computeIsNumType() {
+      var $xeInput = this;
+      var props = $xeInput;
+      return ['number', 'integer', 'float'].indexOf(props.type) > -1;
+    },
+    computeInputCount: function computeInputCount() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      return _xeUtils.default.getSize(reactData.inputValue);
+    },
+    computeIsCountError: function computeIsCountError() {
+      var $xeInput = this;
+      var inputCount = $xeInput.computeInputCount;
+      var inpMaxLength = $xeInput.computeInpMaxLength;
+      return inpMaxLength && inputCount > _xeUtils.default.toNumber(inpMaxLength);
+    },
+    computeIsDatePickerType: function computeIsDatePickerType() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var isDateTimeType = $xeInput.computeIsDateTimeType;
+      return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeIsPawdType: function computeIsPawdType() {
+      var $xeInput = this;
+      var props = $xeInput;
+      return props.type === 'password';
+    },
+    computeIsSearchType: function computeIsSearchType() {
+      var $xeInput = this;
+      var props = $xeInput;
+      return props.type === 'search';
+    },
+    computeDigitsValue: function computeDigitsValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      return _xeUtils.default.toInteger(props.digits) || 1;
+    },
+    computeStepValue: function computeStepValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type;
+      var digitsValue = $xeInput.computeDigitsValue;
+      var step = props.step;
+      if (type === 'integer') {
+        return _xeUtils.default.toInteger(step) || 1;
+      } else if (type === 'float') {
+        return _xeUtils.default.toNumber(step) || 1 / Math.pow(10, digitsValue);
+      }
+      return _xeUtils.default.toNumber(step) || 1;
+    },
+    computeIsClearable: function computeIsClearable() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type;
+      var isNumType = $xeInput.computeIsNumType;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var isPawdType = $xeInput.computeIsPawdType;
+      return props.clearable && (isPawdType || isNumType || isDatePickerType || type === 'text' || type === 'search');
+    },
+    computeDateStartTime: function computeDateStartTime() {
+      var $xeInput = this;
+      var props = $xeInput;
+      return props.startDate ? _xeUtils.default.toStringDate(props.startDate) : null;
+    },
+    computeDateEndTime: function computeDateEndTime() {
+      var $xeInput = this;
+      var props = $xeInput;
+      return props.endDate ? _xeUtils.default.toStringDate(props.endDate) : null;
+    },
+    computeSupportMultiples: function computeSupportMultiples() {
+      var $xeInput = this;
+      var props = $xeInput;
+      return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeDateListValue: function computeDateListValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var value = props.value,
+        multiple = props.multiple;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      if (multiple && value && isDatePickerType) {
+        return _xeUtils.default.toValueString(value).split(',').map(function (item) {
+          var date = $xeInput.parseDate(item, dateValueFormat);
+          if (_xeUtils.default.isValidDate(date)) {
+            return date;
+          }
+          return date;
+        });
+      }
+      return [];
+    },
+    computeDateMultipleValue: function computeDateMultipleValue() {
+      var $xeInput = this;
+      var dateListValue = $xeInput.computeDateListValue;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateValueFormat);
+      });
+    },
+    computeDateMultipleLabel: function computeDateMultipleLabel() {
+      var $xeInput = this;
+      var dateListValue = $xeInput.computeDateListValue;
+      var dateLabelFormat = $xeInput.computeDateLabelFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateLabelFormat);
+      }).join(', ');
+    },
+    computeDateValueFormat: function computeDateValueFormat() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type,
+        valueFormat = props.valueFormat;
+      if (valueFormat) {
+        return valueFormat;
+      }
+      if (type === 'time') {
+        return 'HH:mm:ss';
+      }
+      if (type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss';
+      }
+      return 'yyyy-MM-dd';
+    },
+    computeDateValue: function computeDateValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var value = props.value;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      var val = null;
+      if (value && isDatePickerType) {
+        var date = $xeInput.parseDate(value, dateValueFormat);
+        if (_xeUtils.default.isValidDate(date)) {
+          val = date;
+        }
+      }
+      return val;
+    },
+    computeIsDisabledPrevDateBtn: function computeIsDisabledPrevDateBtn() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var dateStartTime = $xeInput.computeDateStartTime;
+      var selectMonth = reactData.selectMonth;
+      if (selectMonth && dateStartTime) {
+        return selectMonth <= dateStartTime;
+      }
+      return false;
+    },
+    computeIsDisabledNextDateBtn: function computeIsDisabledNextDateBtn() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var dateEndTime = $xeInput.computeDateEndTime;
+      var selectMonth = reactData.selectMonth;
+      if (selectMonth && dateEndTime) {
+        return selectMonth >= dateEndTime;
+      }
+      return false;
+    },
+    computeDateTimeLabel: function computeDateTimeLabel() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var hasTimeSecond = $xeInput.computeHasTimeSecond;
+      if (datetimePanelValue) {
+        return _xeUtils.default.toDateString(datetimePanelValue, hasTimeSecond ? 'HH:mm:ss' : 'HH:mm');
+      }
+      return '';
+    },
+    computeDateHMSTime: function computeDateHMSTime() {
+      var $xeInput = this;
+      var dateValue = $xeInput.computeDateValue;
+      var isDateTimeType = $xeInput.computeIsDateTimeType;
+      return dateValue && isDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
+    },
+    computeDateLabelFormat: function computeDateLabelFormat() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var labelFormat = props.labelFormat;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      if (isDatePickerType) {
+        return labelFormat || dateValueFormat || (0, _ui.getI18n)("vxe.input.date.labelFormat.".concat(props.type));
+      }
+      return '';
+    },
+    computeYearList: function computeYearList() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var internalData = $xeInput.internalData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var yearSize = internalData.yearSize;
+      var years = [];
+      if (selectMonth && currentDate) {
+        var currFullYear = currentDate.getFullYear();
+        var selectFullYear = selectMonth.getFullYear();
+        var startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
+        for (var index = -4; index < yearSize + 4; index++) {
+          var date = _xeUtils.default.getWhatYear(startYearDate, index, 'first');
+          var itemFullYear = date.getFullYear();
+          years.push({
+            date: date,
+            isCurrent: true,
+            isPrev: index < 0,
+            isNow: currFullYear === itemFullYear,
+            isNext: index >= yearSize,
+            year: itemFullYear
+          });
+        }
+      }
+      return years;
+    },
+    computeSelectDatePanelLabel: function computeSelectDatePanelLabel() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (isDatePickerType) {
+        var datePanelType = reactData.datePanelType,
+          selectMonth = reactData.selectMonth;
+        var yearList = $xeInput.computeYearList;
+        var year = '';
+        var month;
+        if (selectMonth) {
+          year = selectMonth.getFullYear();
+          month = selectMonth.getMonth() + 1;
+        }
+        if (datePanelType === 'quarter') {
+          return (0, _ui.getI18n)('vxe.input.date.quarterLabel', [year]);
+        } else if (datePanelType === 'month') {
+          return (0, _ui.getI18n)('vxe.input.date.monthLabel', [year]);
+        } else if (datePanelType === 'year') {
+          return yearList.length ? "".concat(yearList[0].year, " - ").concat(yearList[yearList.length - 1].year) : '';
+        }
+        return (0, _ui.getI18n)('vxe.input.date.dayLabel', [year, month ? (0, _ui.getI18n)("vxe.input.date.m".concat(month)) : '-']);
+      }
+      return '';
+    },
+    computeFirstDayOfWeek: function computeFirstDayOfWeek() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var startDay = props.startDay,
+        startWeek = props.startWeek;
+      return _xeUtils.default.toNumber(_xeUtils.default.isNumber(startDay) || _xeUtils.default.isString(startDay) ? startDay : startWeek);
+    },
+    computeWeekDatas: function computeWeekDatas() {
+      var $xeInput = this;
+      var weeks = [];
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (isDatePickerType) {
+        var sWeek = $xeInput.computeFirstDayOfWeek;
+        weeks.push(sWeek);
+        for (var index = 0; index < 6; index++) {
+          if (sWeek >= 6) {
+            sWeek = 0;
+          } else {
+            sWeek++;
+          }
+          weeks.push(sWeek);
+        }
+      }
+      return weeks;
+    },
+    computeDateHeaders: function computeDateHeaders() {
+      var $xeInput = this;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (isDatePickerType) {
+        var weekDatas = $xeInput.computeWeekDatas;
+        return weekDatas.map(function (day) {
+          return {
+            value: day,
+            label: (0, _ui.getI18n)("vxe.input.date.weeks.w".concat(day))
+          };
+        });
+      }
+      return [];
+    },
+    computeWeekHeaders: function computeWeekHeaders() {
+      var $xeInput = this;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (isDatePickerType) {
+        var dateHeaders = $xeInput.computeDateHeaders;
+        return [{
+          label: (0, _ui.getI18n)('vxe.input.date.weeks.w')
+        }].concat(dateHeaders);
+      }
+      return [];
+    },
+    computeYearDatas: function computeYearDatas() {
+      var $xeInput = this;
+      var yearList = $xeInput.computeYearList;
+      return _xeUtils.default.chunk(yearList, 4);
+    },
+    computeQuarterList: function computeQuarterList() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var internalData = $xeInput.internalData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var quarterSize = internalData.quarterSize;
+      var quarters = [];
+      if (selectMonth && currentDate) {
+        var currFullYear = currentDate.getFullYear();
+        var currQuarter = (0, _util.getDateQuarter)(currentDate);
+        var firstYear = _xeUtils.default.getWhatYear(selectMonth, 0, 'first');
+        var selFullYear = firstYear.getFullYear();
+        for (var index = -2; index < quarterSize - 2; index++) {
+          var date = _xeUtils.default.getWhatQuarter(firstYear, index);
+          var itemFullYear = date.getFullYear();
+          var itemQuarter = (0, _util.getDateQuarter)(date);
+          var isPrev = itemFullYear < selFullYear;
+          quarters.push({
+            date: date,
+            isPrev: isPrev,
+            isCurrent: itemFullYear === selFullYear,
+            isNow: itemFullYear === currFullYear && itemQuarter === currQuarter,
+            isNext: !isPrev && itemFullYear > selFullYear,
+            quarter: itemQuarter
+          });
+        }
+      }
+      return quarters;
+    },
+    computeQuarterDatas: function computeQuarterDatas() {
+      var $xeInput = this;
+      var quarterList = $xeInput.computeQuarterList;
+      return _xeUtils.default.chunk(quarterList, 2);
+    },
+    computeMonthList: function computeMonthList() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var internalData = $xeInput.internalData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var monthSize = internalData.monthSize;
+      var months = [];
+      if (selectMonth && currentDate) {
+        var currFullYear = currentDate.getFullYear();
+        var currMonth = currentDate.getMonth();
+        var selFullYear = _xeUtils.default.getWhatYear(selectMonth, 0, 'first').getFullYear();
+        for (var index = -4; index < monthSize - 4; index++) {
+          var date = _xeUtils.default.getWhatYear(selectMonth, 0, index);
+          var itemFullYear = date.getFullYear();
+          var itemMonth = date.getMonth();
+          var isPrev = itemFullYear < selFullYear;
+          months.push({
+            date: date,
+            isPrev: isPrev,
+            isCurrent: itemFullYear === selFullYear,
+            isNow: itemFullYear === currFullYear && itemMonth === currMonth,
+            isNext: !isPrev && itemFullYear > selFullYear,
+            month: itemMonth
+          });
+        }
+      }
+      return months;
+    },
+    computeMonthDatas: function computeMonthDatas() {
+      var $xeInput = this;
+      var monthList = $xeInput.computeMonthList;
+      return _xeUtils.default.chunk(monthList, 4);
+    },
+    computeDayList: function computeDayList() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var selectMonth = reactData.selectMonth,
+        currentDate = reactData.currentDate;
+      var days = [];
+      if (selectMonth && currentDate) {
+        var dateHMSTime = $xeInput.computeDateHMSTime;
+        var weekDatas = $xeInput.computeWeekDatas;
+        var currFullYear = currentDate.getFullYear();
+        var currMonth = currentDate.getMonth();
+        var currDate = currentDate.getDate();
+        var selFullYear = selectMonth.getFullYear();
+        var selMonth = selectMonth.getMonth();
+        var selDay = selectMonth.getDay();
+        var prevOffsetDate = -weekDatas.indexOf(selDay);
+        var startDayDate = new Date(_xeUtils.default.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime);
+        for (var index = 0; index < 42; index++) {
+          var date = _xeUtils.default.getWhatDay(startDayDate, index);
+          var itemFullYear = date.getFullYear();
+          var itemMonth = date.getMonth();
+          var itemDate = date.getDate();
+          var isPrev = date < selectMonth;
+          days.push({
+            date: date,
+            isPrev: isPrev,
+            isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
+            isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
+            isNext: !isPrev && selMonth !== itemMonth,
+            label: itemDate
+          });
+        }
+      }
+      return days;
+    },
+    computeDayDatas: function computeDayDatas() {
+      var $xeInput = this;
+      var dayList = $xeInput.computeDayList;
+      return _xeUtils.default.chunk(dayList, 7);
+    },
+    computeWeekDates: function computeWeekDates() {
+      var $xeInput = this;
+      var dayDatas = $xeInput.computeDayDatas;
+      var firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+      return dayDatas.map(function (list) {
+        var firstItem = list[0];
+        var item = {
+          date: firstItem.date,
+          isWeekNumber: true,
+          isPrev: false,
+          isCurrent: false,
+          isNow: false,
+          isNext: false,
+          label: _xeUtils.default.getYearWeek(firstItem.date, firstDayOfWeek)
+        };
+        return [item].concat(list);
+      });
+    },
+    computeHourList: function computeHourList() {
+      var $xeInput = this;
+      var list = [];
+      var isDateTimeType = $xeInput.computeIsDateTimeType;
+      if (isDateTimeType) {
+        for (var index = 0; index < 24; index++) {
+          list.push({
+            value: index,
+            label: ('' + index).padStart(2, '0')
+          });
+        }
+      }
+      return list;
+    },
+    computeMinuteList: function computeMinuteList() {
+      var $xeInput = this;
+      var list = [];
+      var isDateTimeType = $xeInput.computeIsDateTimeType;
+      if (isDateTimeType) {
+        for (var index = 0; index < 60; index++) {
+          list.push({
+            value: index,
+            label: ('' + index).padStart(2, '0')
+          });
+        }
+      }
+      return list;
+    },
+    computeHasTimeMinute: function computeHasTimeMinute() {
+      var $xeInput = this;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      return !/HH/.test(dateValueFormat) || /mm/.test(dateValueFormat);
+    },
+    computeHasTimeSecond: function computeHasTimeSecond() {
+      var $xeInput = this;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      return !/HH/.test(dateValueFormat) || /ss/.test(dateValueFormat);
+    },
+    computeSecondList: function computeSecondList() {
+      var $xeInput = this;
+      var minuteList = $xeInput.computeMinuteList;
+      return minuteList;
+    },
+    computeInputReadonly: function computeInputReadonly() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type,
+        editable = props.editable,
+        multiple = props.multiple;
+      var isReadonly = $xeInput.computeIsReadonly;
+      return isReadonly || multiple || !editable || type === 'week' || type === 'quarter';
+    },
+    computeInputType: function computeInputType() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type;
+      var showPwd = reactData.showPwd;
+      var isNumType = $xeInput.computeIsNumType;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var isPawdType = $xeInput.computeIsPawdType;
+      if (isDatePickerType || isNumType || isPawdType && showPwd || type === 'number') {
+        return 'text';
+      }
+      return type;
+    },
+    computeInpPlaceholder: function computeInpPlaceholder() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var placeholder = props.placeholder;
+      if (placeholder) {
+        return (0, _utils.getFuncText)(placeholder);
+      }
+      var globalPlaceholder = (0, _ui.getConfig)().input.placeholder;
+      if (globalPlaceholder) {
+        return (0, _utils.getFuncText)(globalPlaceholder);
+      }
+      return (0, _ui.getI18n)('vxe.base.pleaseInput');
+    },
+    computeInpImmediate: function computeInpImmediate() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type,
+        immediate = props.immediate;
+      return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float');
+    },
+    computeNumValue: function computeNumValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type;
+      var inputValue = reactData.inputValue;
+      var isNumType = $xeInput.computeIsNumType;
+      if (isNumType) {
+        return type === 'integer' ? _xeUtils.default.toInteger((0, _util2.handleNumber)(inputValue)) : _xeUtils.default.toNumber((0, _util2.handleNumber)(inputValue));
+      }
+      return 0;
+    },
+    computeIsDisabledSubtractNumber: function computeIsDisabledSubtractNumber() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var min = props.min;
+      var inputValue = reactData.inputValue;
+      var isNumType = $xeInput.computeIsNumType;
+      var numValue = $xeInput.computeNumValue;
+      // 当有值时再进行判断
+      if ((inputValue || inputValue === 0) && isNumType && min !== null) {
+        return numValue <= _xeUtils.default.toNumber(min);
+      }
+      return false;
+    },
+    computeIsDisabledAddNumber: function computeIsDisabledAddNumber() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var max = props.max;
+      var inputValue = reactData.inputValue;
+      var isNumType = $xeInput.computeIsNumType;
+      var numValue = $xeInput.computeNumValue;
+      // 当有值时再进行判断
+      if ((inputValue || inputValue === 0) && isNumType && max !== null) {
+        return numValue >= _xeUtils.default.toNumber(max);
+      }
+      return false;
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeInput = this;
+      $xeInput.$emit(type, (0, _ui.createEvent)(evnt, {
+        $input: $xeInput
+      }, params));
+    },
+    focus: function focus() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var inputElem = $xeInput.$refs.refInputTarget;
+      reactData.isActivated = true;
+      inputElem.focus();
+      return $xeInput.$nextTick();
+    },
+    blur: function blur() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var inputElem = $xeInput.$refs.refInputTarget;
+      inputElem.blur();
+      reactData.isActivated = false;
+      return $xeInput.$nextTick();
+    },
+    select: function select() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var inputElem = $xeInput.$refs.refInputTarget;
+      inputElem.select();
+      reactData.isActivated = false;
+      return $xeInput.$nextTick();
+    },
+    parseDate: function parseDate(value, format) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type;
+      if (type === 'time') {
+        return (0, _util.toStringTimeDate)(value);
+      }
+      return _xeUtils.default.toStringDate(value, format);
+    },
+    getNumberValue: function getNumberValue(val) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type,
+        exponential = props.exponential;
+      var inpMaxLength = $xeInput.computeInpMaxLength;
+      var digitsValue = $xeInput.computeDigitsValue;
+      var restVal = type === 'float' ? (0, _util2.toFloatValueFixed)(val, digitsValue) : _xeUtils.default.toValueString(val);
+      if (exponential && (val === restVal || _xeUtils.default.toValueString(val).toLowerCase() === _xeUtils.default.toNumber(restVal).toExponential())) {
+        return val;
+      }
+      return restVal.slice(0, inpMaxLength);
+    },
+    triggerEvent: function triggerEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var inputValue = reactData.inputValue;
+      $xeInput.dispatchEvent(evnt.type, {
+        value: inputValue
+      }, evnt);
+    },
+    emitModel: function emitModel(value, evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var $xeForm = $xeInput.$xeForm;
+      var formItemInfo = $xeInput.formItemInfo;
+      reactData.inputValue = value;
+      $xeInput.$emit('modelValue', value);
+      $xeInput.dispatchEvent('input', {
+        value: value
+      }, evnt);
+      if (_xeUtils.default.toValueString(props.value) !== value) {
+        $xeInput.dispatchEvent('change', {
+          value: value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      }
+    },
+    emitInputEvent: function emitInputEvent(value, evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var inpImmediate = $xeInput.computeInpImmediate;
+      reactData.inputValue = value;
+      if (!isDatePickerType) {
+        if (inpImmediate) {
+          $xeInput.emitModel(value, evnt);
+        } else {
+          $xeInput.dispatchEvent('input', {
+            value: value
+          }, evnt);
+        }
+      }
+    },
+    inputEvent: function inputEvent(evnt) {
+      var $xeInput = this;
+      var inputElem = evnt.target;
+      var value = inputElem.value;
+      $xeInput.emitInputEvent(value, evnt);
+    },
+    changeEvent: function changeEvent(evnt) {
+      var $xeInput = this;
+      var inpImmediate = $xeInput.computeInpImmediate;
+      if (!inpImmediate) {
+        $xeInput.triggerEvent(evnt);
+      }
+    },
+    focusEvent: function focusEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      reactData.isActivated = true;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (isDatePickerType) {
+        $xeInput.datePickerOpenEvent(evnt);
+      }
+      $xeInput.triggerEvent(evnt);
+    },
+    clickPrefixEvent: function clickPrefixEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var isDisabled = $xeInput.computeIsDisabled;
+      if (!isDisabled) {
+        var inputValue = reactData.inputValue;
+        $xeInput.dispatchEvent('prefix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    },
+    hidePanel: function hidePanel() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var internalData = $xeInput.internalData;
+      return new Promise(function (resolve) {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = window.setTimeout(function () {
+          reactData.isAniVisible = false;
+          resolve();
+        }, 350);
+      });
+    },
+    clearValueEvent: function clearValueEvent(evnt, value) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var type = props.type;
+      var isNumType = $xeInput.computeIsNumType;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (isDatePickerType) {
+        $xeInput.hidePanel();
+      }
+      if (isNumType || ['text', 'search', 'password'].indexOf(type) > -1) {
+        $xeInput.focus();
+      }
+      $xeInput.emitModel('', evnt);
+      $xeInput.dispatchEvent('clear', {
+        value: value
+      }, evnt);
+    },
+    clickSuffixEvent: function clickSuffixEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var isDisabled = $xeInput.computeIsDisabled;
+      if (!isDisabled) {
+        var inputValue = reactData.inputValue;
+        $xeInput.dispatchEvent('suffix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    },
+    dateParseValue: function dateParseValue(value) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type;
+      var dateLabelFormat = $xeInput.computeDateLabelFormat;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      var firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+      var dValue = null;
+      var dLabel = '';
+      if (value) {
+        dValue = $xeInput.parseDate(value, dateValueFormat);
+      }
+      if (_xeUtils.default.isValidDate(dValue)) {
+        dLabel = _xeUtils.default.toDateString(dValue, dateLabelFormat, {
+          firstDay: firstDayOfWeek
+        });
+        // 由于年份和第几周是冲突的行为，所以需要特殊处理，判断是否跨年
+        if (dateLabelFormat && type === 'week') {
+          var firstWeekDate = _xeUtils.default.getWhatWeek(dValue, 0, firstDayOfWeek, firstDayOfWeek);
+          if (firstWeekDate.getFullYear() < dValue.getFullYear()) {
+            var yyIndex = dateLabelFormat.indexOf('yyyy');
+            if (yyIndex > -1) {
+              var yyNum = Number(dLabel.substring(yyIndex, yyIndex + 4));
+              if (yyNum && !isNaN(yyNum)) {
+                dLabel = dLabel.replace("".concat(yyNum), "".concat(yyNum - 1));
+              }
+            }
+          }
+        }
+      } else {
+        dValue = null;
+      }
+      reactData.datePanelValue = dValue;
+      reactData.datePanelLabel = dLabel;
+    },
+    /**
+     * 值变化时处理
+     */
+    changeValue: function changeValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var inputValue = reactData.inputValue;
+      if (isDatePickerType) {
+        $xeInput.dateParseValue(inputValue);
+        reactData.inputValue = props.multiple ? $xeInput.computeDateMultipleLabel : reactData.datePanelLabel;
+      }
+    },
+    /**
+     * 检查初始值
+     */
+    initValue: function initValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type;
+      var inputValue = reactData.inputValue;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var digitsValue = $xeInput.computeDigitsValue;
+      if (isDatePickerType) {
+        $xeInput.changeValue();
+      } else if (type === 'float') {
+        if (inputValue) {
+          var validValue = (0, _util2.toFloatValueFixed)(inputValue, digitsValue);
+          if (inputValue !== validValue) {
+            $xeInput.emitModel(validValue, {
+              type: 'init'
+            });
+          }
+        }
+      }
+    },
+    validMaxNum: function validMaxNum(num) {
+      var $xeInput = this;
+      var props = $xeInput;
+      return props.max === null || _xeUtils.default.toNumber(num) <= _xeUtils.default.toNumber(props.max);
+    },
+    validMinNum: function validMinNum(num) {
+      var $xeInput = this;
+      var props = $xeInput;
+      return props.min === null || _xeUtils.default.toNumber(num) >= _xeUtils.default.toNumber(props.min);
+    },
+    dateRevert: function dateRevert() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      reactData.inputValue = props.multiple ? $xeInput.computeDateMultipleLabel : reactData.datePanelLabel;
+    },
+    dateCheckMonth: function dateCheckMonth(date) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var month = _xeUtils.default.getWhatMonth(date, 0, 'first');
+      if (!_xeUtils.default.isEqual(month, reactData.selectMonth)) {
+        reactData.selectMonth = month;
+      }
+    },
+    dateChange: function dateChange(date) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var isDateTimeType = $xeInput.computeIsDateTimeType;
+      var dateValueFormat = $xeInput.computeDateValueFormat;
+      var firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+      if (props.type === 'week') {
+        var sWeek = _xeUtils.default.toNumber(props.selectDay);
+        date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+      } else if (isDateTimeType) {
+        date.setHours(datetimePanelValue.getHours());
+        date.setMinutes(datetimePanelValue.getMinutes());
+        date.setSeconds(datetimePanelValue.getSeconds());
+      }
+      var inpVal = _xeUtils.default.toDateString(date, dateValueFormat, {
+        firstDay: firstDayOfWeek
+      });
+      $xeInput.dateCheckMonth(date);
+      if (multiple) {
+        // 如果为多选
+        var dateMultipleValue = $xeInput.computeDateMultipleValue;
+        if (isDateTimeType) {
+          // 如果是datetime特殊类型
+          var dateListValue = _toConsumableArray($xeInput.computeDateListValue);
+          var datetimeRest = [];
+          var eqIndex = _xeUtils.default.findIndexOf(dateListValue, function (val) {
+            return _xeUtils.default.isDateSame(date, val, 'yyyyMMdd');
+          });
+          if (eqIndex === -1) {
+            dateListValue.push(date);
+          } else {
+            dateListValue.splice(eqIndex, 1);
+          }
+          dateListValue.forEach(function (item) {
+            if (item) {
+              item.setHours(datetimePanelValue.getHours());
+              item.setMinutes(datetimePanelValue.getMinutes());
+              item.setSeconds(datetimePanelValue.getSeconds());
+              datetimeRest.push(item);
+            }
+          });
+          $xeInput.emitModel(datetimeRest.map(function (date) {
+            return _xeUtils.default.toDateString(date, dateValueFormat);
+          }).join(','), {
+            type: 'update'
+          });
+        } else {
+          // 如果是日期类型
+          if (dateMultipleValue.some(function (val) {
+            return _xeUtils.default.isEqual(val, inpVal);
+          })) {
+            $xeInput.emitModel(dateMultipleValue.filter(function (val) {
+              return !_xeUtils.default.isEqual(val, inpVal);
+            }).join(','), {
+              type: 'update'
+            });
+          } else {
+            $xeInput.emitModel(dateMultipleValue.concat([inpVal]).join(','), {
+              type: 'update'
+            });
+          }
+        }
+      } else {
+        // 如果为单选
+        if (!_xeUtils.default.isEqual(props.value, inpVal)) {
+          $xeInput.emitModel(inpVal, {
+            type: 'update'
+          });
+        }
+      }
+    },
+    afterCheckValue: function afterCheckValue() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type,
+        min = props.min,
+        max = props.max,
+        exponential = props.exponential;
+      var inputValue = reactData.inputValue,
+        datetimePanelValue = reactData.datetimePanelValue;
+      var isNumType = $xeInput.computeIsNumType;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var dateLabelFormat = $xeInput.computeDateLabelFormat;
+      var inputReadonly = $xeInput.computeInputReadonly;
+      if (!inputReadonly) {
+        if (isNumType) {
+          if (inputValue) {
+            var inpNumVal = type === 'integer' ? _xeUtils.default.toInteger((0, _util2.handleNumber)(inputValue)) : _xeUtils.default.toNumber((0, _util2.handleNumber)(inputValue));
+            if (!$xeInput.validMinNum(inpNumVal)) {
+              inpNumVal = min;
+            } else if (!$xeInput.validMaxNum(inpNumVal)) {
+              inpNumVal = max;
+            }
+            if (exponential) {
+              var inpStringVal = _xeUtils.default.toValueString(inputValue).toLowerCase();
+              if (inpStringVal === _xeUtils.default.toNumber(inpNumVal).toExponential()) {
+                inpNumVal = inpStringVal;
+              }
+            }
+            $xeInput.emitModel($xeInput.getNumberValue(inpNumVal), {
+              type: 'check'
+            });
+          }
+        } else if (isDatePickerType) {
+          if (inputValue) {
+            var inpDateVal = $xeInput.parseDate(inputValue, dateLabelFormat);
+            if (_xeUtils.default.isValidDate(inpDateVal)) {
+              if (type === 'time') {
+                inpDateVal = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat);
+                if (inputValue !== inpDateVal) {
+                  $xeInput.emitModel(inpDateVal, {
+                    type: 'check'
+                  });
+                }
+                reactData.inputValue = inpDateVal;
+              } else {
+                var isChange = false;
+                var firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+                if (type === 'datetime') {
+                  var dateValue = $xeInput.computeDateValue;
+                  if (inputValue !== _xeUtils.default.toDateString(dateValue, dateLabelFormat) || inputValue !== _xeUtils.default.toDateString(inpDateVal, dateLabelFormat)) {
+                    isChange = true;
+                    datetimePanelValue.setHours(inpDateVal.getHours());
+                    datetimePanelValue.setMinutes(inpDateVal.getMinutes());
+                    datetimePanelValue.setSeconds(inpDateVal.getSeconds());
+                  }
+                } else {
+                  isChange = true;
+                }
+                reactData.inputValue = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+                  firstDay: firstDayOfWeek
+                });
+                if (isChange) {
+                  $xeInput.dateChange(inpDateVal);
+                }
+              }
+            } else {
+              $xeInput.dateRevert();
+            }
+          } else {
+            $xeInput.emitModel('', {
+              type: 'check'
+            });
+          }
+        }
+      }
+    },
+    blurEvent: function blurEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var inputValue = reactData.inputValue;
+      var inpImmediate = $xeInput.computeInpImmediate;
+      if (!inpImmediate) {
+        $xeInput.emitModel(inputValue, evnt);
+      }
+      $xeInput.afterCheckValue();
+      if (!reactData.visiblePanel) {
+        reactData.isActivated = false;
+      }
+      $xeInput.dispatchEvent('blur', {
+        value: inputValue
+      }, evnt);
+    },
+    // 密码
+    passwordToggleEvent: function passwordToggleEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var showPwd = reactData.showPwd;
+      var isDisabled = $xeInput.computeIsDisabled;
+      var isReadonly = $xeInput.computeIsReadonly;
+      if (!isDisabled && !isReadonly) {
+        reactData.showPwd = !showPwd;
+      }
+      $xeInput.dispatchEvent('toggle-visible', {
+        visible: reactData.showPwd
+      }, evnt);
+    },
+    // 搜索
+    searchEvent: function searchEvent(evnt) {
+      var $xeInput = this;
+      $xeInput.dispatchEvent('search-click', {}, evnt);
+    },
+    // 数值
+    numberChange: function numberChange(isPlus, evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var min = props.min,
+        max = props.max,
+        type = props.type;
+      var inputValue = reactData.inputValue;
+      var stepValue = $xeInput.computeStepValue;
+      var numValue = type === 'integer' ? _xeUtils.default.toInteger((0, _util2.handleNumber)(inputValue)) : _xeUtils.default.toNumber((0, _util2.handleNumber)(inputValue));
+      var newValue = isPlus ? _xeUtils.default.add(numValue, stepValue) : _xeUtils.default.subtract(numValue, stepValue);
+      var restNum;
+      if (!$xeInput.validMinNum(newValue)) {
+        restNum = min;
+      } else if (!$xeInput.validMaxNum(newValue)) {
+        restNum = max;
+      } else {
+        restNum = newValue;
+      }
+      $xeInput.emitInputEvent($xeInput.getNumberValue(restNum), evnt);
+    },
+    numberNextEvent: function numberNextEvent(evnt) {
+      var $xeInput = this;
+      var isDisabled = $xeInput.computeIsDisabled;
+      var isReadonly = $xeInput.computeIsReadonly;
+      var isDisabledSubtractNumber = $xeInput.computeIsDisabledSubtractNumber;
+      $xeInput.numberStopDown();
+      if (!isDisabled && !isReadonly && !isDisabledSubtractNumber) {
+        $xeInput.numberChange(false, evnt);
+      }
+      $xeInput.dispatchEvent('next-number', {}, evnt);
+    },
+    numberDownNextEvent: function numberDownNextEvent(evnt) {
+      var $xeInput = this;
+      var internalData = $xeInput.internalData;
+      internalData.dnTimeout = window.setTimeout(function () {
+        $xeInput.numberNextEvent(evnt);
+        $xeInput.numberDownNextEvent(evnt);
+      }, 60);
+    },
+    numberPrevEvent: function numberPrevEvent(evnt) {
+      var $xeInput = this;
+      var isDisabled = $xeInput.computeIsDisabled;
+      var isReadonly = $xeInput.computeIsReadonly;
+      var isDisabledAddNumber = $xeInput.computeIsDisabledAddNumber;
+      $xeInput.numberStopDown();
+      if (!isDisabled && !isReadonly && !isDisabledAddNumber) {
+        $xeInput.numberChange(true, evnt);
+      }
+      $xeInput.dispatchEvent('prev-number', {}, evnt);
+    },
+    numberKeydownEvent: function numberKeydownEvent(evnt) {
+      var $xeInput = this;
+      var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+      var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+      if (isUpArrow || isDwArrow) {
+        evnt.preventDefault();
+        if (isUpArrow) {
+          $xeInput.numberPrevEvent(evnt);
+        } else {
+          $xeInput.numberNextEvent(evnt);
+        }
+      }
+    },
+    keydownEvent: function keydownEvent(evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var exponential = props.exponential,
+        controls = props.controls;
+      var isNumType = $xeInput.computeIsNumType;
+      if (isNumType) {
+        var isCtrlKey = evnt.ctrlKey;
+        var isShiftKey = evnt.shiftKey;
+        var isAltKey = evnt.altKey;
+        var keyCode = evnt.keyCode;
+        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        if (!isCtrlKey && !isShiftKey && !isAltKey && (_ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.SPACEBAR) || (!exponential || keyCode !== 69) && keyCode >= 65 && keyCode <= 90 || keyCode >= 186 && keyCode <= 188 || keyCode >= 191)) {
+          evnt.preventDefault();
+        }
+        if (isEsc) {
+          $xeInput.afterCheckValue();
+        } else if (isUpArrow || isDwArrow) {
+          if (controls) {
+            $xeInput.numberKeydownEvent(evnt);
+          }
+        }
+      }
+      $xeInput.triggerEvent(evnt);
+    },
+    keyupEvent: function keyupEvent(evnt) {
+      var $xeInput = this;
+      $xeInput.triggerEvent(evnt);
+    },
+    // 数值
+    numberStopDown: function numberStopDown() {
+      var $xeInput = this;
+      var internalData = $xeInput.internalData;
+      var dnTimeout = internalData.dnTimeout;
+      if (dnTimeout) {
+        clearTimeout(dnTimeout);
+        internalData.dnTimeout = undefined;
+      }
+    },
+    numberDownPrevEvent: function numberDownPrevEvent(evnt) {
+      var $xeInput = this;
+      var internalData = $xeInput.internalData;
+      internalData.dnTimeout = window.setTimeout(function () {
+        $xeInput.numberPrevEvent(evnt);
+        $xeInput.numberDownPrevEvent(evnt);
+      }, 60);
+    },
+    numberMousedownEvent: function numberMousedownEvent(evnt) {
+      var $xeInput = this;
+      var internalData = $xeInput.internalData;
+      $xeInput.numberStopDown();
+      if (evnt.button === 0) {
+        var isPrevNumber = (0, _dom.hasClass)(evnt.currentTarget, 'is--prev');
+        if (isPrevNumber) {
+          $xeInput.numberPrevEvent(evnt);
+        } else {
+          $xeInput.numberNextEvent(evnt);
+        }
+        internalData.dnTimeout = window.setTimeout(function () {
+          if (isPrevNumber) {
+            $xeInput.numberDownPrevEvent(evnt);
+          } else {
+            $xeInput.numberDownNextEvent(evnt);
+          }
+        }, 500);
+      }
+    },
+    wheelEvent: function wheelEvent(evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var isNumType = $xeInput.computeIsNumType;
+      if (isNumType && props.controls) {
+        if (reactData.isActivated) {
+          var delta = evnt.deltaY;
+          if (delta > 0) {
+            $xeInput.numberNextEvent(evnt);
+          } else if (delta < 0) {
+            $xeInput.numberPrevEvent(evnt);
+          }
+          evnt.preventDefault();
+        }
+      }
+      $xeInput.triggerEvent(evnt);
+    },
+    // 日期
+    dateMonthHandle: function dateMonthHandle(date, offsetMonth) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      reactData.selectMonth = _xeUtils.default.getWhatMonth(date, offsetMonth, 'first');
+    },
+    dateNowHandle: function dateNowHandle() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var currentDate = _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+      reactData.currentDate = currentDate;
+      $xeInput.dateMonthHandle(currentDate, 0);
+    },
+    dateToggleTypeEvent: function dateToggleTypeEvent() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var datePanelType = reactData.datePanelType;
+      if (datePanelType === 'month' || datePanelType === 'quarter') {
+        datePanelType = 'year';
+      } else {
+        datePanelType = 'month';
+      }
+      reactData.datePanelType = datePanelType;
+    },
+    datePrevEvent: function datePrevEvent(evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var internalData = $xeInput.internalData;
+      var type = props.type;
+      var datePanelType = reactData.datePanelType,
+        selectMonth = reactData.selectMonth;
+      var yearSize = internalData.yearSize;
+      var isDisabledPrevDateBtn = $xeInput.computeIsDisabledPrevDateBtn;
+      if (!isDisabledPrevDateBtn) {
+        if (type === 'year') {
+          reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+        } else if (type === 'month' || type === 'quarter') {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -1, 'first');
+          }
+        } else {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -yearSize, 'first');
+          } else if (datePanelType === 'month') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, -1, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatMonth(selectMonth, -1, 'first');
+          }
+        }
+        $xeInput.dispatchEvent('date-prev', {
+          type: type
+        }, evnt);
+      }
+    },
+    dateTodayMonthEvent: function dateTodayMonthEvent(evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      $xeInput.dateNowHandle();
+      if (!props.multiple) {
+        $xeInput.dateChange(reactData.currentDate);
+        $xeInput.hidePanel();
+      }
+      $xeInput.dispatchEvent('date-today', {
+        type: props.type
+      }, evnt);
+    },
+    dateNextEvent: function dateNextEvent(evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var internalData = $xeInput.internalData;
+      var type = props.type;
+      var datePanelType = reactData.datePanelType,
+        selectMonth = reactData.selectMonth;
+      var yearSize = internalData.yearSize;
+      var isDisabledNextDateBtn = $xeInput.computeIsDisabledNextDateBtn;
+      if (!isDisabledNextDateBtn) {
+        if (type === 'year') {
+          reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+        } else if (type === 'month' || type === 'quarter') {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, 1, 'first');
+          }
+        } else {
+          if (datePanelType === 'year') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, yearSize, 'first');
+          } else if (datePanelType === 'month') {
+            reactData.selectMonth = _xeUtils.default.getWhatYear(selectMonth, 1, 'first');
+          } else {
+            reactData.selectMonth = _xeUtils.default.getWhatMonth(selectMonth, 1, 'first');
+          }
+        }
+        $xeInput.dispatchEvent('date-next', {
+          type: type
+        }, evnt);
+      }
+    },
+    isDateDisabled: function isDateDisabled(item) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var disabledMethod = props.disabledMethod;
+      var datePanelType = reactData.datePanelType;
+      return disabledMethod && disabledMethod({
+        type: datePanelType,
+        viewType: datePanelType,
+        date: item.date,
+        $input: $xeInput
+      });
+    },
+    dateSelectItem: function dateSelectItem(date) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type,
+        multiple = props.multiple;
+      var datePanelType = reactData.datePanelType;
+      if (type === 'month') {
+        if (datePanelType === 'year') {
+          reactData.datePanelType = 'month';
+          $xeInput.dateCheckMonth(date);
+        } else {
+          $xeInput.dateChange(date);
+          if (!multiple) {
+            $xeInput.hidePanel();
+          }
+        }
+      } else if (type === 'year') {
+        $xeInput.dateChange(date);
+        if (!multiple) {
+          $xeInput.hidePanel();
+        }
+      } else if (type === 'quarter') {
+        if (datePanelType === 'year') {
+          reactData.datePanelType = 'quarter';
+          $xeInput.dateCheckMonth(date);
+        } else {
+          $xeInput.dateChange(date);
+          if (!multiple) {
+            $xeInput.hidePanel();
+          }
+        }
+      } else {
+        if (datePanelType === 'month') {
+          reactData.datePanelType = type === 'week' ? type : 'day';
+          $xeInput.dateCheckMonth(date);
+        } else if (datePanelType === 'year') {
+          reactData.datePanelType = 'month';
+          $xeInput.dateCheckMonth(date);
+        } else {
+          $xeInput.dateChange(date);
+          if (type === 'datetime') {
+            // 日期带时间
+          } else {
+            if (!multiple) {
+              $xeInput.hidePanel();
+            }
+          }
+        }
+      }
+    },
+    dateSelectEvent: function dateSelectEvent(item) {
+      var $xeInput = this;
+      if (!$xeInput.isDateDisabled(item)) {
+        $xeInput.dateSelectItem(item.date);
+      }
+    },
+    dateMoveDay: function dateMoveDay(offsetDay) {
+      var $xeInput = this;
+      if (!$xeInput.isDateDisabled({
+        date: offsetDay
+      })) {
+        var dayList = $xeInput.computeDayList;
+        if (!dayList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetDay, 'yyyyMMdd');
+        })) {
+          $xeInput.dateCheckMonth(offsetDay);
+        }
+        $xeInput.dateParseValue(offsetDay);
+      }
+    },
+    dateMoveYear: function dateMoveYear(offsetYear) {
+      var $xeInput = this;
+      if (!$xeInput.isDateDisabled({
+        date: offsetYear
+      })) {
+        var yearList = $xeInput.computeYearList;
+        if (!yearList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetYear, 'yyyy');
+        })) {
+          $xeInput.dateCheckMonth(offsetYear);
+        }
+        $xeInput.dateParseValue(offsetYear);
+      }
+    },
+    dateMoveQuarter: function dateMoveQuarter(offsetQuarter) {
+      var $xeInput = this;
+      if (!$xeInput.isDateDisabled({
+        date: offsetQuarter
+      })) {
+        var quarterList = $xeInput.computeQuarterList;
+        if (!quarterList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetQuarter, 'yyyyq');
+        })) {
+          $xeInput.dateCheckMonth(offsetQuarter);
+        }
+        $xeInput.dateParseValue(offsetQuarter);
+      }
+    },
+    dateMoveMonth: function dateMoveMonth(offsetMonth) {
+      var $xeInput = this;
+      if (!$xeInput.isDateDisabled({
+        date: offsetMonth
+      })) {
+        var monthList = $xeInput.computeMonthList;
+        if (!monthList.some(function (item) {
+          return _xeUtils.default.isDateSame(item.date, offsetMonth, 'yyyyMM');
+        })) {
+          $xeInput.dateCheckMonth(offsetMonth);
+        }
+        $xeInput.dateParseValue(offsetMonth);
+      }
+    },
+    dateMouseenterEvent: function dateMouseenterEvent(item) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      if (!$xeInput.isDateDisabled(item)) {
+        var datePanelType = reactData.datePanelType;
+        if (datePanelType === 'month') {
+          $xeInput.dateMoveMonth(item.date);
+        } else if (datePanelType === 'quarter') {
+          $xeInput.dateMoveQuarter(item.date);
+        } else if (datePanelType === 'year') {
+          $xeInput.dateMoveYear(item.date);
+        } else {
+          $xeInput.dateMoveDay(item.date);
+        }
+      }
+    },
+    updateTimePos: function updateTimePos(liElem) {
+      if (liElem) {
+        var height = liElem.offsetHeight;
+        var ulElem = liElem.parentNode;
+        ulElem.scrollTop = liElem.offsetTop - height * 4;
+      }
+    },
+    dateTimeChangeEvent: function dateTimeChangeEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      reactData.datetimePanelValue = new Date(reactData.datetimePanelValue.getTime());
+      $xeInput.updateTimePos(evnt.currentTarget);
+    },
+    dateHourEvent: function dateHourEvent(evnt, item) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      reactData.datetimePanelValue.setHours(item.value);
+      $xeInput.dateTimeChangeEvent(evnt);
+    },
+    dateConfirmEvent: function dateConfirmEvent() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var dateValue = $xeInput.computeDateValue;
+      var isDateTimeType = $xeInput.computeIsDateTimeType;
+      if (isDateTimeType) {
+        var dateValueFormat = $xeInput.computeDateValueFormat;
+        if (multiple) {
+          // 如果为多选
+          var dateMultipleValue = $xeInput.computeDateMultipleValue;
+          if (isDateTimeType) {
+            // 如果是datetime特殊类型
+            var dateListValue = _toConsumableArray($xeInput.computeDateListValue);
+            var datetimeRest = [];
+            dateListValue.forEach(function (item) {
+              if (item) {
+                item.setHours(datetimePanelValue.getHours());
+                item.setMinutes(datetimePanelValue.getMinutes());
+                item.setSeconds(datetimePanelValue.getSeconds());
+                datetimeRest.push(item);
+              }
+            });
+            $xeInput.emitModel(datetimeRest.map(function (date) {
+              return _xeUtils.default.toDateString(date, dateValueFormat);
+            }).join(','), {
+              type: 'update'
+            });
+          } else {
+            // 如果是日期类型
+            $xeInput.emitModel(dateMultipleValue.join(','), {
+              type: 'update'
+            });
+          }
+        } else {
+          $xeInput.dateChange(dateValue || reactData.currentDate);
+        }
+      }
+      $xeInput.hidePanel();
+    },
+    dateMinuteEvent: function dateMinuteEvent(evnt, item) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      reactData.datetimePanelValue.setMinutes(item.value);
+      $xeInput.dateTimeChangeEvent(evnt);
+    },
+    dateSecondEvent: function dateSecondEvent(evnt, item) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      reactData.datetimePanelValue.setSeconds(item.value);
+      $xeInput.dateTimeChangeEvent(evnt);
+    },
+    dateOffsetEvent: function dateOffsetEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var isActivated = reactData.isActivated,
+        datePanelValue = reactData.datePanelValue,
+        datePanelType = reactData.datePanelType;
+      if (isActivated) {
+        evnt.preventDefault();
+        var isLeftArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isRightArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        if (datePanelType === 'year') {
+          var offsetYear = _xeUtils.default.getWhatYear(datePanelValue || Date.now(), 0, 'first');
+          if (isLeftArrow) {
+            offsetYear = _xeUtils.default.getWhatYear(offsetYear, -1);
+          } else if (isUpArrow) {
+            offsetYear = _xeUtils.default.getWhatYear(offsetYear, -4);
+          } else if (isRightArrow) {
+            offsetYear = _xeUtils.default.getWhatYear(offsetYear, 1);
+          } else if (isDwArrow) {
+            offsetYear = _xeUtils.default.getWhatYear(offsetYear, 4);
+          }
+          $xeInput.dateMoveYear(offsetYear);
+        } else if (datePanelType === 'quarter') {
+          var offsetQuarter = _xeUtils.default.getWhatQuarter(datePanelValue || Date.now(), 0, 'first');
+          if (isLeftArrow) {
+            offsetQuarter = _xeUtils.default.getWhatQuarter(offsetQuarter, -1);
+          } else if (isUpArrow) {
+            offsetQuarter = _xeUtils.default.getWhatQuarter(offsetQuarter, -2);
+          } else if (isRightArrow) {
+            offsetQuarter = _xeUtils.default.getWhatQuarter(offsetQuarter, 1);
+          } else if (isDwArrow) {
+            offsetQuarter = _xeUtils.default.getWhatQuarter(offsetQuarter, 2);
+          }
+          $xeInput.dateMoveQuarter(offsetQuarter);
+        } else if (datePanelType === 'month') {
+          var offsetMonth = _xeUtils.default.getWhatMonth(datePanelValue || Date.now(), 0, 'first');
+          if (isLeftArrow) {
+            offsetMonth = _xeUtils.default.getWhatMonth(offsetMonth, -1);
+          } else if (isUpArrow) {
+            offsetMonth = _xeUtils.default.getWhatMonth(offsetMonth, -4);
+          } else if (isRightArrow) {
+            offsetMonth = _xeUtils.default.getWhatMonth(offsetMonth, 1);
+          } else if (isDwArrow) {
+            offsetMonth = _xeUtils.default.getWhatMonth(offsetMonth, 4);
+          }
+          $xeInput.dateMoveMonth(offsetMonth);
+        } else {
+          var offsetDay = datePanelValue || _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+          var firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+          if (isLeftArrow) {
+            offsetDay = _xeUtils.default.getWhatDay(offsetDay, -1);
+          } else if (isUpArrow) {
+            offsetDay = _xeUtils.default.getWhatWeek(offsetDay, -1, firstDayOfWeek);
+          } else if (isRightArrow) {
+            offsetDay = _xeUtils.default.getWhatDay(offsetDay, 1);
+          } else if (isDwArrow) {
+            offsetDay = _xeUtils.default.getWhatWeek(offsetDay, 1, firstDayOfWeek);
+          }
+          $xeInput.dateMoveDay(offsetDay);
+        }
+      }
+    },
+    datePgOffsetEvent: function datePgOffsetEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var isActivated = reactData.isActivated;
+      if (isActivated) {
+        var isPgUp = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.PAGE_UP);
+        evnt.preventDefault();
+        if (isPgUp) {
+          $xeInput.datePrevEvent(evnt);
+        } else {
+          $xeInput.dateNextEvent(evnt);
+        }
+      }
+    },
+    dateOpenPanel: function dateOpenPanel() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type;
+      var isDateTimeType = $xeInput.computeIsDateTimeType;
+      var dateValue = $xeInput.computeDateValue;
+      if (['year', 'quarter', 'month', 'week'].indexOf(type) > -1) {
+        reactData.datePanelType = type;
+      } else {
+        reactData.datePanelType = 'day';
+      }
+      reactData.currentDate = _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+      if (dateValue) {
+        $xeInput.dateMonthHandle(dateValue, 0);
+        $xeInput.dateParseValue(dateValue);
+      } else {
+        $xeInput.dateNowHandle();
+      }
+      if (isDateTimeType) {
+        reactData.datetimePanelValue = reactData.datePanelValue || _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
+        $xeInput.$nextTick(function () {
+          var timeBodyElem = $xeInput.$refs.refInputTimeBody;
+          _xeUtils.default.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), function (elem) {
+            $xeInput.updateTimePos(elem);
+          });
+        });
+      }
+    },
+    // 弹出面板
+    updateZindex: function updateZindex() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      return $xeInput.$nextTick().then(function () {
+        var placement = props.placement;
+        var panelIndex = reactData.panelIndex;
+        var targetElem = $xeInput.$refs.refInputTarget;
+        var panelElem = $xeInput.$refs.refInputPanel;
+        var btnTransfer = $xeInput.computeBtnTransfer;
+        if (targetElem && panelElem) {
+          var targetHeight = targetElem.offsetHeight;
+          var targetWidth = targetElem.offsetWidth;
+          var panelHeight = panelElem.offsetHeight;
+          var panelWidth = panelElem.offsetWidth;
+          var marginSize = 5;
+          var panelStyle = {
+            zIndex: panelIndex
+          };
+          var _getAbsolutePos = (0, _dom.getAbsolutePos)(targetElem),
+            boundingTop = _getAbsolutePos.boundingTop,
+            boundingLeft = _getAbsolutePos.boundingLeft,
+            visibleHeight = _getAbsolutePos.visibleHeight,
+            visibleWidth = _getAbsolutePos.visibleWidth;
+          var panelPlacement = 'bottom';
+          if (btnTransfer) {
+            var left = boundingLeft;
+            var top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: "".concat(left, "px"),
+              top: "".concat(top, "px"),
+              minWidth: "".concat(targetWidth, "px")
+            });
+          } else {
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              panelStyle.bottom = "".concat(targetHeight, "px");
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              panelStyle.top = "".concat(targetHeight, "px");
+              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                // 如果上面不够放，则向下（优先）
+                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                  panelPlacement = 'top';
+                  panelStyle.top = '';
+                  panelStyle.bottom = "".concat(targetHeight, "px");
+                }
+              }
+            }
+          }
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = panelPlacement;
+          return $xeInput.$nextTick();
+        }
+      });
+    },
+    showPanel: function showPanel() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var internalData = $xeInput.internalData;
+      var visiblePanel = reactData.visiblePanel;
+      var hpTimeout = internalData.hpTimeout;
+      var isDisabled = $xeInput.computeIsDisabled;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var btnTransfer = $xeInput.computeBtnTransfer;
+      if (!isDisabled && !visiblePanel) {
+        var panelElem = $xeInput.$refs.refInputPanel;
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          if (btnTransfer) {
+            if (panelElem) {
+              document.body.appendChild(panelElem);
+            }
+          }
+        }
+        if (hpTimeout) {
+          clearTimeout(hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        if (isDatePickerType) {
+          $xeInput.dateOpenPanel();
+        }
+        setTimeout(function () {
+          reactData.visiblePanel = true;
+        }, 10);
+        $xeInput.updateZindex();
+        return $xeInput.updatePlacement();
+      }
+      return $xeInput.$nextTick();
+    },
+    datePickerOpenEvent: function datePickerOpenEvent(evnt) {
+      var $xeInput = this;
+      var isReadonly = $xeInput.computeIsReadonly;
+      if (!isReadonly) {
+        evnt.preventDefault();
+        $xeInput.showPanel();
+      }
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeInput = this;
+      $xeInput.triggerEvent(evnt);
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var el = $xeInput.$refs.refElem;
+      var panelWrapperElem = $xeInput.$refs.refPanelWrapper;
+      var isDisabled = $xeInput.computeIsDisabled;
+      if (!isDisabled && isActivated) {
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
+        if (!reactData.isActivated) {
+          // 如果是日期类型
+          if (isDatePickerType) {
+            if (visiblePanel) {
+              $xeInput.hidePanel();
+              $xeInput.afterCheckValue();
+            }
+          } else {
+            $xeInput.afterCheckValue();
+          }
+        }
+      }
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var clearable = props.clearable;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeInput.computeIsDisabled;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (!isDisabled) {
+        var isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
+        var isDel = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+        var isLeftArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isRightArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isPgUp = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.PAGE_UP);
+        var isPgDn = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.PAGE_DOWN);
+        var operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow;
+        var isActivated = reactData.isActivated;
+        if (isTab) {
+          if (isActivated) {
+            $xeInput.afterCheckValue();
+          }
+          isActivated = false;
+          reactData.isActivated = isActivated;
+        } else if (operArrow) {
+          if (isDatePickerType) {
+            if (isActivated) {
+              if (visiblePanel) {
+                $xeInput.dateOffsetEvent(evnt);
+              } else if (isUpArrow || isDwArrow) {
+                $xeInput.datePickerOpenEvent(evnt);
+              }
+            }
+          }
+        } else if (isEnter) {
+          if (isDatePickerType) {
+            if (visiblePanel) {
+              if (reactData.datePanelValue) {
+                $xeInput.dateSelectItem(reactData.datePanelValue);
+              } else {
+                $xeInput.hidePanel();
+              }
+            } else if (isActivated) {
+              $xeInput.datePickerOpenEvent(evnt);
+            }
+          }
+        } else if (isPgUp || isPgDn) {
+          if (isDatePickerType) {
+            if (isActivated) {
+              $xeInput.datePgOffsetEvent(evnt);
+            }
+          }
+        }
+        if (isTab || isEsc) {
+          if (visiblePanel) {
+            $xeInput.hidePanel();
+          }
+        } else if (isDel && clearable) {
+          if (isActivated) {
+            $xeInput.clearValueEvent(evnt, null);
+          }
+        }
+      }
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeInput.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelWrapperElem = $xeInput.$refs.refPanelWrapper;
+          if ((0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag) {
+            $xeInput.updatePlacement();
+          } else {
+            $xeInput.hidePanel();
+            $xeInput.afterCheckValue();
+          }
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var isActivated = reactData.isActivated,
+        visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeInput.hidePanel();
+        $xeInput.afterCheckValue();
+      } else if (isActivated) {
+        $xeInput.afterCheckValue();
+      }
+    },
+    //
+    // Render
+    //
+    renderDateLabel: function renderDateLabel(h, item, label) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var festivalMethod = props.festivalMethod;
+      if (festivalMethod) {
+        var datePanelType = reactData.datePanelType;
+        var festivalRest = festivalMethod({
+          type: datePanelType,
+          viewType: datePanelType,
+          date: item.date,
+          $input: $xeInput
+        });
+        var festivalItem = festivalRest ? _xeUtils.default.isString(festivalRest) ? {
+          label: festivalRest
+        } : festivalRest : {};
+        var extraItem = festivalItem.extra ? _xeUtils.default.isString(festivalItem.extra) ? {
+          label: festivalItem.extra
+        } : festivalItem.extra : null;
+        var labels = [h('span', {
+          class: ['vxe-input--date-label', {
+            'is-notice': festivalItem.notice
+          }]
+        }, extraItem && extraItem.label ? [h('span', "".concat(label || '')), h('span', {
+          class: ['vxe-input--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
+          style: extraItem.style
+        }, _xeUtils.default.toValueString(extraItem.label))] : ["".concat(label || '')])];
+        var festivalLabel = festivalItem.label;
+        if (festivalLabel) {
+          // 默认最多支持3个节日重叠
+          var festivalLabels = _xeUtils.default.toValueString(festivalLabel).split(',');
+          labels.push(h('span', {
+            class: ['vxe-input--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+            style: festivalItem.style
+          }, [festivalLabels.length > 1 ? h('span', {
+            class: ['vxe-input--date-festival--overlap', "overlap--".concat(festivalLabels.length)]
+          }, festivalLabels.map(function (label) {
+            return h('span', label.substring(0, 3));
+          })) : h('span', {
+            class: 'vxe-input--date-festival--label'
+          }, festivalLabels[0].substring(0, 3))]));
+        }
+        return labels;
+      }
+      return ["".concat(label || '')];
+    },
+    renderDateDayTable: function renderDateDayTable(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeInput.computeDateValue;
+      var dateHeaders = $xeInput.computeDateHeaders;
+      var dayDatas = $xeInput.computeDayDatas;
+      var dateListValue = $xeInput.computeDateListValue;
+      var matchFormat = 'yyyyMMdd';
+      return [h('table', {
+        class: "vxe-input--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('thead', [h('tr', dateHeaders.map(function (item) {
+        return h('th', item.label);
+      }))]), h('tbody', dayDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeInput.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            },
+            on: {
+              click: function click() {
+                return $xeInput.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeInput.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeInput.renderDateLabel(h, item, item.label));
+        }));
+      }))])];
+    },
+    renderDateWeekTable: function renderDateWeekTable(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeInput.computeDateValue;
+      var weekHeaders = $xeInput.computeWeekHeaders;
+      var weekDates = $xeInput.computeWeekDates;
+      var dateListValue = $xeInput.computeDateListValue;
+      var matchFormat = 'yyyyMMdd';
+      return [h('table', {
+        class: "vxe-input--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('thead', [h('tr', weekHeaders.map(function (item) {
+        return h('th', item.label);
+      }))]), h('tbody', weekDates.map(function (rows) {
+        var isSelected = multiple ? rows.some(function (item) {
+          return dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          });
+        }) : rows.some(function (item) {
+          return _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
+        });
+        var isHover = rows.some(function (item) {
+          return _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat);
+        });
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeInput.isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--hover': isHover
+            },
+            on: {
+              click: function click() {
+                return $xeInput.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeInput.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeInput.renderDateLabel(h, item, item.label));
+        }));
+      }))])];
+    },
+    renderDateMonthTable: function renderDateMonthTable(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeInput.computeDateValue;
+      var monthDatas = $xeInput.computeMonthDatas;
+      var dateListValue = $xeInput.computeDateListValue;
+      var matchFormat = 'yyyyMM';
+      return [h('table', {
+        class: "vxe-input--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tbody', monthDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeInput.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            },
+            on: {
+              click: function click() {
+                return $xeInput.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeInput.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeInput.renderDateLabel(h, item, (0, _ui.getI18n)("vxe.input.date.months.m".concat(item.month))));
+        }));
+      }))])];
+    },
+    renderDateQuarterTable: function renderDateQuarterTable(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeInput.computeDateValue;
+      var quarterDatas = $xeInput.computeQuarterDatas;
+      var dateListValue = $xeInput.computeDateListValue;
+      var matchFormat = 'yyyyq';
+      return [h('table', {
+        class: "vxe-input--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tbody', quarterDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeInput.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            },
+            on: {
+              click: function click() {
+                return $xeInput.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeInput.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeInput.renderDateLabel(h, item, (0, _ui.getI18n)("vxe.input.date.quarters.q".concat(item.quarter))));
+        }));
+      }))])];
+    },
+    renderDateYearTable: function renderDateYearTable(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType,
+        datePanelValue = reactData.datePanelValue;
+      var dateValue = $xeInput.computeDateValue;
+      var yearDatas = $xeInput.computeYearDatas;
+      var dateListValue = $xeInput.computeDateListValue;
+      var matchFormat = 'yyyy';
+      return [h('table', {
+        class: "vxe-input--date-".concat(datePanelType, "-view"),
+        attrs: {
+          cellspacing: 0,
+          cellpadding: 0,
+          border: 0
+        }
+      }, [h('tbody', yearDatas.map(function (rows) {
+        return h('tr', rows.map(function (item) {
+          return h('td', {
+            class: {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': item.isNow,
+              'is--next': item.isNext,
+              'is--disabled': $xeInput.isDateDisabled(item),
+              'is--selected': multiple ? dateListValue.some(function (val) {
+                return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+              }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+              'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
+            },
+            on: {
+              click: function click() {
+                return $xeInput.dateSelectEvent(item);
+              },
+              mouseenter: function mouseenter() {
+                return $xeInput.dateMouseenterEvent(item);
+              }
+            }
+          }, $xeInput.renderDateLabel(h, item, item.year));
+        }));
+      }))])];
+    },
+    renderDateTable: function renderDateTable(h) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var datePanelType = reactData.datePanelType;
+      switch (datePanelType) {
+        case 'week':
+          return $xeInput.renderDateWeekTable(h);
+        case 'month':
+          return $xeInput.renderDateMonthTable(h);
+        case 'quarter':
+          return $xeInput.renderDateQuarterTable(h);
+        case 'year':
+          return $xeInput.renderDateYearTable(h);
+      }
+      return $xeInput.renderDateDayTable(h);
+    },
+    renderDatePanel: function renderDatePanel(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var multiple = props.multiple;
+      var datePanelType = reactData.datePanelType;
+      var isDisabledPrevDateBtn = $xeInput.computeIsDisabledPrevDateBtn;
+      var isDisabledNextDateBtn = $xeInput.computeIsDisabledNextDateBtn;
+      var selectDatePanelLabel = $xeInput.computeSelectDatePanelLabel;
+      return [h('div', {
+        class: 'vxe-input--date-picker-header'
+      }, [h('div', {
+        class: 'vxe-input--date-picker-type-wrapper'
+      }, [datePanelType === 'year' ? h('span', {
+        class: 'vxe-input--date-picker-label'
+      }, selectDatePanelLabel) : h('span', {
+        class: 'vxe-input--date-picker-btn',
+        on: {
+          click: $xeInput.dateToggleTypeEvent
+        }
+      }, selectDatePanelLabel)]), h('div', {
+        class: 'vxe-input--date-picker-btn-wrapper'
+      }, [h('span', {
+        class: ['vxe-input--date-picker-btn vxe-input--date-picker-prev-btn', {
+          'is--disabled': isDisabledPrevDateBtn
+        }],
+        on: {
+          click: $xeInput.datePrevEvent
+        }
+      }, [h('i', {
+        class: 'vxe-icon-caret-left'
+      })]), h('span', {
+        class: 'vxe-input--date-picker-btn vxe-input--date-picker-current-btn',
+        on: {
+          click: $xeInput.dateTodayMonthEvent
+        }
+      }, [h('i', {
+        class: 'vxe-icon-dot'
+      })]), h('span', {
+        class: ['vxe-input--date-picker-btn vxe-input--date-picker-next-btn', {
+          'is--disabled': isDisabledNextDateBtn
+        }],
+        on: {
+          click: $xeInput.dateNextEvent
+        }
+      }, [h('i', {
+        class: 'vxe-icon-caret-right'
+      })]), multiple && $xeInput.computeSupportMultiples ? h('span', {
+        class: 'vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn'
+      }, [h('button', {
+        class: 'vxe-input--date-picker-confirm',
+        attrs: {
+          type: 'button'
+        },
+        on: {
+          click: $xeInput.dateConfirmEvent
+        }
+      }, (0, _ui.getI18n)('vxe.button.confirm'))]) : null])]), h('div', {
+        class: 'vxe-input--date-picker-body'
+      }, $xeInput.renderDateTable(h))];
+    },
+    renderTimePanel: function renderTimePanel(h) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var datetimePanelValue = reactData.datetimePanelValue;
+      var dateTimeLabel = $xeInput.computeDateTimeLabel;
+      var hourList = $xeInput.computeHourList;
+      var hasTimeMinute = $xeInput.computeHasTimeMinute;
+      var minuteList = $xeInput.computeMinuteList;
+      var hasTimeSecond = $xeInput.computeHasTimeSecond;
+      var secondList = $xeInput.computeSecondList;
+      return [h('div', {
+        class: 'vxe-input--time-picker-header'
+      }, [hasTimeMinute ? h('span', {
+        class: 'vxe-input--time-picker-title'
+      }, dateTimeLabel) : (0, _ui.renderEmptyElement)($xeInput), h('div', {
+        class: 'vxe-input--time-picker-btn'
+      }, [h('button', {
+        class: 'vxe-input--time-picker-confirm',
+        attrs: {
+          type: 'button'
+        },
+        on: {
+          click: $xeInput.dateConfirmEvent
+        }
+      }, (0, _ui.getI18n)('vxe.button.confirm'))])]), h('div', {
+        ref: 'refInputTimeBody',
+        class: 'vxe-input--time-picker-body'
+      }, [h('ul', {
+        class: 'vxe-input--time-picker-hour-list'
+      }, hourList.map(function (item, index) {
+        return h('li', {
+          key: index,
+          class: {
+            'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
+          },
+          on: {
+            click: function click(evnt) {
+              return $xeInput.dateHourEvent(evnt, item);
+            }
+          }
+        }, item.label);
+      })), hasTimeMinute ? h('ul', {
+        class: 'vxe-input--time-picker-minute-list'
+      }, minuteList.map(function (item, index) {
+        return h('li', {
+          key: index,
+          class: {
+            'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+          },
+          on: {
+            click: function click(evnt) {
+              return $xeInput.dateMinuteEvent(evnt, item);
+            }
+          }
+        }, item.label);
+      })) : (0, _ui.renderEmptyElement)($xeInput), hasTimeMinute && hasTimeSecond ? h('ul', {
+        class: 'vxe-input--time-picker-second-list'
+      }, secondList.map(function (item, index) {
+        return h('li', {
+          key: index,
+          class: {
+            'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+          },
+          on: {
+            click: function click(evnt) {
+              return $xeInput.dateSecondEvent(evnt, item);
+            }
+          }
+        }, item.label);
+      })) : (0, _ui.renderEmptyElement)($xeInput)])];
+    },
+    renderPanel: function renderPanel(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var type = props.type;
+      var initialized = reactData.initialized,
+        isAniVisible = reactData.isAniVisible,
+        visiblePanel = reactData.visiblePanel,
+        panelPlacement = reactData.panelPlacement,
+        panelStyle = reactData.panelStyle;
+      var vSize = $xeInput.computeSize;
+      var btnTransfer = $xeInput.computeBtnTransfer;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var renders = [];
+      if (isDatePickerType) {
+        if (type === 'datetime') {
+          renders.push(h('div', {
+            key: type,
+            ref: 'refPanelWrapper',
+            class: 'vxe-input--panel-layout-wrapper'
+          }, [h('div', {
+            class: 'vxe-input--panel-left-wrapper'
+          }, $xeInput.renderDatePanel(h)), h('div', {
+            class: 'vxe-input--panel-right-wrapper'
+          }, $xeInput.renderTimePanel(h))]));
+        } else if (type === 'time') {
+          renders.push(h('div', {
+            key: type,
+            ref: 'refPanelWrapper',
+            class: 'vxe-input--panel-wrapper'
+          }, $xeInput.renderTimePanel(h)));
+        } else {
+          renders.push(h('div', {
+            key: type || 'default',
+            ref: 'refPanelWrapper',
+            class: 'vxe-input--panel-wrapper'
+          }, $xeInput.renderDatePanel(h)));
+        }
+        return h('div', {
+          ref: 'refInputPanel',
+          class: ['vxe-table--ignore-clear vxe-input--panel', "type--".concat(type), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', isAniVisible), 'ani--enter', visiblePanel)],
+          attrs: {
+            placement: panelPlacement
+          },
+          style: panelStyle
+        }, initialized ? renders : []);
+      }
+      return (0, _ui.renderEmptyElement)($xeInput);
+    },
+    renderNumberIcon: function renderNumberIcon(h) {
+      var $xeInput = this;
+      var isDisabledAddNumber = $xeInput.computeIsDisabledAddNumber;
+      var isDisabledSubtractNumber = $xeInput.computeIsDisabledSubtractNumber;
+      return h('div', {
+        class: 'vxe-input--control-icon'
+      }, [h('div', {
+        class: 'vxe-input--number-icon'
+      }, [h('div', {
+        class: ['vxe-input--number-btn is--prev', {
+          'is--disabled': isDisabledAddNumber
+        }],
+        on: {
+          mousedown: $xeInput.numberMousedownEvent,
+          mouseup: $xeInput.numberStopDown,
+          mouseleave: $xeInput.numberStopDown
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().NUMBER_INPUT_PREV_NUM
+      })]), h('div', {
+        class: ['vxe-input--number-btn is--next', {
+          'is--disabled': isDisabledSubtractNumber
+        }],
+        on: {
+          mousedown: $xeInput.numberMousedownEvent,
+          mouseup: $xeInput.numberStopDown,
+          mouseleave: $xeInput.numberStopDown
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().NUMBER_INPUT_NEXT_NUM
+      })])])]);
+    },
+    renderDatePickerIcon: function renderDatePickerIcon(h) {
+      var $xeInput = this;
+      return h('div', {
+        class: 'vxe-input--control-icon',
+        on: {
+          click: $xeInput.datePickerOpenEvent
+        }
+      }, [h('i', {
+        class: ['vxe-input--date-picker-icon', (0, _ui.getIcon)().DATE_PICKER_DATE]
+      })]);
+    },
+    renderSearchIcon: function renderSearchIcon(h) {
+      var $xeInput = this;
+      return h('div', {
+        class: 'vxe-input--control-icon',
+        on: {
+          click: $xeInput.searchEvent
+        }
+      }, [h('i', {
+        class: ['vxe-input--search-icon', (0, _ui.getIcon)().INPUT_SEARCH]
+      })]);
+    },
+    renderPasswordIcon: function renderPasswordIcon(h) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      var showPwd = reactData.showPwd;
+      return h('div', {
+        class: 'vxe-input--control-icon',
+        on: {
+          click: $xeInput.passwordToggleEvent
+        }
+      }, [h('i', {
+        class: ['vxe-input--password-icon', showPwd ? (0, _ui.getIcon)().PASSWORD_INPUT_SHOW_PWD : (0, _ui.getIcon)().PASSWORD_INPUT_HIDE_PWD]
+      })]);
+    },
+    renderPrefixIcon: function renderPrefixIcon(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var slots = $xeInput.$scopedSlots;
+      var prefixIcon = props.prefixIcon;
+      var prefixSlot = slots.prefix;
+      return prefixSlot || prefixIcon ? h('div', {
+        class: 'vxe-input--prefix',
+        on: {
+          click: $xeInput.clickPrefixEvent
+        }
+      }, [h('div', {
+        class: 'vxe-input--prefix-icon'
+      }, prefixSlot ? (0, _vn.getSlotVNs)(prefixSlot({})) : [h('i', {
+        class: prefixIcon
+      })])]) : null;
+    },
+    renderSuffixIcon: function renderSuffixIcon(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var slots = $xeInput.$scopedSlots;
+      var reactData = $xeInput.reactData;
+      var suffixIcon = props.suffixIcon;
+      var inputValue = reactData.inputValue;
+      var suffixSlot = slots.suffix;
+      var isDisabled = $xeInput.computeIsDisabled;
+      var isNumType = $xeInput.computeIsNumType;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var isPawdType = $xeInput.computeIsPawdType;
+      var isSearchType = $xeInput.computeIsSearchType;
+      var isClearable = $xeInput.computeIsClearable;
+      var isExtraBtn = isPawdType || isNumType || isDatePickerType || isSearchType;
+      return isClearable || suffixSlot || suffixIcon || isExtraBtn ? h('div', {
+        class: ['vxe-input--suffix', {
+          'is--clear': isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue))
+        }]
+      }, [isClearable ? h('div', {
+        class: 'vxe-input--clear-icon',
+        on: {
+          click: $xeInput.clearValueEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().INPUT_CLEAR
+      })]) : (0, _ui.renderEmptyElement)($xeInput), isExtraBtn ? $xeInput.renderExtraSuffixIcon(h) : (0, _ui.renderEmptyElement)($xeInput), suffixSlot || suffixIcon ? h('div', {
+        class: 'vxe-input--suffix-icon',
+        on: {
+          click: $xeInput.clickSuffixEvent
+        }
+      }, suffixSlot ? (0, _vn.getSlotVNs)(suffixSlot({})) : [h('i', {
+        class: suffixIcon
+      })]) : (0, _ui.renderEmptyElement)($xeInput)]) : null;
+    },
+    renderExtraSuffixIcon: function renderExtraSuffixIcon(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var controls = props.controls;
+      var isNumType = $xeInput.computeIsNumType;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      var isPawdType = $xeInput.computeIsPawdType;
+      var isSearchType = $xeInput.computeIsSearchType;
+      if (isPawdType) {
+        return $xeInput.renderPasswordIcon(h);
+      }
+      if (isNumType) {
+        if (controls) {
+          return $xeInput.renderNumberIcon(h);
+        }
+      }
+      if (isDatePickerType) {
+        return $xeInput.renderDatePickerIcon(h);
+      }
+      if (isSearchType) {
+        return $xeInput.renderSearchIcon(h);
+      }
+      return (0, _ui.renderEmptyElement)($xeInput);
+    },
+    renderVN: function renderVN(h) {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var className = props.className,
+        controls = props.controls,
+        type = props.type,
+        align = props.align,
+        showWordCount = props.showWordCount,
+        countMethod = props.countMethod,
+        name = props.name,
+        autoComplete = props.autoComplete,
+        autocomplete = props.autocomplete;
+      var inputValue = reactData.inputValue,
+        visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      var vSize = $xeInput.computeSize;
+      var isDisabled = $xeInput.computeIsDisabled;
+      var formReadonly = $xeInput.computeFormReadonly;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-input--readonly', "type--".concat(type), className]
+        }, inputValue);
+      }
+      var isCountError = $xeInput.computeIsCountError;
+      var inputCount = $xeInput.computeInputCount;
+      var inputReadonly = $xeInput.computeInputReadonly;
+      var inpMaxLength = $xeInput.computeInpMaxLength;
+      var inputType = $xeInput.computeInputType;
+      var inpPlaceholder = $xeInput.computeInpPlaceholder;
+      var isClearable = $xeInput.computeIsClearable;
+      var isWordCount = showWordCount && ['text', 'search'].includes(type);
+      var prefix = $xeInput.renderPrefixIcon(h);
+      var suffix = $xeInput.renderSuffixIcon(h);
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-input', "type--".concat(type), className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), "is--".concat(align), align), 'is--controls', controls), 'is--prefix', !!prefix), 'is--suffix', !!suffix), 'is--visible', visiblePanel), 'is--count', isWordCount), 'is--disabled', isDisabled), 'is--active', isActivated), 'show--clear', isClearable && !isDisabled && !(inputValue === '' || _xeUtils.default.eqNull(inputValue)))],
+        attrs: {
+          spellcheck: false
+        }
+      }, [prefix || (0, _ui.renderEmptyElement)($xeInput), h('div', {
+        class: 'vxe-input--wrapper'
+      }, [h('input', {
+        ref: 'refInputTarget',
+        class: 'vxe-input--inner',
+        domProps: {
+          value: inputValue
+        },
+        attrs: {
+          name: name,
+          type: inputType,
+          placeholder: inpPlaceholder,
+          maxlength: inpMaxLength,
+          readonly: inputReadonly,
+          disabled: isDisabled,
+          autocomplete: autoComplete || autocomplete
+        },
+        on: {
+          keydown: $xeInput.keydownEvent,
+          keyup: $xeInput.keyupEvent,
+          wheel: $xeInput.wheelEvent,
+          click: $xeInput.clickEvent,
+          input: $xeInput.inputEvent,
+          change: $xeInput.changeEvent,
+          focus: $xeInput.focusEvent,
+          blur: $xeInput.blurEvent
+        }
+      })]), suffix || (0, _ui.renderEmptyElement)($xeInput),
+      // 下拉面板
+      $xeInput.renderPanel(h),
+      // 字数统计
+      isWordCount ? h('span', {
+        class: ['vxe-input--count', {
+          'is--error': isCountError
+        }]
+      }, countMethod ? "".concat(countMethod({
+        value: inputValue
+      })) : "".concat(inputCount).concat(inpMaxLength ? "/".concat(inpMaxLength) : '')) : (0, _ui.renderEmptyElement)($xeInput)]);
+    }
+  },
+  watch: {
+    value: function value(val) {
+      var $xeInput = this;
+      var reactData = $xeInput.reactData;
+      reactData.inputValue = val;
+      $xeInput.changeValue();
+    },
+    type: function type() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      // 切换类型是重置内置变量
+      Object.assign(reactData, {
+        inputValue: props.value,
+        datetimePanelValue: null,
+        datePanelValue: null,
+        datePanelLabel: '',
+        datePanelType: 'day',
+        selectMonth: null,
+        currentDate: null
+      });
+      $xeInput.initValue();
+    },
+    computeDateLabelFormat: function computeDateLabelFormat() {
+      var $xeInput = this;
+      var props = $xeInput;
+      var reactData = $xeInput.reactData;
+      var isDatePickerType = $xeInput.computeIsDatePickerType;
+      if (isDatePickerType) {
+        $xeInput.dateParseValue(reactData.datePanelValue);
+        reactData.inputValue = props.multiple ? $xeInput.computeDateMultipleLabel : reactData.datePanelLabel;
+      }
+    }
+  },
+  created: function created() {
+    var $xeInput = this;
+    var props = $xeInput;
+    var reactData = $xeInput.reactData;
+    reactData.inputValue = props.value;
+    $xeInput.initValue();
+  },
+  mounted: function mounted() {
+    var $xeInput = this;
+    _ui.globalEvents.on($xeInput, 'mousewheel', $xeInput.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeInput, 'mousedown', $xeInput.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeInput, 'keydown', $xeInput.handleGlobalKeydownEvent);
+    _ui.globalEvents.on($xeInput, 'blur', $xeInput.handleGlobalBlurEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeInput = this;
+    var panelElem = $xeInput.$refs.refInputPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    $xeInput.numberStopDown();
+    $xeInput.afterCheckValue();
+    _ui.globalEvents.off($xeInput, 'mousewheel');
+    _ui.globalEvents.off($xeInput, 'mousedown');
+    _ui.globalEvents.off($xeInput, 'keydown');
+    _ui.globalEvents.off($xeInput, 'blur');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});