vxe-pc-ui 4.15.1 → 4.15.3

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

@@ -1,15 +1,42 @@
-import { h, Teleport, ref, computed, provide, reactive, inject, nextTick, watch, onUnmounted } from 'vue';
+import { h, Teleport, ref, computed, provide, reactive, inject, nextTick, watch, onUnmounted, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, GLOBAL_EVENT_KEYS, useSize, renderEmptyElement } from '../../ui';
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
-import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom';
+import { updatePanelPlacement, getEventTargetNode, hasControlKey } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
-import { parseDateObj, parseDateValue, getDateByCode, handleValueFormat, hasDateValueType, hasTimestampValueType } from '../../date-panel/src/util';
-import { errLog } from '../../ui/src/log';
+import { parseDateObj, parseDateValue, getDateByCode, handleValueFormat, hasDateValueType, hasTimestampValueType, isAllSameChar, getChunkDefaultNum } from '../../date-panel/src/util';
+import { createComponentLog } from '../../ui/src/log';
 import VxeDatePanelComponent from '../../date-panel/src/date-panel';
 import VxeButtonComponent from '../../button/src/button';
 import VxeButtonGroupComponent from '../../button/src/button-group';
+const { warnLog, errLog } = 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
+    };
+}
 export default defineVxeComponent({
     name: 'VxeDatePicker',
     props: {
@@ -101,6 +128,7 @@ export default defineVxeComponent({
             type: Boolean,
             default: () => getConfig().datePicker.autoClose
         },
+        maskedConfig: Object,
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
@@ -141,20 +169,8 @@ export default defineVxeComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            initialized: false,
-            panelIndex: 0,
-            visiblePanel: false,
-            isAniVisible: false,
-            panelStyle: {},
-            panelPlacement: '',
-            isActivated: false,
-            inputValue: '',
-            inputLabel: ''
-        });
-        const internalData = {
-            hpTimeout: undefined
-        };
+        const reactData = reactive(createReactData());
+        const internalData = createInternalData();
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -220,6 +236,44 @@ export default defineVxeComponent({
         const computeIsClearable = computed(() => {
             return props.clearable;
         });
+        const computeIsDatePanelType = computed(() => {
+            const isDateTimeType = computeIsDateTimeType.value;
+            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+        });
+        const computeDateListValue = computed(() => {
+            const { modelValue, type, multiple } = props;
+            const isDatePanelType = computeIsDatePanelType.value;
+            const dateValueFormat = computeDateValueFormat.value;
+            if (multiple && modelValue && isDatePanelType) {
+                return XEUtils.toValueString(modelValue).split(',').map(item => {
+                    const date = parseDateValue(item, type, {
+                        valueFormat: dateValueFormat
+                    });
+                    if (XEUtils.isValidDate(date)) {
+                        return date;
+                    }
+                    return date;
+                });
+            }
+            return [];
+        });
+        const computeLimitMaxCount = computed(() => {
+            return props.multiple ? XEUtils.toNumber(props.limitCount) : 0;
+        });
+        const computeDateMultipleValue = computed(() => {
+            const dateListValue = computeDateListValue.value;
+            const dateValueFormat = computeDateValueFormat.value;
+            return dateListValue.map(date => XEUtils.toDateString(date, dateValueFormat));
+        });
+        const computeOverCount = computed(() => {
+            const { multiple } = props;
+            const limitMaxCount = computeLimitMaxCount.value;
+            const dateMultipleValue = computeDateMultipleValue.value;
+            if (multiple && limitMaxCount) {
+                return dateMultipleValue.length >= limitMaxCount;
+            }
+            return false;
+        });
         const computeInputReadonly = computed(() => {
             const { type, editable, multiple } = props;
             const formReadonly = computeFormReadonly.value;
@@ -269,6 +323,10 @@ export default defineVxeComponent({
             const { type, valueFormat } = props;
             return handleValueFormat(type, valueFormat);
         });
+        const computeDateMaskedFormat = computed(() => {
+            const dateLabelFormat = computeDateLabelFormat.value;
+            return dateLabelFormat;
+        });
         const computeFirstDayOfWeek = computed(() => {
             const { startDay } = props;
             return XEUtils.toNumber(startDay);
@@ -289,6 +347,14 @@ export default defineVxeComponent({
                 return dateObj.label;
             }).join(', ');
         });
+        const computeMaskedOpts = computed(() => {
+            return Object.assign({}, getConfig().datePicker.maskedConfig, props.maskedConfig);
+        });
+        const computeMaskChar = computed(() => {
+            const maskedOpts = computeMaskedOpts.value;
+            const { maskPlaceholder } = maskedOpts;
+            return (maskPlaceholder ? ('' + maskPlaceholder)[0] : '') || '*';
+        });
         const updateModelValue = () => {
             const { modelValue } = props;
             let val = '';
@@ -302,6 +368,12 @@ export default defineVxeComponent({
             }
             reactData.inputValue = val;
         };
+        const handleInputLabel = (text, isUpdate) => {
+            internalData.inputLabel = text;
+            if (isUpdate) {
+                reactData.labelFlag++;
+            }
+        };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
             dispatchEvent(evnt.type, { value: inputValue }, evnt);
@@ -347,7 +419,7 @@ export default defineVxeComponent({
         const inputEvent = (evnt) => {
             const inputElem = evnt.target;
             const value = inputElem.value;
-            reactData.inputLabel = value;
+            handleInputLabel(value, true);
             dispatchEvent('input', { value }, evnt);
         };
         const changeEvent = (evnt) => {
@@ -356,15 +428,6 @@ export default 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) {
@@ -381,6 +444,107 @@ export default 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.toNumber(props.selectDay);
+                date = XEUtils.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+            }
+            const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
+            if (multiple) {
+                const overCount = computeOverCount.value;
+                // 如果为多选
+                if (isDateTimeType) {
+                    // 如果是datetime特殊类型
+                    const dateListValue = isReload ? [] : [...computeDateListValue.value];
+                    const datetimeRest = [];
+                    const eqIndex = XEUtils.findIndexOf(dateListValue, val => XEUtils.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.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                }
+                else {
+                    const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value;
+                    // 如果是日期类型
+                    if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
+                        handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
+                    }
+                    else {
+                        if (overCount) {
+                            // 如果超出最大多选数量
+                            return;
+                        }
+                        handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                    }
+                }
+            }
+            else {
+                // 如果为单选
+                if (!XEUtils.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 = parseDateValue(inpVal, type, {
+                valueFormat: dateLabelFormat
+            });
+            if (!XEUtils.isValidDate(inpDateVal)) {
+                dateRevert();
+                return;
+            }
+            if (type === 'time') {
+                inpDateVal = XEUtils.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.toDateString(dateValue, dateLabelFormat) || inpVal !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
+                    isChange = true;
+                }
+            }
+            else {
+                isChange = true;
+            }
+            const label = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
+            handleInputLabel(label, true);
+            if (isChange) {
+                dateChange(inpDateVal);
+            }
+        };
         const clearValueEvent = (evnt, value) => {
             const isDatePickerType = computeIsDatePickerType.value;
             if (isDatePickerType) {
@@ -396,6 +560,298 @@ export default defineVxeComponent({
                 dispatchEvent('suffix-click', { value: inputValue }, 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 = (isAllSameChar(chunkValue, maskChar) ? getChunkDefaultNum(selectKey) : XEUtils.toNumber(chunkValue)) + (isUpArrow ? 1 : -1);
+                    const restValue = inpValue.slice(0, chunkStartIndex) + XEUtils.padStart(chunkNum, chunkFormat.length, '0') + inpValue.slice(chunkEndIndex);
+                    evnt.preventDefault();
+                    if (restValue.indexOf(maskChar) === -1) {
+                        // 解析日期
+                        const inpDateVal = parseDateValue(restValue, type, {
+                            valueFormat: dateLabelFormat
+                        });
+                        if (XEUtils.isValidDate(inpDateVal)) {
+                            const label = XEUtils.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.map(dateMaskedFormat.match(new RegExp(`(${inputMaskedKeys.join('|')})+`, 'g')) || [], fullKey => fullKey[0]);
+                    const currIndex = XEUtils.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 = hasControlKey(evnt);
+            if (isControlKey) {
+                return;
+            }
+            evnt.preventDefault();
+            const eKey = evnt.key;
+            const isDeleleKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
+            const isBackspaceKey = globalEvents.hasKey(evnt, 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.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.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.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 { inputValue } = reactData;
@@ -405,10 +861,14 @@ export default 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', { value }, evnt);
@@ -417,7 +877,81 @@ export default 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 && (isEnableConf(maskedConfig) || maskedOpts.enabled)) {
+                        handleMaskedSelectedDate(evnt, true);
+                    }
+                }, 15);
+            }
+            else if (trigger === 'icon') {
+                hidePanel();
+                setTimeout(() => {
+                    if (editable && !multiple && (isEnableConf(maskedConfig) || maskedOpts.enabled)) {
+                        handleMaskedSelectedDate(evnt, true);
+                    }
+                }, 15);
+            }
+            else {
+                if (editable && !multiple && (isEnableConf(maskedConfig) || maskedOpts.enabled)) {
+                    handleMaskedSelectedDate(evnt, true);
+                }
+            }
+            triggerEvent(evnt);
+        };
+        const clickEvent = (evnt) => {
+            const { editable, maskedConfig } = props;
+            const maskedOpts = computeMaskedOpts.value;
+            if (editable && (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 = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+            const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+            const isLtArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
+            const isRtArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+            const isEnter = globalEvents.hasKey(evnt, 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 (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) => {
@@ -445,7 +979,7 @@ export default defineVxeComponent({
             dispatchEvent('confirm', params, params.$event);
         };
         const panelRevertEvent = (params) => {
-            reactData.inputLabel = params.label;
+            handleInputLabel(params.label, true);
         };
         // 全局事件
         const handleGlobalMousedownEvent = (evnt) => {
@@ -455,25 +989,34 @@ export default defineVxeComponent({
             const panelWrapperElem = refPanelWrapper.value;
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled && isActivated) {
-                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
-                if (!reactData.isActivated) {
+                const currActivated = getEventTargetNode(evnt, el).flag || 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);
                         }
                     }
                 }
             }
         };
         const handleGlobalKeydownEvent = (evnt) => {
-            const { visiblePanel } = reactData;
+            const { isActivated, visiblePanel } = reactData;
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
                 const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
                 if (isTab) {
-                    reactData.isActivated = false;
+                    if (isActivated) {
+                        reactData.isActivated = false;
+                    }
                 }
                 if (visiblePanel) {
                     if (isEsc || isTab) {
@@ -508,7 +1051,7 @@ export default defineVxeComponent({
             }
             if (visiblePanel || isActivated) {
                 if ($datePanel) {
-                    $datePanel.checkValue(reactData.inputLabel);
+                    $datePanel.checkValue(internalData.inputLabel);
                 }
                 const targetElem = refInputTarget.value;
                 if (targetElem) {
@@ -538,6 +1081,9 @@ export default defineVxeComponent({
             const { panelIndex } = reactData;
             const targetElem = refInputTarget.value;
             const panelElem = refInputPanel.value;
+            if (!panelElem) {
+                return nextTick();
+            }
             const btnTransfer = computeBtnTransfer.value;
             const popupOpts = computePopupOpts.value;
             const handleStyle = () => {
@@ -585,15 +1131,18 @@ export default 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 }) => {
             const { type } = props;
             const { inputValue } = reactData;
@@ -632,7 +1181,7 @@ export default defineVxeComponent({
                             break;
                         }
                         default:
-                            errLog('vxe.error.notCommands', [`[date-picker] ${code}`]);
+                            errLog('vxe.error.notCommands', [code]);
                             break;
                     }
                 }
@@ -703,6 +1252,10 @@ export default defineVxeComponent({
             return renderEmptyElement($xeDatePicker);
         };
         const renderPanel = () => {
+            const popupOpts = computePopupOpts.value;
+            if (popupOpts.enabled === false) {
+                return renderEmptyElement($xeDatePicker);
+            }
             const { type, multiple, showClearButton, showConfirmButton } = props;
             const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, inputValue } = reactData;
             const vSize = computeSize.value;
@@ -712,7 +1265,6 @@ export default defineVxeComponent({
             const isDateTimeType = computeIsDateTimeType.value;
             const shortcutList = computeShortcutList.value;
             const timeOpts = computeTimeOpts.value;
-            const popupOpts = computePopupOpts.value;
             const { position } = shortcutOpts;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -914,7 +1466,8 @@ export default defineVxeComponent({
         };
         const renderVN = () => {
             const { className, type, name, autoComplete } = props;
-            const { inputValue, inputLabel, visiblePanel, isActivated } = reactData;
+            const { inputValue, visiblePanel, isActivated, labelFlag } = reactData;
+            const { inputLabel } = internalData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
@@ -950,7 +1503,7 @@ export default defineVxeComponent({
                     h('input', {
                         ref: refInputTarget,
                         class: 'vxe-date-picker--inner',
-                        value: inputLabel,
+                        value: labelFlag ? inputLabel : '',
                         name,
                         type: 'text',
                         placeholder: inpPlaceholder,
@@ -972,7 +1525,7 @@ export default defineVxeComponent({
             ]);
         };
         watch(computePanelLabel, (val) => {
-            reactData.inputLabel = val;
+            handleInputLabel(val, true);
         });
         watch(() => props.modelValue, () => {
             updateModelValue();
@@ -984,6 +1537,17 @@ export default defineVxeComponent({
             globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
             globalEvents.on($xeDatePicker, 'resize', handleGlobalResizeEvent);
         });
+        onMounted(() => {
+            const { type, multiple, maskedConfig } = props;
+            if (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('|')}`]);
+                }
+            }
+        });
         onUnmounted(() => {
             globalEvents.off($xeDatePicker, 'mousewheel');
             globalEvents.off($xeDatePicker, 'mousedown');