vxe-pc-ui 4.15.1 → 4.15.3

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

@@ -17,6 +17,36 @@ 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 }; }
+const {
+  warnLog,
+  errLog
+} = (0, _log.createComponentLog)('date-picker');
+const maskedTypes = ['year', 'month', 'date', 'datetime', 'time'];
+const inputMaskedKeys = ['y', 'M', 'd', 'H', 'm', 'n', 's'];
+const parseInputKayMaps = {};
+inputMaskedKeys.forEach(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 _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeDatePicker',
   props: {
@@ -108,6 +138,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: Boolean,
       default: () => (0, _ui.getConfig)().datePicker.autoClose
     },
+    maskedConfig: Object,
     prefixIcon: String,
     suffixIcon: String,
     placement: String,
@@ -136,20 +167,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const {
       computeSize
     } = (0, _ui.useSize)(props);
-    const reactData = (0, _vue.reactive)({
-      initialized: false,
-      panelIndex: 0,
-      visiblePanel: false,
-      isAniVisible: false,
-      panelStyle: {},
-      panelPlacement: '',
-      isActivated: false,
-      inputValue: '',
-      inputLabel: ''
-    });
-    const internalData = {
-      hpTimeout: undefined
-    };
+    const reactData = (0, _vue.reactive)(createReactData());
+    const internalData = createInternalData();
     const refElem = (0, _vue.ref)();
     const refInputTarget = (0, _vue.ref)();
     const refInputPanel = (0, _vue.ref)();
@@ -223,6 +242,50 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeIsClearable = (0, _vue.computed)(() => {
       return props.clearable;
     });
+    const computeIsDatePanelType = (0, _vue.computed)(() => {
+      const isDateTimeType = computeIsDateTimeType.value;
+      return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    });
+    const computeDateListValue = (0, _vue.computed)(() => {
+      const {
+        modelValue,
+        type,
+        multiple
+      } = props;
+      const isDatePanelType = computeIsDatePanelType.value;
+      const dateValueFormat = computeDateValueFormat.value;
+      if (multiple && modelValue && isDatePanelType) {
+        return _xeUtils.default.toValueString(modelValue).split(',').map(item => {
+          const date = (0, _util.parseDateValue)(item, type, {
+            valueFormat: dateValueFormat
+          });
+          if (_xeUtils.default.isValidDate(date)) {
+            return date;
+          }
+          return date;
+        });
+      }
+      return [];
+    });
+    const computeLimitMaxCount = (0, _vue.computed)(() => {
+      return props.multiple ? _xeUtils.default.toNumber(props.limitCount) : 0;
+    });
+    const computeDateMultipleValue = (0, _vue.computed)(() => {
+      const dateListValue = computeDateListValue.value;
+      const dateValueFormat = computeDateValueFormat.value;
+      return dateListValue.map(date => _xeUtils.default.toDateString(date, dateValueFormat));
+    });
+    const computeOverCount = (0, _vue.computed)(() => {
+      const {
+        multiple
+      } = props;
+      const limitMaxCount = computeLimitMaxCount.value;
+      const dateMultipleValue = computeDateMultipleValue.value;
+      if (multiple && limitMaxCount) {
+        return dateMultipleValue.length >= limitMaxCount;
+      }
+      return false;
+    });
     const computeInputReadonly = (0, _vue.computed)(() => {
       const {
         type,
@@ -287,6 +350,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       return (0, _util.handleValueFormat)(type, valueFormat);
     });
+    const computeDateMaskedFormat = (0, _vue.computed)(() => {
+      const dateLabelFormat = computeDateLabelFormat.value;
+      return dateLabelFormat;
+    });
     const computeFirstDayOfWeek = (0, _vue.computed)(() => {
       const {
         startDay
@@ -314,6 +381,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return dateObj.label;
       }).join(', ');
     });
+    const computeMaskedOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().datePicker.maskedConfig, props.maskedConfig);
+    });
+    const computeMaskChar = (0, _vue.computed)(() => {
+      const maskedOpts = computeMaskedOpts.value;
+      const {
+        maskPlaceholder
+      } = maskedOpts;
+      return (maskPlaceholder ? ('' + maskPlaceholder)[0] : '') || '*';
+    });
     const updateModelValue = () => {
       const {
         modelValue
@@ -328,6 +405,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       reactData.inputValue = val;
     };
+    const handleInputLabel = (text, isUpdate) => {
+      internalData.inputLabel = text;
+      if (isUpdate) {
+        reactData.labelFlag++;
+      }
+    };
     const triggerEvent = evnt => {
       const {
         inputValue
@@ -389,7 +472,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const inputEvent = evnt => {
       const inputElem = evnt.target;
       const value = inputElem.value;
-      reactData.inputLabel = value;
+      handleInputLabel(value, true);
       dispatchEvent('input', {
         value
       }, evnt);
@@ -400,17 +483,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         triggerEvent(evnt);
       }
     };
-    const focusEvent = evnt => {
-      const popupOpts = computePopupOpts.value;
-      const {
-        trigger
-      } = popupOpts;
-      reactData.isActivated = true;
-      if (!trigger || trigger === 'default') {
-        datePickerOpenEvent(evnt);
-      }
-      triggerEvent(evnt);
-    };
     const clickPrefixEvent = evnt => {
       const isDisabled = computeIsDisabled.value;
       if (!isDisabled) {
@@ -431,6 +503,125 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, 350);
       });
     };
+    const dateChange = (date, isReload) => {
+      const {
+        modelValue,
+        multiple
+      } = props;
+      const isDateTimeType = computeIsDateTimeType.value;
+      const dateValueFormat = computeDateValueFormat.value;
+      const firstDayOfWeek = computeFirstDayOfWeek.value;
+      if (props.type === 'week') {
+        const sWeek = _xeUtils.default.toNumber(props.selectDay);
+        date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+      }
+      const inpVal = _xeUtils.default.toDateString(date, dateValueFormat, {
+        firstDay: firstDayOfWeek
+      });
+      if (multiple) {
+        const overCount = computeOverCount.value;
+        // 如果为多选
+        if (isDateTimeType) {
+          // 如果是datetime特殊类型
+          const dateListValue = isReload ? [] : [...computeDateListValue.value];
+          const datetimeRest = [];
+          const eqIndex = _xeUtils.default.findIndexOf(dateListValue, val => _xeUtils.default.isDateSame(date, val, 'yyyyMMdd'));
+          if (eqIndex === -1) {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            dateListValue.push(date);
+          } else {
+            dateListValue.splice(eqIndex, 1);
+          }
+          dateListValue.forEach(item => {
+            if (item) {
+              datetimeRest.push(item);
+            }
+          });
+          handleChange(datetimeRest.map(date => _xeUtils.default.toDateString(date, dateValueFormat)).join(','), {
+            type: 'update'
+          });
+        } else {
+          const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value;
+          // 如果是日期类型
+          if (dateMultipleValue.some(val => _xeUtils.default.isEqual(val, inpVal))) {
+            handleChange(dateMultipleValue.filter(val => !_xeUtils.default.isEqual(val, inpVal)).join(','), {
+              type: 'update'
+            });
+          } else {
+            if (overCount) {
+              // 如果超出最大多选数量
+              return;
+            }
+            handleChange(dateMultipleValue.concat([inpVal]).join(','), {
+              type: 'update'
+            });
+          }
+        }
+      } else {
+        // 如果为单选
+        if (!_xeUtils.default.isEqual(modelValue, inpVal)) {
+          handleChange(inpVal, {
+            type: 'update'
+          });
+        }
+      }
+    };
+    const dateRevert = () => {
+      const panelLabel = computePanelLabel.value;
+      handleInputLabel(panelLabel, true);
+    };
+    const afterCheckValue = inpVal => {
+      const {
+        type
+      } = props;
+      const {
+        inputLabel
+      } = internalData;
+      const dateLabelFormat = computeDateLabelFormat.value;
+      if (!inpVal) {
+        handleChange('', {
+          type: 'check'
+        });
+        return;
+      }
+      let inpDateVal = (0, _util.parseDateValue)(inpVal, type, {
+        valueFormat: dateLabelFormat
+      });
+      if (!_xeUtils.default.isValidDate(inpDateVal)) {
+        dateRevert();
+        return;
+      }
+      if (type === 'time') {
+        inpDateVal = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat);
+        if (inputLabel !== inpDateVal) {
+          handleChange(inpDateVal, {
+            type: 'check'
+          });
+        }
+        handleInputLabel(inpDateVal, true);
+        return;
+      }
+      let isChange = false;
+      const firstDayOfWeek = computeFirstDayOfWeek.value;
+      if (type === 'datetime') {
+        const dateValue = reactData.inputValue;
+        if (inpVal !== _xeUtils.default.toDateString(dateValue, dateLabelFormat) || inpVal !== _xeUtils.default.toDateString(inpDateVal, dateLabelFormat)) {
+          isChange = true;
+        }
+      } else {
+        isChange = true;
+      }
+      const label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+        firstDay: firstDayOfWeek
+      });
+      handleInputLabel(label, true);
+      if (isChange) {
+        dateChange(inpDateVal);
+      }
+    };
     const clearValueEvent = (evnt, value) => {
       const isDatePickerType = computeIsDatePickerType.value;
       if (isDatePickerType) {
@@ -452,6 +643,307 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }, evnt);
       }
     };
+    const handleArrowInputDate = (evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow) => {
+      const {
+        type,
+        multiple
+      } = props;
+      if (multiple) {
+        return;
+      }
+      const targetElem = refInputTarget.value;
+      if (!targetElem) {
+        return;
+      }
+      const inpValue = targetElem.value;
+      if (!inpValue) {
+        return;
+      }
+      const dateMaskedFormat = computeDateMaskedFormat.value;
+      const dateLabelFormat = computeDateLabelFormat.value;
+      const firstDayOfWeek = computeFirstDayOfWeek.value;
+      const maskChar = computeMaskChar.value;
+      const selectionStart = targetElem.selectionStart || 0;
+      let selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+      if (!skRest) {
+        return;
+      }
+      if (isUpArrow || isDwArrow) {
+        const chunkFormat = skRest[0] || '';
+        const chunkStartIndex = skRest.index || 0;
+        const chunkEndIndex = chunkStartIndex + chunkFormat.length;
+        const chunkValue = inpValue.slice(chunkStartIndex, chunkEndIndex);
+        if (parseInputKayMaps[selectKey]) {
+          const chunkNum = ((0, _util.isAllSameChar)(chunkValue, maskChar) ? (0, _util.getChunkDefaultNum)(selectKey) : _xeUtils.default.toNumber(chunkValue)) + (isUpArrow ? 1 : -1);
+          const restValue = inpValue.slice(0, chunkStartIndex) + _xeUtils.default.padStart(chunkNum, chunkFormat.length, '0') + inpValue.slice(chunkEndIndex);
+          evnt.preventDefault();
+          if (restValue.indexOf(maskChar) === -1) {
+            // 解析日期
+            const inpDateVal = (0, _util.parseDateValue)(restValue, type, {
+              valueFormat: dateLabelFormat
+            });
+            if (_xeUtils.default.isValidDate(inpDateVal)) {
+              const label = _xeUtils.default.toDateString(inpDateVal, dateLabelFormat, {
+                firstDay: firstDayOfWeek
+              });
+              targetElem.value = label;
+              handleInputLabel(label, false);
+            }
+          } else {
+            targetElem.value = restValue;
+            handleInputLabel(restValue, false);
+          }
+        }
+        targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+      } else if (isLtArrow || isRtArrow) {
+        const currKeyIndex = inputMaskedKeys.indexOf(selectKey);
+        if (currKeyIndex > -1) {
+          const allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
+          const currIndex = _xeUtils.default.findIndexOf(allMaskedKeys, key => selectKey === key[0]);
+          const targetFormatKey = isLtArrow ? allMaskedKeys[currIndex - 1] || allMaskedKeys[0] : allMaskedKeys[currIndex + 1] || allMaskedKeys[allMaskedKeys.length - 1];
+          const targetKey = targetFormatKey ? targetFormatKey[0] : '';
+          const sktRest = dateMaskedFormat.match(new RegExp(targetKey + '+'));
+          if (sktRest) {
+            evnt.preventDefault();
+            const mtStartIndex = sktRest.index || 0;
+            const mtEndIndex = mtStartIndex + sktRest[0].length;
+            targetElem.setSelectionRange(mtStartIndex, mtEndIndex);
+          }
+        }
+      }
+      internalData.isTriggerMasked = true;
+    };
+    const handleMaskedInputDate = evnt => {
+      const {
+        multiple
+      } = props;
+      if (multiple) {
+        return;
+      }
+      const targetElem = refInputTarget.value;
+      if (!targetElem) {
+        return;
+      }
+      const isControlKey = (0, _dom.hasControlKey)(evnt);
+      if (isControlKey) {
+        return;
+      }
+      evnt.preventDefault();
+      const eKey = evnt.key;
+      const isDeleleKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.DELETE);
+      const isBackspaceKey = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.BACKSPACE);
+      const isNumKey = eKey >= '0' && eKey <= '9';
+      const numKey = isNumKey ? evnt.key : '';
+      if (!(isDeleleKey || isBackspaceKey || isNumKey)) {
+        return;
+      }
+      const {
+        isTriggerMasked
+      } = internalData;
+      const dateMaskedFormat = computeDateMaskedFormat.value;
+      const maskChar = computeMaskChar.value;
+      let inpValue = targetElem.value || dateMaskedFormat;
+      const selectionStart = targetElem.selectionStart || 0;
+      const selectionEnd = targetElem.selectionEnd || 0;
+      let selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+      if (!skRest) {
+        return;
+      }
+      const allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
+      const chunkFormat = skRest[0] || '';
+      const chunkStartIndex = skRest.index || 0;
+      const chunkEndIndex = chunkStartIndex + chunkFormat.length;
+      const currKeyIndex = allMaskedKeys.indexOf(selectKey);
+      // 全选 | 如果无效字符
+      const isAllSelected = !selectionStart && selectionEnd === inpValue.length;
+      const isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+      if (isAllSelected || isNotMasked) {
+        inpValue = dateMaskedFormat;
+      }
+      let chunkValue = isDeleleKey ? '' : inpValue.slice(chunkStartIndex, chunkEndIndex);
+      const chunkNums = chunkValue.match(/\d/g) || [];
+      const chunkNumList = isTriggerMasked && !isBackspaceKey ? [] : chunkNums.slice(0);
+      if (isNumKey) {
+        chunkNumList.push(numKey);
+      } else if (isBackspaceKey) {
+        chunkNumList.pop();
+      }
+      chunkValue = chunkNumList.join('').padEnd(chunkFormat.length, maskChar);
+      let restValue = inpValue.slice(0, chunkStartIndex) + chunkValue + inpValue.slice(chunkEndIndex);
+      restValue = restValue.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+      targetElem.value = restValue;
+      handleInputLabel(restValue, false);
+      // 如果是全选/删除
+      if (isAllSelected) {
+        if (isBackspaceKey || isDeleleKey) {
+          const firstMaskedKeys = allMaskedKeys[0];
+          const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+          if (firstSkRest) {
+            const firstChunkFormat = firstSkRest[0];
+            targetElem.setSelectionRange(0, firstChunkFormat.length);
+            internalData.isTriggerMasked = true;
+            return;
+          }
+        }
+      } else {
+        if (isBackspaceKey && !chunkNums.length) {
+          // 回退到上一个数字块
+          for (let i = currKeyIndex - 1; i >= 0; i--) {
+            const prveChunkKey = allMaskedKeys[i];
+            const prveSkRest = dateMaskedFormat.match(new RegExp(`${prveChunkKey}+`));
+            if (prveSkRest) {
+              const prveChunkFormat = prveSkRest[0];
+              const prveChunkStartIndex = prveSkRest.index || 0;
+              const prveChunkEndIndex = prveChunkStartIndex + prveChunkFormat.length;
+              let prveChunkValue = restValue.slice(prveChunkStartIndex, prveChunkEndIndex);
+              const 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;
+                handleInputLabel(restValue, false);
+                targetElem.setSelectionRange(prveChunkStartIndex, prveChunkEndIndex);
+                return;
+              }
+            }
+          }
+          const firstMaskedKeys = allMaskedKeys[0];
+          const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+          if (firstSkRest) {
+            const firstChunkFormat = firstSkRest[0];
+            restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+            targetElem.value = restValue;
+            handleInputLabel(restValue, false);
+            targetElem.setSelectionRange(0, firstChunkFormat.length);
+            internalData.isTriggerMasked = true;
+            return;
+          }
+          return;
+        }
+      }
+      let maskStartIndex = skRest.index || 0;
+      let maskEndIndex = maskStartIndex + skRest[0].length;
+      // 如果输入完成，跳转下一个
+      if (chunkNumList.length >= chunkValue.length) {
+        const nextKeys = allMaskedKeys.slice(currKeyIndex + 1);
+        if (currKeyIndex > -1) {
+          const nextRest = nextKeys.length ? dateMaskedFormat.match(new RegExp(`(${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;
+    };
+    const handleMaskedSelectedDate = (evnt, isFocus) => {
+      const {
+        type,
+        multiple,
+        modelValue
+      } = props;
+      if (multiple) {
+        return;
+      }
+      if (!maskedTypes.includes(type)) {
+        return;
+      }
+      const targetElem = refInputTarget.value;
+      if (!targetElem) {
+        return;
+      }
+      const {
+        laseFocusMasked
+      } = internalData;
+      if (laseFocusMasked && Date.now() - laseFocusMasked < 100) {
+        return;
+      }
+      const dateMaskedFormat = computeDateMaskedFormat.value;
+      const maskChar = computeMaskChar.value;
+      const selectionStart = targetElem.selectionStart || 0;
+      const selectionEnd = targetElem.selectionEnd || 0;
+      const inpValue = targetElem.value;
+      const allMaskedKeys = _xeUtils.default.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
+      // 如果为空
+      if (!inpValue) {
+        let restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+        // 还原值
+        if (isFocus && modelValue) {
+          const chunkNums = ('' + _xeUtils.default.toNumber(modelValue)).match(/\d/g) || [];
+          let useNumIndex = 0;
+          restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), txt => chunkNums[useNumIndex++] || txt);
+        }
+        const firstMaskedKeys = allMaskedKeys[0];
+        const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+        if (firstSkRest) {
+          evnt.preventDefault();
+          const firstChunkFormat = firstSkRest[0];
+          targetElem.value = restValue;
+          handleInputLabel(restValue, false);
+          targetElem.setSelectionRange(0, firstChunkFormat.length);
+          internalData.laseFocusMasked = Date.now();
+          return;
+        }
+      }
+      // 全选 | 如果无效字符
+      const isAllSelected = !selectionStart && selectionEnd === inpValue.length;
+      const isNotMasked = inpValue && inpValue.length !== dateMaskedFormat.length;
+      if (isAllSelected || isNotMasked) {
+        let restValue = '';
+        // 还原值
+        if (isNotMasked && inpValue) {
+          const chunkNums = inpValue.match(/\d/g) || [];
+          let useNumIndex = 0;
+          restValue = dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), () => chunkNums[useNumIndex++] || maskChar);
+        } else {
+          dateMaskedFormat.replace(new RegExp(`(${inputMaskedKeys.join('|')})`, 'g'), maskChar);
+        }
+        const firstMaskedKeys = allMaskedKeys[0];
+        const firstSkRest = dateMaskedFormat.match(new RegExp(`${firstMaskedKeys}+`));
+        if (firstSkRest) {
+          evnt.preventDefault();
+          const firstChunkFormat = firstSkRest[0];
+          targetElem.value = restValue;
+          handleInputLabel(restValue, false);
+          targetElem.setSelectionRange(0, firstChunkFormat.length);
+          internalData.laseFocusMasked = Date.now();
+          return;
+        }
+      }
+      // 是否选择数字块
+      let selectKey = dateMaskedFormat[selectionStart];
+      if (!parseInputKayMaps[selectKey]) {
+        selectKey = dateMaskedFormat[selectionStart - 1];
+      }
+      if (selectKey) {
+        evnt.preventDefault();
+        const skRest = dateMaskedFormat.match(new RegExp(selectKey + '+'));
+        if (skRest) {
+          const chunkFormat = skRest[0] || '';
+          const chunkStartIndex = skRest.index || 0;
+          const chunkEndIndex = chunkStartIndex + chunkFormat.length;
+          targetElem.setSelectionRange(chunkStartIndex, chunkEndIndex);
+          internalData.isTriggerMasked = true;
+          internalData.laseFocusMasked = Date.now();
+        }
+      }
+    };
     const blurEvent = evnt => {
       const $datePanel = refDatePanel.value;
       const {
@@ -463,10 +955,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         handleChange(value, evnt);
       }
       if (!reactData.visiblePanel) {
+        const {
+          inputLabel
+        } = internalData;
         reactData.isActivated = false;
         // 未打开面板时才校验
         if ($datePanel) {
-          $datePanel.checkValue(reactData.inputLabel);
+          $datePanel.checkValue(inputLabel);
+        } else {
+          afterCheckValue(inputLabel);
         }
       }
       dispatchEvent('blur', {
@@ -477,7 +974,93 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
       }
     };
+    const focusEvent = evnt => {
+      const {
+        multiple,
+        editable,
+        maskedConfig
+      } = props;
+      const maskedOpts = computeMaskedOpts.value;
+      const popupOpts = computePopupOpts.value;
+      const {
+        trigger
+      } = popupOpts;
+      reactData.isActivated = true;
+      if (!trigger || trigger === 'default') {
+        datePickerOpenEvent(evnt);
+        setTimeout(() => {
+          if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+            handleMaskedSelectedDate(evnt, true);
+          }
+        }, 15);
+      } else if (trigger === 'icon') {
+        hidePanel();
+        setTimeout(() => {
+          if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+            handleMaskedSelectedDate(evnt, true);
+          }
+        }, 15);
+      } else {
+        if (editable && !multiple && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+          handleMaskedSelectedDate(evnt, true);
+        }
+      }
+      triggerEvent(evnt);
+    };
+    const clickEvent = evnt => {
+      const {
+        editable,
+        maskedConfig
+      } = props;
+      const maskedOpts = computeMaskedOpts.value;
+      if (editable && ((0, _utils.isEnableConf)(maskedConfig) || maskedOpts.enabled)) {
+        handleMaskedSelectedDate(evnt);
+      }
+      triggerEvent(evnt);
+    };
     const keydownEvent = evnt => {
+      const {
+        type,
+        editable,
+        maskedConfig
+      } = props;
+      const {
+        visiblePanel
+      } = reactData;
+      const maskedOpts = computeMaskedOpts.value;
+      const isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+      const isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+      const isLtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+      const isRtArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+      const isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+      if (editable) {
+        if (isEnter) {
+          const $datePanel = refDatePanel.value;
+          const {
+            inputLabel
+          } = internalData;
+          const targetElem = refInputTarget.value;
+          if (visiblePanel) {
+            hidePanel();
+          }
+          if ($datePanel) {
+            $datePanel.checkValue(inputLabel);
+          } else {
+            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)) {
+              handleArrowInputDate(evnt, isUpArrow, isDwArrow, isLtArrow, isRtArrow);
+            } else if (maskedOpts.isMasked) {
+              handleMaskedInputDate(evnt);
+            }
+          }
+        }
+      }
       triggerEvent(evnt);
     };
     const keyupEvent = evnt => {
@@ -511,7 +1094,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       dispatchEvent('confirm', params, params.$event);
     };
     const panelRevertEvent = params => {
-      reactData.inputLabel = params.label;
+      handleInputLabel(params.label, true);
     };
     // 全局事件
     const handleGlobalMousedownEvent = evnt => {
@@ -524,12 +1107,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const panelWrapperElem = refPanelWrapper.value;
       const isDisabled = computeIsDisabled.value;
       if (!isDisabled && isActivated) {
-        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
-        if (!reactData.isActivated) {
+        const currActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelWrapperElem).flag;
+        if (currActivated !== isActivated) {
+          reactData.isActivated = currActivated;
+        }
+        if (!currActivated) {
           if (visiblePanel) {
             hidePanel();
+            const {
+              inputLabel
+            } = internalData;
             if ($datePanel) {
-              $datePanel.checkValue(reactData.inputLabel);
+              $datePanel.checkValue(inputLabel);
+            } else {
+              afterCheckValue(inputLabel);
             }
           }
         }
@@ -537,6 +1128,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const handleGlobalKeydownEvent = evnt => {
       const {
+        isActivated,
         visiblePanel
       } = reactData;
       const isDisabled = computeIsDisabled.value;
@@ -544,7 +1136,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         const isTab = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.TAB);
         const isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
         if (isTab) {
-          reactData.isActivated = false;
+          if (isActivated) {
+            reactData.isActivated = false;
+          }
         }
         if (visiblePanel) {
           if (isEsc || isTab) {
@@ -583,7 +1177,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       if (visiblePanel || isActivated) {
         if ($datePanel) {
-          $datePanel.checkValue(reactData.inputLabel);
+          $datePanel.checkValue(internalData.inputLabel);
         }
         const targetElem = refInputTarget.value;
         if (targetElem) {
@@ -618,6 +1212,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const targetElem = refInputTarget.value;
       const panelElem = refInputPanel.value;
+      if (!panelElem) {
+        return (0, _vue.nextTick)();
+      }
       const btnTransfer = computeBtnTransfer.value;
       const popupOpts = computePopupOpts.value;
       const handleStyle = () => {
@@ -667,17 +1264,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const clickIconEvent = evnt => {
+      const {
+        visiblePanel
+      } = reactData;
       const popupOpts = computePopupOpts.value;
       const {
         trigger
       } = popupOpts;
       if (!trigger || trigger === 'default' || trigger === 'icon') {
-        datePickerOpenEvent(evnt);
+        if (visiblePanel) {
+          hidePanel();
+        } else {
+          datePickerOpenEvent(evnt);
+        }
       }
     };
-    const clickEvent = evnt => {
-      triggerEvent(evnt);
-    };
     const handleShortcutEvent = ({
       option,
       $event
@@ -728,7 +1329,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
                 break;
               }
             default:
-              (0, _log.errLog)('vxe.error.notCommands', [`[date-picker] ${code}`]);
+              errLog('vxe.error.notCommands', [code]);
               break;
           }
         }
@@ -802,6 +1403,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return (0, _ui.renderEmptyElement)($xeDatePicker);
     };
     const renderPanel = () => {
+      const popupOpts = computePopupOpts.value;
+      if (popupOpts.enabled === false) {
+        return (0, _ui.renderEmptyElement)($xeDatePicker);
+      }
       const {
         type,
         multiple,
@@ -823,7 +1428,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const isDateTimeType = computeIsDateTimeType.value;
       const shortcutList = computeShortcutList.value;
       const timeOpts = computeTimeOpts.value;
-      const popupOpts = computePopupOpts.value;
       const {
         position
       } = shortcutOpts;
@@ -976,10 +1580,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = props;
       const {
         inputValue,
-        inputLabel,
         visiblePanel,
-        isActivated
+        isActivated,
+        labelFlag
       } = reactData;
+      const {
+        inputLabel
+      } = internalData;
       const vSize = computeSize.value;
       const isDisabled = computeIsDisabled.value;
       const formReadonly = computeFormReadonly.value;
@@ -1012,7 +1619,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }, [(0, _vue.h)('input', {
         ref: refInputTarget,
         class: 'vxe-date-picker--inner',
-        value: inputLabel,
+        value: labelFlag ? inputLabel : '',
         name,
         type: 'text',
         placeholder: inpPlaceholder,
@@ -1031,7 +1638,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       renderPanel()]);
     };
     (0, _vue.watch)(computePanelLabel, val => {
-      reactData.inputLabel = val;
+      handleInputLabel(val, true);
     });
     (0, _vue.watch)(() => props.modelValue, () => {
       updateModelValue();
@@ -1043,6 +1650,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       _ui.globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
       _ui.globalEvents.on($xeDatePicker, 'resize', handleGlobalResizeEvent);
     });
+    (0, _vue.onMounted)(() => {
+      const {
+        type,
+        multiple,
+        maskedConfig
+      } = props;
+      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=${type}`, `type=${maskedTypes.join('|')}`]);
+        }
+      }
+    });
     (0, _vue.onUnmounted)(() => {
       _ui.globalEvents.off($xeDatePicker, 'mousewheel');
       _ui.globalEvents.off($xeDatePicker, 'mousedown');