vxe-pc-ui 3.15.2 → 3.15.4

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

@@ -1,5 +1,6 @@
 "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
 });
@@ -16,10 +17,44 @@ var _datePanel = _interopRequireDefault(require("../../date-panel/src/date-panel
 var _button = _interopRequireDefault(require("../../button/src/button"));
 var _buttonGroup = _interopRequireDefault(require("../../button/src/button-group"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _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); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var _createComponentLog = (0, _log.createComponentLog)('date-picker'),
+  warnLog = _createComponentLog.warnLog,
+  errLog = _createComponentLog.errLog;
+var maskedTypes = ['year', 'month', 'date', 'datetime', 'time'];
+var inputMaskedKeys = ['y', 'M', 'd', 'H', 'm', 'n', 's'];
+var parseInputKayMaps = {};
+inputMaskedKeys.forEach(function (key) {
+  parseInputKayMaps[key] = true;
+});
+function createReactData() {
+  return {
+    initialized: false,
+    panelIndex: 0,
+    visiblePanel: false,
+    isAniVisible: false,
+    panelStyle: {},
+    panelPlacement: '',
+    isActivated: false,
+    inputValue: '',
+    labelFlag: 0
+  };
+}
+function createInternalData() {
+  return {
+    // hpTimeout: undefined,
+    inputLabel: '',
+    laseFocusMasked: 0
+  };
+}
 var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeDatePicker',
   mixins: [_ui.globalMixins.sizeMixin],
@@ -99,7 +134,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     labelFormat: String,
     valueFormat: String,
     timeFormat: String,
-    inputFormat: String,
     editable: {
       type: Boolean,
       default: true
@@ -141,7 +175,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return (0, _ui.getConfig)().datePicker.autoClose;
       }
     },
-    controlConfig: Object,
+    maskedConfig: Object,
     prefixIcon: String,
     suffixIcon: String,
     placement: String,
@@ -181,26 +215,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   data: function data() {
     var xID = _xeUtils.default.uniqueId();
-    var reactData = {
-      initialized: false,
-      panelIndex: 0,
-      visiblePanel: false,
-      isAniVisible: false,
-      panelStyle: {},
-      panelPlacement: '',
-      isActivated: false,
-      inputValue: '',
-      inputLabel: ''
-    };
-    var internalData = {
-      // hpTimeout: undefined,
-      parseInputKayMaps: {}
-    };
-    return {
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
       xID: xID,
-      reactData: reactData,
-      internalData: internalData
-    };
+      reactData: reactData
+    });
   },
   computed: Object.assign(Object.assign({}, {}), {
     computeBtnTransfer: function computeBtnTransfer() {
@@ -269,6 +288,57 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var props = $xeDatePicker;
       return props.clearable;
     },
+    computeIsDatePanelType: function computeIsDatePanelType() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var isDateTimeType = $xeDatePicker.computeIsDateTimeType;
+      return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    },
+    computeDateListValue: function computeDateListValue() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var modelValue = props.value,
+        type = props.type,
+        multiple = props.multiple;
+      var isDatePanelType = $xeDatePicker.computeIsDatePanelType;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      if (multiple && modelValue && isDatePanelType) {
+        return _xeUtils.default.toValueString(modelValue).split(',').map(function (item) {
+          var date = (0, _util.parseDateValue)(item, type, {
+            valueFormat: dateValueFormat
+          });
+          if (_xeUtils.default.isValidDate(date)) {
+            return date;
+          }
+          return date;
+        });
+      }
+      return [];
+    },
+    computeLimitMaxCount: function computeLimitMaxCount() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      return props.multiple ? _xeUtils.default.toNumber(props.limitCount) : 0;
+    },
+    computeDateMultipleValue: function computeDateMultipleValue() {
+      var $xeDatePicker = this;
+      var dateListValue = $xeDatePicker.computeDateListValue;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateValueFormat);
+      });
+    },
+    computeOverCount: function computeOverCount() {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var multiple = props.multiple;
+      var limitMaxCount = $xeDatePicker.computeLimitMaxCount;
+      var dateMultipleValue = $xeDatePicker.computeDateMultipleValue;
+      if (multiple && limitMaxCount) {
+        return dateMultipleValue.length >= limitMaxCount;
+      }
+      return false;
+    },
     computeInputReadonly: function computeInputReadonly() {
       var $xeDatePicker = this;
       var props = $xeDatePicker;
@@ -338,12 +408,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         valueFormat = props.valueFormat;
       return (0, _util.handleValueFormat)(type, valueFormat);
     },
-    computeDateInputFormat: function computeDateInputFormat() {
+    computeDateMaskedFormat: function computeDateMaskedFormat() {
       var $xeDatePicker = this;
-      var props = $xeDatePicker;
-      var type = props.type,
-        inputFormat = props.inputFormat;
-      return (0, _util.handleInputFormat)(type, inputFormat);
+      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
+      return dateLabelFormat;
     },
     computeFirstDayOfWeek: function computeFirstDayOfWeek() {
       var $xeDatePicker = this;
@@ -371,10 +439,16 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return dateObj.label;
       }).join(', ');
     },
-    computeControlOpts: function computeControlOpts() {
+    computeMaskedOpts: function computeMaskedOpts() {
       var $xeDatePicker = this;
       var props = $xeDatePicker;
-      return Object.assign({}, (0, _ui.getConfig)().datePicker.controlConfig, props.controlConfig);
+      return Object.assign({}, (0, _ui.getConfig)().datePicker.maskedConfig, props.maskedConfig);
+    },
+    computeMaskChar: function computeMaskChar() {
+      var $xeDatePicker = this;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var maskPlaceholder = maskedOpts.maskPlaceholder;
+      return (maskPlaceholder ? ('' + maskPlaceholder)[0] : '') || '*';
     }
   }),
   methods: {
@@ -411,6 +485,15 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       reactData.inputValue = val;
     },
+    handleInputLabel: function handleInputLabel(text, isUpdate) {
+      var $xeDatePicker = this;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      internalData.inputLabel = text;
+      if (isUpdate) {
+        reactData.labelFlag++;
+      }
+    },
     triggerEvent: function triggerEvent(evnt) {
       var $xeDatePicker = this;
       var reactData = $xeDatePicker.reactData;
@@ -474,10 +557,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     inputEvent: function inputEvent(evnt) {
       var $xeDatePicker = this;
-      var reactData = $xeDatePicker.reactData;
       var inputElem = evnt.target;
       var value = inputElem.value;
-      reactData.inputLabel = value;
+      $xeDatePicker.handleInputLabel(value, true);
       $xeDatePicker.dispatchEvent('input', {
         value: value
       }, evnt);
@@ -489,19 +571,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $xeDatePicker.triggerEvent(evnt);
       }
     },
-    focusEvent: function focusEvent(evnt) {
-      var $xeDatePicker = this;
-      var reactData = $xeDatePicker.reactData;
-      var popupOpts = $xeDatePicker.computePopupOpts;
-      var trigger = popupOpts.trigger;
-      reactData.isActivated = true;
-      if (!trigger || trigger === 'default') {
-        $xeDatePicker.datePickerOpenEvent(evnt);
-      } else if (trigger === 'icon') {
-        $xeDatePicker.hidePanel();
-      }
-      $xeDatePicker.triggerEvent(evnt);
-    },
     clickPrefixEvent: function clickPrefixEvent(evnt) {
       var $xeDatePicker = this;
       var reactData = $xeDatePicker.reactData;
@@ -525,6 +594,134 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }, 350);
       });
     },
+    dateChange: function dateChange(date, isReload) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var modelValue = props.value,
+        multiple = props.multiple;
+      var isDateTimeType = $xeDatePicker.computeIsDateTimeType;
+      var dateValueFormat = $xeDatePicker.computeDateValueFormat;
+      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+      if (props.type === 'week') {
+        var sWeek = _xeUtils.default.toNumber(props.selectDay);
+        date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+      }
+      var inpVal = _xeUtils.default.toDateString(date, dateValueFormat, {
+        firstDay: firstDayOfWeek
+      });
+      if (multiple) {
+        var overCount = $xeDatePicker.computeOverCount;
+        // 如果为多选
+        if (isDateTimeType) {
+          // 如果是datetime特殊类型
+          var dateListValue = isReload ? [] : _toConsumableArray($xeDatePicker.computeDateListValue);
+          var datetimeRest = [];
+          var eqIndex = _xeUtils.default.findIndexOf(dateListValue, function (val) {
+            return _xeUtils.default.isDateSame(date, val, 'yyyyMMdd');
+          });
+          if (eqIndex === -1) {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            dateListValue.push(date);
+          } else {
+            dateListValue.splice(eqIndex, 1);
+          }
+          dateListValue.forEach(function (item) {
+            if (item) {
+              datetimeRest.push(item);
+            }
+          });
+          $xeDatePicker.handleChange(datetimeRest.map(function (date) {
+            return _xeUtils.default.toDateString(date, dateValueFormat);
+          }).join(','), {
+            type: 'update'
+          });
+        } else {
+          var dateMultipleValue = isReload ? [] : $xeDatePicker.computeDateMultipleValue;
+          // 如果是日期类型
+          if (dateMultipleValue.some(function (val) {
+            return _xeUtils.default.isEqual(val, inpVal);
+          })) {
+            $xeDatePicker.handleChange(dateMultipleValue.filter(function (val) {
+              return !_xeUtils.default.isEqual(val, inpVal);
+            }).join(','), {
+              type: 'update'
+            });
+          } else {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            $xeDatePicker.handleChange(dateMultipleValue.concat([inpVal]).join(','), {
+              type: 'update'
+            });
+          }
+        }
+      } else {
+        // 如果为单选
+        if (!_xeUtils.default.isEqual(modelValue, inpVal)) {
+          $xeDatePicker.handleChange(inpVal, {
+            type: 'update'
+          });
+        }
+      }
+    },
+    dateRevert: function dateRevert() {
+      var $xeDatePicker = this;
+      var panelLabel = $xeDatePicker.computePanelLabel;
+      $xeDatePicker.handleInputLabel(panelLabel, true);
+    },
+    afterCheckValue: function afterCheckValue(inpVal) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type;
+      var inputLabel = internalData.inputLabel;
+      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
+      if (!inpVal) {
+        $xeDatePicker.handleChange('', {
+          type: 'check'
+        });
+        return;
+      }
+      var inpDateVal = (0, _util.parseDateValue)(inpVal, type, {
+        valueFormat: dateLabelFormat
+      });
+      if (!_xeUtils.default.isValidDate(inpDateVal)) {
+        $xeDatePicker.dateRevert();
+        return;
+      }
+      if (type === 'time') {
+        inpDateVal = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat);
+        if (inputLabel !== inpDateVal) {
+          $xeDatePicker.handleChange(inpDateVal, {
+            type: 'check'
+          });
+        }
+        $xeDatePicker.handleInputLabel(inpDateVal, true);
+        return;
+      }
+      var isChange = false;
+      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+      if (type === 'datetime') {
+        var dateValue = reactData.inputValue;
+        if (inpVal !== _xeUtils.default.toDateString(dateValue, dateLabelFormat) || inpVal !== _xeUtils.default.toDateString(inpDateVal, dateLabelFormat)) {
+          isChange = true;
+        }
+      } else {
+        isChange = true;
+      }
+      var label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+        firstDay: firstDayOfWeek
+      });
+      $xeDatePicker.handleInputLabel(label, true);
+      if (isChange) {
+        $xeDatePicker.dateChange(inpDateVal);
+      }
+    },
     clearValueEvent: function clearValueEvent(evnt, value) {
       var $xeDatePicker = this;
       var isDatePickerType = $xeDatePicker.computeIsDatePickerType;
@@ -547,38 +744,322 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }, evnt);
       }
     },
-    handleArrowInputDate: function handleArrowInputDate(evnt, isUpArrow) {
+    handleArrowInputDate: function handleArrowInputDate(evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type,
+        multiple = props.multiple;
+      if (multiple) {
+        return;
+      }
+      var targetElem = $xeDatePicker.$refs.refInputTarget;
+      if (!targetElem) {
+        return;
+      }
+      var inpValue = targetElem.value;
+      if (!inpValue) {
+        return;
+      }
+      var dateMaskedFormat = $xeDatePicker.computeDateMaskedFormat;
+      var dateLabelFormat = $xeDatePicker.computeDateLabelFormat;
+      var firstDayOfWeek = $xeDatePicker.computeFirstDayOfWeek;
+      var maskChar = $xeDatePicker.computeMaskChar;
+      var selectionStart = targetElem.selectionStart || 0;
+      var selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      var skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+      if (!skRest) {
+        return;
+      }
+      if (isUpArrow || isDwArrow) {
+        var chunkFormat = skRest[0] || '';
+        var chunkStartIndex = skRest.index || 0;
+        var chunkEndIndex = chunkStartIndex + chunkFormat.length;
+        var chunkValue = inpValue.slice(chunkStartIndex, chunkEndIndex);
+        if (parseInputKayMaps[selectKey]) {
+          var chunkNum = ((0, _util.isAllSameChar)(chunkValue, maskChar) ? (0, _util.getChunkDefaultNum)(selectKey) : _xeUtils.default.toNumber(chunkValue)) + (isUpArrow ? 1 : -1);
+          var restValue = inpValue.slice(0, chunkStartIndex) + _xeUtils.default.padStart(chunkNum, chunkFormat.length, '0') + inpValue.slice(chunkEndIndex);
+          evnt.preventDefault();
+          if (restValue.indexOf(maskChar) === -1) {
+            // 解析日期
+            var inpDateVal = (0, _util.parseDateValue)(restValue, type, {
+              valueFormat: dateLabelFormat
+            });
+            if (_xeUtils.default.isValidDate(inpDateVal)) {
+              var label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+                firstDay: firstDayOfWeek
+              });
+              targetElem.value = label;
+              $xeDatePicker.handleInputLabel(label, false);
+            }
+          } else {
+            targetElem.value = restValue;
+            $xeDatePicker.handleInputLabel(restValue, false);
+          }
+        }
+        targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+      } else if (isLtArrow || isRtArrow) {
+        var currKeyIndex = inputMaskedKeys.indexOf(selectKey);
+        if (currKeyIndex > -1) {
+          var allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp("(".concat(inputMaskedKeys.join('|'), ")+"), 'g')) || [], function (fullKey) {
+            return fullKey[0];
+          });
+          var currIndex = _xeUtils.default.findIndexOf(allMaskedKeys, function (key) {
+            return selectKey === key[0];
+          });
+          var targetFormatKey = isLtArrow ? allMaskedKeys[currIndex - 1] || allMaskedKeys[0] : allMaskedKeys[currIndex + 1] || allMaskedKeys[allMaskedKeys.length - 1];
+          var targetKey = targetFormatKey ? targetFormatKey[0] : '';
+          var sktRest = dateMaskedFormat.match(new RegExp(targetKey + '+'));
+          if (sktRest) {
+            evnt.preventDefault();
+            var mtStartIndex = sktRest.index || 0;
+            var mtEndIndex = mtStartIndex + sktRest[0].length;
+            targetElem.setSelectionRange(mtStartIndex, mtEndIndex);
+          }
+        }
+      }
+      internalData.isTriggerMasked = true;
+    },
+    handleMaskedInputDate: function handleMaskedInputDate(evnt) {
       var $xeDatePicker = this;
       var props = $xeDatePicker;
-      var reactData = $xeDatePicker.reactData;
       var internalData = $xeDatePicker.internalData;
       var multiple = props.multiple;
       if (multiple) {
         return;
       }
-      var inputValue = reactData.inputValue;
-      if (!inputValue) {
+      var targetElem = $xeDatePicker.$refs.refInputTarget;
+      if (!targetElem) {
+        return;
+      }
+      var isControlKey = (0, _dom.hasControlKey)(evnt);
+      if (isControlKey) {
+        return;
+      }
+      evnt.preventDefault();
+      var eKey = evnt.key;
+      var isDeleleKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+      var isBackspaceKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.BACKSPACE);
+      var isNumKey = eKey >= '0' && eKey <= '9';
+      var numKey = isNumKey ? evnt.key : '';
+      if (!(isDeleleKey || isBackspaceKey || isNumKey)) {
+        return;
+      }
+      var isTriggerMasked = internalData.isTriggerMasked;
+      var dateMaskedFormat = $xeDatePicker.computeDateMaskedFormat;
+      var maskChar = $xeDatePicker.computeMaskChar;
+      var inpValue = targetElem.value || dateMaskedFormat;
+      var selectionStart = targetElem.selectionStart || 0;
+      var selectionEnd = targetElem.selectionEnd || 0;
+      var selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      var skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+      if (!skRest) {
+        return;
+      }
+      var allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp("(".concat(inputMaskedKeys.join('|'), ")+"), 'g')) || [], function (fullKey) {
+        return fullKey[0];
+      });
+      var chunkFormat = skRest[0] || '';
+      var chunkStartIndex = skRest.index || 0;
+      var chunkEndIndex = chunkStartIndex + chunkFormat.length;
+      var currKeyIndex = allMaskedKeys.indexOf(selectKey);
+      // 全选 | 如果无效字符
+      var isAllSelected = !selectionStart && selectionEnd === inpValue.length;
+      var isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+      if (isAllSelected || isNotMasked) {
+        inpValue = dateMaskedFormat;
+      }
+      var chunkValue = isDeleleKey ? '' : inpValue.slice(chunkStartIndex, chunkEndIndex);
+      var chunkNums = chunkValue.match(/\d/g) || [];
+      var chunkNumList = isTriggerMasked && !isBackspaceKey ? [] : chunkNums.slice(0);
+      if (isNumKey) {
+        chunkNumList.push(numKey);
+      } else if (isBackspaceKey) {
+        chunkNumList.pop();
+      }
+      chunkValue = chunkNumList.join('').padEnd(chunkFormat.length, maskChar);
+      var restValue = inpValue.slice(0, chunkStartIndex) + chunkValue + inpValue.slice(chunkEndIndex);
+      restValue = restValue.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+      targetElem.value = restValue;
+      $xeDatePicker.handleInputLabel(restValue, false);
+      // 如果是全选/删除
+      if (isAllSelected) {
+        if (isBackspaceKey || isDeleleKey) {
+          var firstMaskedKeys = allMaskedKeys[0];
+          var firstSkRest = dateMaskedFormat.match(new RegExp("".concat(firstMaskedKeys, "+")));
+          if (firstSkRest) {
+            var firstChunkFormat = firstSkRest[0];
+            targetElem.setSelectionRange(0, firstChunkFormat.length);
+            internalData.isTriggerMasked = true;
+            return;
+          }
+        }
+      } else {
+        if (isBackspaceKey && !chunkNums.length) {
+          // 回退到上一个数字块
+          for (var i = currKeyIndex - 1; i >= 0; i--) {
+            var prveChunkKey = allMaskedKeys[i];
+            var prveSkRest = dateMaskedFormat.match(new RegExp("".concat(prveChunkKey, "+")));
+            if (prveSkRest) {
+              var prveChunkFormat = prveSkRest[0];
+              var prveChunkStartIndex = prveSkRest.index || 0;
+              var prveChunkEndIndex = prveChunkStartIndex + prveChunkFormat.length;
+              var prveChunkValue = restValue.slice(prveChunkStartIndex, prveChunkEndIndex);
+              var prveChunkNums = prveChunkValue.match(/\d/g) || [];
+              if (prveChunkNums.length) {
+                prveChunkNums.pop();
+                prveChunkValue = prveChunkNums.join('').padEnd(prveChunkFormat.length, maskChar);
+                restValue = restValue.slice(0, prveChunkStartIndex) + prveChunkValue + restValue.slice(prveChunkEndIndex);
+                targetElem.value = restValue;
+                $xeDatePicker.handleInputLabel(restValue, false);
+                targetElem.setSelectionRange(prveChunkStartIndex, prveChunkEndIndex);
+                return;
+              }
+            }
+          }
+          var _firstMaskedKeys = allMaskedKeys[0];
+          var _firstSkRest = dateMaskedFormat.match(new RegExp("".concat(_firstMaskedKeys, "+")));
+          if (_firstSkRest) {
+            var _firstChunkFormat = _firstSkRest[0];
+            restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+            targetElem.value = restValue;
+            $xeDatePicker.handleInputLabel(restValue, false);
+            targetElem.setSelectionRange(0, _firstChunkFormat.length);
+            internalData.isTriggerMasked = true;
+            return;
+          }
+          return;
+        }
+      }
+      var maskStartIndex = skRest.index || 0;
+      var maskEndIndex = maskStartIndex + skRest[0].length;
+      // 如果输入完成，跳转下一个
+      if (chunkNumList.length >= chunkValue.length) {
+        var nextKeys = allMaskedKeys.slice(currKeyIndex + 1);
+        if (currKeyIndex > -1) {
+          var nextRest = nextKeys.length ? dateMaskedFormat.match(new RegExp("(".concat(nextKeys.join('|'), ")+"))) : null;
+          // 如果当前数字块已输入，则跳转下一个数字块
+          if (nextRest) {
+            maskStartIndex = nextRest.index || 0;
+            maskEndIndex = maskStartIndex + nextRest[0].length;
+            targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+          } else {
+            targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+          }
+        }
+        internalData.isTriggerMasked = true;
+        return;
+      }
+      targetElem.setSelectionRange(maskStartIndex, maskEndIndex);
+      internalData.isTriggerMasked = false;
+    },
+    handleMaskedSelectedDate: function handleMaskedSelectedDate(evnt, isFocus) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type,
+        multiple = props.multiple,
+        modelValue = props.value;
+      if (multiple) {
+        return;
+      }
+      if (!maskedTypes.includes(type)) {
         return;
       }
       var targetElem = $xeDatePicker.$refs.refInputTarget;
       if (!targetElem) {
         return;
       }
-      var parseInputKayMaps = internalData.parseInputKayMaps;
-      var inputFormat = $xeDatePicker.computeDateInputFormat;
+      var laseFocusMasked = internalData.laseFocusMasked;
+      if (laseFocusMasked && Date.now() - laseFocusMasked < 100) {
+        return;
+      }
+      var dateMaskedFormat = $xeDatePicker.computeDateMaskedFormat;
+      var maskChar = $xeDatePicker.computeMaskChar;
       var selectionStart = targetElem.selectionStart || 0;
-      var selectKey = inputFormat[selectionStart];
+      var selectionEnd = targetElem.selectionEnd || 0;
+      var inpValue = targetElem.value;
+      var allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp("(".concat(inputMaskedKeys.join('|'), ")+"), 'g')) || [], function (fullKey) {
+        return fullKey[0];
+      });
+      // 如果为空
+      if (!inpValue) {
+        var restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+        // 还原值
+        if (isFocus && modelValue) {
+          var chunkNums = ('' + _xeUtils.default.toNumber(modelValue)).match(/\d/g) || [];
+          var useNumIndex = 0;
+          restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), function (txt) {
+            return chunkNums[useNumIndex++] || txt;
+          });
+        }
+        var firstMaskedKeys = allMaskedKeys[0];
+        var firstSkRest = dateMaskedFormat.match(new RegExp("".concat(firstMaskedKeys, "+")));
+        if (firstSkRest) {
+          evnt.preventDefault();
+          var firstChunkFormat = firstSkRest[0];
+          targetElem.value = restValue;
+          $xeDatePicker.handleInputLabel(restValue, false);
+          targetElem.setSelectionRange(0, firstChunkFormat.length);
+          internalData.laseFocusMasked = Date.now();
+          return;
+        }
+      }
+      // 全选 | 如果无效字符
+      var isAllSelected = !selectionStart && selectionEnd === inpValue.length;
+      var isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+      if (isAllSelected || isNotMasked) {
+        var _restValue = '';
+        // 还原值
+        if (isNotMasked && inpValue) {
+          var _chunkNums = inpValue.match(/\d/g) || [];
+          var _useNumIndex = 0;
+          _restValue = dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), function () {
+            return _chunkNums[_useNumIndex++] || maskChar;
+          });
+        } else {
+          dateMaskedFormat.replace(new RegExp("(".concat(inputMaskedKeys.join('|'), ")"), 'g'), maskChar);
+        }
+        var _firstMaskedKeys2 = allMaskedKeys[0];
+        var _firstSkRest2 = dateMaskedFormat.match(new RegExp("".concat(_firstMaskedKeys2, "+")));
+        if (_firstSkRest2) {
+          evnt.preventDefault();
+          var _firstChunkFormat2 = _firstSkRest2[0];
+          targetElem.value = _restValue;
+          $xeDatePicker.handleInputLabel(_restValue, false);
+          targetElem.setSelectionRange(0, _firstChunkFormat2.length);
+          internalData.laseFocusMasked = Date.now();
+          return;
+        }
+      }
+      // 是否选择数字块
+      var selectKey = dateMaskedFormat[selectionStart];
       if (!parseInputKayMaps[selectKey]) {
-        selectKey = inputFormat[selectionStart - 1];
+        selectKey = dateMaskedFormat[selectionStart - 1];
       }
-      var inputPaesrFn = parseInputKayMaps[selectKey];
-      if (inputPaesrFn) {
-        inputPaesrFn(evnt, targetElem, isUpArrow);
+      if (selectKey) {
+        evnt.preventDefault();
+        var skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+        if (skRest) {
+          var chunkFormat = skRest[0] || '';
+          var chunkStartIndex = skRest.index || 0;
+          var chunkEndIndex = chunkStartIndex + chunkFormat.length;
+          targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+          internalData.isTriggerMasked = true;
+          internalData.laseFocusMasked = Date.now();
+        }
       }
     },
     blurEvent: function blurEvent(evnt) {
       var $xeDatePicker = this;
       var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
       var $xeForm = $xeDatePicker.$xeForm;
       var formItemInfo = $xeDatePicker.formItemInfo;
       var $datePanel = $xeDatePicker.$refs.refDatePanel;
@@ -589,10 +1070,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $xeDatePicker.handleChange(value, evnt);
       }
       if (!reactData.visiblePanel) {
+        var inputLabel = internalData.inputLabel;
         reactData.isActivated = false;
         // 未打开面板时才校验
         if ($datePanel) {
-          $datePanel.checkValue(reactData.inputLabel);
+          $datePanel.checkValue(inputLabel);
+        } else {
+          $xeDatePicker.afterCheckValue(inputLabel);
         }
       }
       $xeDatePicker.dispatchEvent('blur', {
@@ -603,15 +1087,89 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
       }
     },
+    focusEvent: function focusEvent(evnt) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var reactData = $xeDatePicker.reactData;
+      var multiple = props.multiple,
+        editable = props.editable,
+        maskedConfig = props.maskedConfig;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      var popupOpts = $xeDatePicker.computePopupOpts;
+      var trigger = popupOpts.trigger;
+      reactData.isActivated = true;
+      if (!trigger || trigger === 'default') {
+        $xeDatePicker.datePickerOpenEvent(evnt);
+        setTimeout(function () {
+          if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+            $xeDatePicker.handleMaskedSelectedDate(evnt, true);
+          }
+        }, 15);
+      } else if (trigger === 'icon') {
+        $xeDatePicker.hidePanel();
+        setTimeout(function () {
+          if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+            $xeDatePicker.handleMaskedSelectedDate(evnt, true);
+          }
+        }, 15);
+      } else {
+        if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+          $xeDatePicker.handleMaskedSelectedDate(evnt, true);
+        }
+      }
+      $xeDatePicker.triggerEvent(evnt);
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeDatePicker = this;
+      var props = $xeDatePicker;
+      var editable = props.editable,
+        maskedConfig = props.maskedConfig;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
+      if (editable && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+        $xeDatePicker.handleMaskedSelectedDate(evnt);
+      }
+      $xeDatePicker.triggerEvent(evnt);
+    },
     keydownEvent: function keydownEvent(evnt) {
       var $xeDatePicker = this;
       var props = $xeDatePicker;
-      var controlConfig = props.controlConfig;
-      var controlOpts = $xeDatePicker.computeControlOpts;
+      var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
+      var type = props.type,
+        editable = props.editable,
+        maskedConfig = props.maskedConfig;
+      var visiblePanel = reactData.visiblePanel;
+      var maskedOpts = $xeDatePicker.computeMaskedOpts;
       var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
       var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
-      if ((isUpArrow || isDwArrow) && controlOpts.isArrow && (controlConfig || controlOpts.enabled)) {
-        $xeDatePicker.handleArrowInputDate(evnt, isUpArrow);
+      var isLtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+      var isRtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+      var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+      if (editable) {
+        if (isEnter) {
+          var $datePanel = $xeDatePicker.$refs.refDatePanel;
+          var inputLabel = internalData.inputLabel;
+          var targetElem = $xeDatePicker.$refs.refInputTarget;
+          if (visiblePanel) {
+            $xeDatePicker.hidePanel();
+          }
+          if ($datePanel) {
+            $datePanel.checkValue(inputLabel);
+          } else {
+            $xeDatePicker.afterCheckValue(inputLabel);
+          }
+          if (targetElem) {
+            targetElem.blur();
+          }
+        } else if (maskedTypes.includes(type)) {
+          if ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled) {
+            if (maskedOpts.isArrow && (isUpArrow || isDwArrow || isLtArrow || isRtArrow)) {
+              $xeDatePicker.handleArrowInputDate(evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow);
+            } else if (maskedOpts.isMasked) {
+              $xeDatePicker.handleMaskedInputDate(evnt);
+            }
+          }
+        }
       }
       $xeDatePicker.triggerEvent(evnt);
     },
@@ -648,13 +1206,13 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     panelRevertEvent: function panelRevertEvent(params) {
       var $xeDatePicker = this;
-      var reactData = $xeDatePicker.reactData;
-      reactData.inputLabel = params.label;
+      $xeDatePicker.handleInputLabel(params.label, true);
     },
     // 全局事件
     handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
       var $xeDatePicker = this;
       var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
       var $datePanel = $xeDatePicker.$refs.refDatePanel;
       var visiblePanel = reactData.visiblePanel,
         isActivated = reactData.isActivated;
@@ -662,12 +1220,18 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var panelWrapperElem = $xeDatePicker.$refs.refPanelWrapper;
       var isDisabled = $xeDatePicker.computeIsDisabled;
       if (!isDisabled && isActivated) {
-        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
-        if (!reactData.isActivated) {
+        var currActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
+        if (currActivated !== isActivated) {
+          reactData.isActivated = currActivated;
+        }
+        if (!currActivated) {
           if (visiblePanel) {
             $xeDatePicker.hidePanel();
+            var inputLabel = internalData.inputLabel;
             if ($datePanel) {
-              $datePanel.checkValue(reactData.inputLabel);
+              $datePanel.checkValue(inputLabel);
+            } else {
+              $xeDatePicker.afterCheckValue(inputLabel);
             }
           }
         }
@@ -710,6 +1274,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     handleGlobalBlurEvent: function handleGlobalBlurEvent() {
       var $xeDatePicker = this;
       var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
       var $datePanel = $xeDatePicker.$refs.refDatePanel;
       var isActivated = reactData.isActivated,
         visiblePanel = reactData.visiblePanel;
@@ -721,7 +1286,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       if (visiblePanel || isActivated) {
         if ($datePanel) {
-          $datePanel.checkValue(reactData.inputLabel);
+          $datePanel.checkValue(internalData.inputLabel);
         }
         var targetElem = $xeDatePicker.$refs.refInputTarget;
         if (targetElem) {
@@ -787,9 +1352,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var btnTransfer = $xeDatePicker.computeBtnTransfer;
       var panelElem = $xeDatePicker.$refs.refInputPanel;
       if (!isDisabled && !visiblePanel) {
-        if (!reactData.initialized && btnTransfer && panelElem) {
+        if (!reactData.initialized) {
           reactData.initialized = true;
-          document.body.appendChild(panelElem);
+          if (btnTransfer && panelElem) {
+            document.body.appendChild(panelElem);
+          }
         }
         if (internalData.hpTimeout) {
           clearTimeout(internalData.hpTimeout);
@@ -828,10 +1395,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }
       }
     },
-    clickEvent: function clickEvent(evnt) {
-      var $xeDatePicker = this;
-      $xeDatePicker.triggerEvent(evnt);
-    },
     handleShortcutEvent: function handleShortcutEvent(_ref) {
       var option = _ref.option,
         $event = _ref.$event;
@@ -876,7 +1439,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
                 break;
               }
             default:
-              (0, _log.errLog)('vxe.error.notCommands', ["[date-picker] ".concat(code)]);
+              errLog('vxe.error.notCommands', [code]);
               break;
           }
         }
@@ -1133,14 +1696,16 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeDatePicker = this;
       var props = $xeDatePicker;
       var reactData = $xeDatePicker.reactData;
+      var internalData = $xeDatePicker.internalData;
       var className = props.className,
         type = props.type,
         name = props.name,
         autoComplete = props.autoComplete;
       var inputValue = reactData.inputValue,
-        inputLabel = reactData.inputLabel,
         visiblePanel = reactData.visiblePanel,
-        isActivated = reactData.isActivated;
+        isActivated = reactData.isActivated,
+        labelFlag = reactData.labelFlag;
+      var inputLabel = internalData.inputLabel;
       var vSize = $xeDatePicker.computeSize;
       var isDisabled = $xeDatePicker.computeIsDisabled;
       var formReadonly = $xeDatePicker.computeFormReadonly;
@@ -1168,7 +1733,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         ref: 'refInputTarget',
         class: 'vxe-date-picker--inner',
         domProps: {
-          value: inputLabel
+          value: labelFlag ? inputLabel : ''
         },
         attrs: {
           name: name,
@@ -1195,8 +1760,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   watch: {
     computePanelLabel: function computePanelLabel(val) {
       var $xeDatePicker = this;
-      var reactData = $xeDatePicker.reactData;
-      reactData.inputLabel = val;
+      $xeDatePicker.handleInputLabel(val, true);
     },
     value: function value() {
       var $xeDatePicker = this;
@@ -1205,14 +1769,19 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   created: function created() {
     var $xeDatePicker = this;
-    var internalData = $xeDatePicker.internalData;
-    var parseInputKayMaps = internalData.parseInputKayMaps;
-    var inputKeys = ['y', 'M', 'd', 'H', 'm', 'n'];
-    inputKeys.forEach(function (key) {
-      parseInputKayMaps[key] = function (evnt) {
-        evnt.preventDefault();
-      };
-    });
+    var props = $xeDatePicker;
+    $xeDatePicker.internalData = createInternalData();
+    var type = props.type,
+      multiple = props.multiple,
+      maskedConfig = props.maskedConfig;
+    if ((0, _utils.isEnableConf)(maskedConfig)) {
+      if (multiple) {
+        errLog('vxe.error.notSupportProp', ['multiple', 'control-config.enabled=true', 'control-config.enabled=false']);
+      }
+      if (!maskedTypes.includes(type)) {
+        warnLog('vxe.error.notSupportProp', ['control-config.enabled=true', "type=".concat(type), "type=".concat(maskedTypes.join('|'))]);
+      }
+    }
     $xeDatePicker.updateModelValue();
     _ui.globalEvents.on($xeDatePicker, 'mousewheel', $xeDatePicker.handleGlobalMousewheelEvent);
     _ui.globalEvents.on($xeDatePicker, 'mousedown', $xeDatePicker.handleGlobalMousedownEvent);
@@ -1222,6 +1791,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   beforeDestroy: function beforeDestroy() {
     var $xeDatePicker = this;
+    var reactData = $xeDatePicker.reactData;
+    var internalData = $xeDatePicker.internalData;
     var panelElem = $xeDatePicker.$refs.refInputPanel;
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem);
@@ -1230,6 +1801,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     _ui.globalEvents.off($xeDatePicker, 'mousedown');
     _ui.globalEvents.off($xeDatePicker, 'blur');
     _ui.globalEvents.off($xeDatePicker, 'resize');
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
   },
   render: function render(h) {
     return this.renderVN(h);