vxe-pc-ui 4.5.36 → 4.6.0

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

@@ -1,10 +1,13 @@
-import { defineComponent, h, Teleport, ref, computed, reactive, inject, nextTick, watch, onUnmounted, createCommentVNode } from 'vue';
+import { defineComponent, h, Teleport, ref, computed, provide, reactive, inject, nextTick, watch, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
-import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui';
+import { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, useSize, renderEmptyElement } from '../../ui';
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom';
-import { toStringTimeDate, getDateQuarter } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
+import { parseDateObj, getDateByCode } from '../../date-panel/src/util';
+import { errLog } 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';
 export default defineComponent({
     name: 'VxeDatePicker',
@@ -32,12 +35,10 @@ export default defineComponent({
             default: null
         },
         placeholder: String,
-        maxLength: [String, Number],
         autoComplete: {
             type: String,
             default: 'off'
         },
-        align: String,
         form: String,
         className: String,
         size: {
@@ -83,6 +84,18 @@ export default defineComponent({
             type: [String, Number],
             default: () => getConfig().datePicker.selectDay
         },
+        showClearButton: {
+            type: Boolean,
+            default: () => getConfig().datePicker.showClearButton
+        },
+        showConfirmButton: {
+            type: Boolean,
+            default: () => getConfig().datePicker.showConfirmButton
+        },
+        autoClose: {
+            type: Boolean,
+            default: () => getConfig().datePicker.autoClose
+        },
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
@@ -92,11 +105,7 @@ export default defineComponent({
         },
         shortcutConfig: Object,
         // 已废弃 startWeek，被 startDay 替换
-        startWeek: Number,
-        // 已废弃
-        maxlength: [String, Number],
-        // 已废弃
-        autocomplete: String
+        startWeek: Number
     },
     emits: [
         'update:modelValue',
@@ -133,24 +142,16 @@ export default defineComponent({
             panelPlacement: '',
             isActivated: false,
             inputValue: '',
-            datetimePanelValue: null,
-            datePanelValue: null,
-            datePanelLabel: '',
-            datePanelType: 'day',
-            selectMonth: null,
-            currentDate: null
+            inputLabel: ''
         });
         const internalData = {
-            yearSize: 12,
-            monthSize: 20,
-            quarterSize: 8,
             hpTimeout: undefined
         };
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
         const refPanelWrapper = ref();
-        const refInputTimeBody = ref();
+        const refDatePanel = ref();
         const refMaps = {
             refElem,
             refInput: refInputTarget
@@ -163,7 +164,6 @@ export default defineComponent({
             internalData,
             getRefMaps: () => refMaps
         };
-        let datePickerMethods = {};
         const computeBtnTransfer = computed(() => {
             const { transfer } = props;
             if (transfer === null) {
@@ -208,51 +208,44 @@ export default defineComponent({
         const computeIsClearable = computed(() => {
             return props.clearable;
         });
-        const computeDateStartTime = computed(() => {
-            return props.startDate ? XEUtils.toStringDate(props.startDate) : null;
+        const computeInputReadonly = computed(() => {
+            const { type, editable, multiple } = props;
+            const formReadonly = computeFormReadonly.value;
+            return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
+        });
+        const computeInpPlaceholder = computed(() => {
+            const { placeholder } = props;
+            if (placeholder) {
+                return getFuncText(placeholder);
+            }
+            const globalPlaceholder = getConfig().datePicker.placeholder;
+            if (globalPlaceholder) {
+                return getFuncText(globalPlaceholder);
+            }
+            return getI18n('vxe.base.pleaseSelect');
         });
-        const computeDateEndTime = computed(() => {
-            return props.endDate ? XEUtils.toStringDate(props.endDate) : null;
+        const computeInpImmediate = computed(() => {
+            const { immediate } = props;
+            return immediate;
         });
-        const computeSupportMultiples = computed(() => {
-            return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+        const computeShortcutOpts = computed(() => {
+            return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig);
         });
-        const computeDateListValue = computed(() => {
-            const { modelValue, multiple } = props;
-            const isDatePickerType = computeIsDatePickerType.value;
-            const dateValueFormat = computeDateValueFormat.value;
-            if (multiple && modelValue && isDatePickerType) {
-                return XEUtils.toValueString(modelValue).split(',').map(item => {
-                    const date = parseDate(item, dateValueFormat);
-                    if (XEUtils.isValidDate(date)) {
-                        return date;
-                    }
-                    return date;
+        const computeShortcutList = computed(() => {
+            const shortcutOpts = computeShortcutOpts.value;
+            const { options } = shortcutOpts;
+            if (options) {
+                return options.map((option, index) => {
+                    return Object.assign({
+                        name: `${option.name || option.code || index}`
+                    }, option);
                 });
             }
             return [];
         });
-        const computeDateMultipleValue = computed(() => {
-            const dateListValue = computeDateListValue.value;
-            const dateValueFormat = computeDateValueFormat.value;
-            return dateListValue.map(date => XEUtils.toDateString(date, dateValueFormat));
-        });
-        const computeDateMultipleLabel = computed(() => {
-            const dateListValue = computeDateListValue.value;
-            const dateLabelFormat = computeDateLabelFormat.value;
-            return dateListValue.map(date => XEUtils.toDateString(date, dateLabelFormat)).join(', ');
-        });
-        const computeLimitMaxCount = computed(() => {
-            return props.multiple ? XEUtils.toNumber(props.limitCount) : 0;
-        });
-        const computeOverCount = computed(() => {
-            const { multiple } = props;
-            const limitMaxCount = computeLimitMaxCount.value;
-            const dateMultipleValue = computeDateMultipleValue.value;
-            if (multiple && limitMaxCount) {
-                return dateMultipleValue.length >= limitMaxCount;
-            }
-            return false;
+        const computeDateLabelFormat = computed(() => {
+            const { labelFormat } = props;
+            return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
         });
         const computeDateValueFormat = computed(() => {
             const { type, valueFormat } = props;
@@ -267,333 +260,28 @@ export default defineComponent({
             }
             return 'yyyy-MM-dd';
         });
-        const computeDateValue = computed(() => {
-            const { modelValue } = props;
-            const isDatePickerType = computeIsDatePickerType.value;
-            const dateValueFormat = computeDateValueFormat.value;
-            let val = null;
-            if (modelValue && isDatePickerType) {
-                const date = parseDate(modelValue, dateValueFormat);
-                if (XEUtils.isValidDate(date)) {
-                    val = date;
-                }
-            }
-            return val;
-        });
-        const computeIsDisabledPrevDateBtn = computed(() => {
-            const dateStartTime = computeDateStartTime.value;
-            const { selectMonth } = reactData;
-            if (selectMonth && dateStartTime) {
-                return selectMonth <= dateStartTime;
-            }
-            return false;
-        });
-        const computeIsDisabledNextDateBtn = computed(() => {
-            const dateEndTime = computeDateEndTime.value;
-            const { selectMonth } = reactData;
-            if (selectMonth && dateEndTime) {
-                return selectMonth >= dateEndTime;
-            }
-            return false;
-        });
-        const computeDateTimeLabel = computed(() => {
-            const { datetimePanelValue } = reactData;
-            const hasTimeSecond = computeHasTimeSecond.value;
-            if (datetimePanelValue) {
-                return XEUtils.toDateString(datetimePanelValue, hasTimeSecond ? 'HH:mm:ss' : 'HH:mm');
-            }
-            return '';
-        });
-        const computeDateHMSTime = computed(() => {
-            const dateValue = computeDateValue.value;
-            const isDateTimeType = computeIsDateTimeType.value;
-            return dateValue && isDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
-        });
-        const computeDateLabelFormat = computed(() => {
-            const { labelFormat } = props;
-            const isDatePickerType = computeIsDatePickerType.value;
-            if (isDatePickerType) {
-                return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
-            }
-            return null;
-        });
-        const computeYearList = computed(() => {
-            const { yearSize } = internalData;
-            const { selectMonth, currentDate } = reactData;
-            const years = [];
-            if (selectMonth && currentDate) {
-                const currFullYear = currentDate.getFullYear();
-                const selectFullYear = selectMonth.getFullYear();
-                const startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
-                for (let index = -4; index < yearSize + 4; index++) {
-                    const date = XEUtils.getWhatYear(startYearDate, index, 'first');
-                    const itemFullYear = date.getFullYear();
-                    years.push({
-                        date,
-                        isCurrent: true,
-                        isPrev: index < 0,
-                        isNow: currFullYear === itemFullYear,
-                        isNext: index >= yearSize,
-                        year: itemFullYear
-                    });
-                }
-            }
-            return years;
-        });
-        const computeSelectDatePanelObj = computed(() => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            let y = '';
-            let m = '';
-            if (isDatePickerType) {
-                const { datePanelType, selectMonth } = reactData;
-                const yearList = computeYearList.value;
-                let year = '';
-                let month;
-                if (selectMonth) {
-                    year = selectMonth.getFullYear();
-                    month = selectMonth.getMonth() + 1;
-                }
-                if (datePanelType === 'quarter' || datePanelType === 'month') {
-                    y = getI18n('vxe.datePicker.yearTitle', [year]);
-                }
-                else if (datePanelType === 'year') {
-                    y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : '';
-                }
-                else {
-                    y = getI18n('vxe.datePicker.yearTitle', [year]);
-                    m = month ? getI18n(`vxe.input.date.m${month}`) : '-';
-                }
-            }
-            return {
-                y,
-                m
-            };
-        });
         const computeFirstDayOfWeek = computed(() => {
-            const { startDay, startWeek } = props;
-            return XEUtils.toNumber(XEUtils.isNumber(startDay) || XEUtils.isString(startDay) ? startDay : startWeek);
-        });
-        const computeWeekDatas = computed(() => {
-            const weeks = [];
-            const isDatePickerType = computeIsDatePickerType.value;
-            if (isDatePickerType) {
-                let sWeek = computeFirstDayOfWeek.value;
-                weeks.push(sWeek);
-                for (let index = 0; index < 6; index++) {
-                    if (sWeek >= 6) {
-                        sWeek = 0;
-                    }
-                    else {
-                        sWeek++;
-                    }
-                    weeks.push(sWeek);
-                }
-            }
-            return weeks;
-        });
-        const computeDateHeaders = computed(() => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            if (isDatePickerType) {
-                const weekDatas = computeWeekDatas.value;
-                return weekDatas.map((day) => {
-                    return {
-                        value: day,
-                        label: getI18n(`vxe.input.date.weeks.w${day}`)
-                    };
-                });
-            }
-            return [];
-        });
-        const computeWeekHeaders = computed(() => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            if (isDatePickerType) {
-                const dateHeaders = computeDateHeaders.value;
-                return [{ label: getI18n('vxe.input.date.weeks.w') }].concat(dateHeaders);
-            }
-            return [];
-        });
-        const computeYearDatas = computed(() => {
-            const yearList = computeYearList.value;
-            return XEUtils.chunk(yearList, 4);
-        });
-        const computeQuarterList = computed(() => {
-            const { quarterSize } = internalData;
-            const { selectMonth, currentDate } = reactData;
-            const quarters = [];
-            if (selectMonth && currentDate) {
-                const currFullYear = currentDate.getFullYear();
-                const currQuarter = getDateQuarter(currentDate);
-                const firstYear = XEUtils.getWhatYear(selectMonth, 0, 'first');
-                const selFullYear = firstYear.getFullYear();
-                for (let index = -2; index < quarterSize - 2; index++) {
-                    const date = XEUtils.getWhatQuarter(firstYear, index);
-                    const itemFullYear = date.getFullYear();
-                    const itemQuarter = getDateQuarter(date);
-                    const isPrev = itemFullYear < selFullYear;
-                    quarters.push({
-                        date,
-                        isPrev,
-                        isCurrent: itemFullYear === selFullYear,
-                        isNow: itemFullYear === currFullYear && itemQuarter === currQuarter,
-                        isNext: !isPrev && itemFullYear > selFullYear,
-                        quarter: itemQuarter
-                    });
-                }
-            }
-            return quarters;
-        });
-        const computeQuarterDatas = computed(() => {
-            const quarterList = computeQuarterList.value;
-            return XEUtils.chunk(quarterList, 2);
-        });
-        const computeMonthList = computed(() => {
-            const { monthSize } = internalData;
-            const { selectMonth, currentDate } = reactData;
-            const months = [];
-            if (selectMonth && currentDate) {
-                const currFullYear = currentDate.getFullYear();
-                const currMonth = currentDate.getMonth();
-                const selFullYear = XEUtils.getWhatYear(selectMonth, 0, 'first').getFullYear();
-                for (let index = -4; index < monthSize - 4; index++) {
-                    const date = XEUtils.getWhatYear(selectMonth, 0, index);
-                    const itemFullYear = date.getFullYear();
-                    const itemMonth = date.getMonth();
-                    const isPrev = itemFullYear < selFullYear;
-                    months.push({
-                        date,
-                        isPrev,
-                        isCurrent: itemFullYear === selFullYear,
-                        isNow: itemFullYear === currFullYear && itemMonth === currMonth,
-                        isNext: !isPrev && itemFullYear > selFullYear,
-                        month: itemMonth
-                    });
-                }
-            }
-            return months;
-        });
-        const computeMonthDatas = computed(() => {
-            const monthList = computeMonthList.value;
-            return XEUtils.chunk(monthList, 4);
-        });
-        const computeDayList = computed(() => {
-            const { selectMonth, currentDate } = reactData;
-            const days = [];
-            if (selectMonth && currentDate) {
-                const dateHMSTime = computeDateHMSTime.value;
-                const weekDatas = computeWeekDatas.value;
-                const currFullYear = currentDate.getFullYear();
-                const currMonth = currentDate.getMonth();
-                const currDate = currentDate.getDate();
-                const selFullYear = selectMonth.getFullYear();
-                const selMonth = selectMonth.getMonth();
-                const selDay = selectMonth.getDay();
-                const prevOffsetDate = -weekDatas.indexOf(selDay);
-                const startDayDate = new Date(XEUtils.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime);
-                for (let index = 0; index < 42; index++) {
-                    const date = XEUtils.getWhatDay(startDayDate, index);
-                    const itemFullYear = date.getFullYear();
-                    const itemMonth = date.getMonth();
-                    const itemDate = date.getDate();
-                    const isPrev = date < selectMonth;
-                    days.push({
-                        date,
-                        isPrev,
-                        isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
-                        isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
-                        isNext: !isPrev && selMonth !== itemMonth,
-                        label: itemDate
-                    });
-                }
-            }
-            return days;
+            const { startDay } = props;
+            return XEUtils.toNumber(startDay);
         });
-        const computeDayDatas = computed(() => {
-            const dayList = computeDayList.value;
-            return XEUtils.chunk(dayList, 7);
-        });
-        const computeWeekDates = computed(() => {
-            const dayDatas = computeDayDatas.value;
-            const firstDayOfWeek = computeFirstDayOfWeek.value;
-            return dayDatas.map((list) => {
-                const firstItem = list[0];
-                const item = {
-                    date: firstItem.date,
-                    isWeekNumber: true,
-                    isPrev: false,
-                    isCurrent: false,
-                    isNow: false,
-                    isNext: false,
-                    label: XEUtils.getYearWeek(firstItem.date, firstDayOfWeek)
-                };
-                return [item].concat(list);
-            });
-        });
-        const computeHourList = computed(() => {
-            const list = [];
-            const isDateTimeType = computeIsDateTimeType.value;
-            if (isDateTimeType) {
-                for (let index = 0; index < 24; index++) {
-                    list.push({
-                        value: index,
-                        label: ('' + index).padStart(2, '0')
-                    });
-                }
-            }
-            return list;
-        });
-        const computeMinuteList = computed(() => {
-            const list = [];
-            const isDateTimeType = computeIsDateTimeType.value;
-            if (isDateTimeType) {
-                for (let index = 0; index < 60; index++) {
-                    list.push({
-                        value: index,
-                        label: ('' + index).padStart(2, '0')
-                    });
-                }
-            }
-            return list;
-        });
-        const computeHasTimeMinute = computed(() => {
-            const dateValueFormat = computeDateValueFormat.value;
-            return !/HH/.test(dateValueFormat) || /mm/.test(dateValueFormat);
-        });
-        const computeHasTimeSecond = computed(() => {
+        const computePanelLabel = computed(() => {
+            const { type, multiple } = props;
+            const { inputValue } = reactData;
+            const dateLabelFormat = computeDateLabelFormat.value;
             const dateValueFormat = computeDateValueFormat.value;
-            return !/HH/.test(dateValueFormat) || /ss/.test(dateValueFormat);
-        });
-        const computeSecondList = computed(() => {
-            const minuteList = computeMinuteList.value;
-            return minuteList;
-        });
-        const computeInputReadonly = computed(() => {
-            const { type, editable, multiple } = props;
-            const formReadonly = computeFormReadonly.value;
-            return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
-        });
-        const computeDatePickerType = computed(() => {
-            return 'text';
-        });
-        const computeInpPlaceholder = computed(() => {
-            const { placeholder } = props;
-            if (placeholder) {
-                return getFuncText(placeholder);
-            }
-            const globalPlaceholder = getConfig().datePicker.placeholder;
-            if (globalPlaceholder) {
-                return getFuncText(globalPlaceholder);
-            }
-            return getI18n('vxe.base.pleaseSelect');
-        });
-        const computeInpImmediate = computed(() => {
-            const { immediate } = props;
-            return immediate;
-        });
-        const computeShortcutOpts = computed(() => {
-            return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig);
+            const firstDayOfWeek = computeFirstDayOfWeek.value;
+            const vals = inputValue ? (multiple ? inputValue.split(',') : [inputValue]) : [];
+            return vals.map(val => {
+                const dateObj = parseDateObj(val, type, {
+                    valueFormat: dateValueFormat,
+                    labelFormat: dateLabelFormat,
+                    firstDay: firstDayOfWeek
+                });
+                return dateObj.label;
+            }).join(', ');
         });
-        const updateModelValue = (modelValue) => {
-            const { isActivated, visiblePanel } = reactData;
+        const updateModelValue = () => {
+            const { modelValue } = props;
             let val = '';
             if (modelValue) {
                 if (XEUtils.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
@@ -604,31 +292,16 @@ export default defineComponent({
                 }
             }
             reactData.inputValue = val;
-            if (isActivated && visiblePanel) {
-                dateOpenPanel();
-            }
-        };
-        const parseDate = (value, format) => {
-            const { type, multiple } = props;
-            if (type === 'time') {
-                return toStringTimeDate(value);
-            }
-            if (XEUtils.isArray(value)) {
-                return XEUtils.toStringDate(value[0], format);
-            }
-            if (XEUtils.isString(value)) {
-                return XEUtils.toStringDate(multiple ? XEUtils.last(value.split(',')) : value, format);
-            }
-            return XEUtils.toStringDate(value, format);
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
             dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const handleChange = (value, evnt) => {
+            const { modelValue } = props;
             reactData.inputValue = value;
             emit('update:modelValue', value);
-            if (XEUtils.toValueString(props.modelValue) !== value) {
+            if (XEUtils.toValueString(modelValue) !== value) {
                 dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
@@ -637,19 +310,10 @@ export default defineComponent({
             }
         };
         const inputEvent = (evnt) => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            const inpImmediate = computeInpImmediate.value;
             const inputElem = evnt.target;
             const value = inputElem.value;
-            reactData.inputValue = value;
-            if (!isDatePickerType) {
-                if (inpImmediate) {
-                    handleChange(value, evnt);
-                }
-                else {
-                    dispatchEvent('input', { value }, evnt);
-                }
-            }
+            reactData.inputLabel = value;
+            dispatchEvent('input', { value }, evnt);
         };
         const changeEvent = (evnt) => {
             const inpImmediate = computeInpImmediate.value;
@@ -696,665 +360,97 @@ export default defineComponent({
                 dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
-        const dateParseValue = (value) => {
-            const { type } = props;
-            const dateLabelFormat = computeDateLabelFormat.value;
-            const dateValueFormat = computeDateValueFormat.value;
-            const firstDayOfWeek = computeFirstDayOfWeek.value;
-            let dValue = null;
-            let dLabel = '';
-            if (value) {
-                dValue = parseDate(value, dateValueFormat);
-            }
-            if (XEUtils.isValidDate(dValue)) {
-                dLabel = XEUtils.toDateString(dValue, dateLabelFormat, { firstDay: firstDayOfWeek });
-                // 周选择器，由于年份和第几周是冲突的行为，所以需要特殊处理，判断是否跨年，例如
-                // '2024-12-31' 'yyyy-MM-dd W' >> '2024-12-31 1'
-                // '2025-01-01' 'yyyy-MM-dd W' >> '2025-01-01 1'
-                if (dateLabelFormat && type === 'week') {
-                    const weekNum = XEUtils.getYearWeek(dValue, firstDayOfWeek);
-                    const weekDate = XEUtils.getWhatWeek(dValue, 0, weekNum === 1 ? ((6 + firstDayOfWeek) % 7) : firstDayOfWeek, firstDayOfWeek);
-                    const weekFullYear = weekDate.getFullYear();
-                    if (weekFullYear !== dValue.getFullYear()) {
-                        const yyIndex = dateLabelFormat.indexOf('yyyy');
-                        if (yyIndex > -1) {
-                            const yyNum = Number(dLabel.substring(yyIndex, yyIndex + 4));
-                            if (yyNum && !isNaN(yyNum)) {
-                                dLabel = dLabel.replace(`${yyNum}`, `${weekFullYear}`);
-                            }
-                        }
-                    }
-                }
-            }
-            else {
-                dValue = null;
-            }
-            reactData.datePanelValue = dValue;
-            reactData.datePanelLabel = dLabel;
-        };
-        /**
-         * 值变化时处理
-         */
-        const changeValue = () => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            const { inputValue } = reactData;
-            if (isDatePickerType) {
-                dateParseValue(inputValue);
-                reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-            }
-        };
-        /**
-         * 检查初始值
-         */
-        const initValue = () => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            updateModelValue(props.modelValue);
-            if (isDatePickerType) {
-                changeValue();
-            }
-        };
-        const dateRevert = () => {
-            reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-        };
-        const dateCheckMonth = (date) => {
-            const firstDayOfWeek = computeFirstDayOfWeek.value;
-            const weekNum = XEUtils.getYearWeek(date, firstDayOfWeek);
-            const weekStartDate = XEUtils.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
-            const month = XEUtils.getWhatMonth(weekNum === 1 ? XEUtils.getWhatDay(weekStartDate, 6) : date, 0, 'first');
-            if (!XEUtils.isEqual(month, reactData.selectMonth)) {
-                reactData.selectMonth = month;
-            }
-        };
-        const dateChange = (date, isReload) => {
-            const { modelValue, multiple } = props;
-            const { datetimePanelValue } = reactData;
-            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);
-            }
-            else if (isDateTimeType) {
-                if (datetimePanelValue) {
-                    date.setHours(datetimePanelValue.getHours());
-                    date.setMinutes(datetimePanelValue.getMinutes());
-                    date.setSeconds(datetimePanelValue.getSeconds());
-                }
-            }
-            const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
-            dateCheckMonth(date);
-            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) {
-                            if (datetimePanelValue) {
-                                item.setHours(datetimePanelValue.getHours());
-                                item.setMinutes(datetimePanelValue.getMinutes());
-                                item.setSeconds(datetimePanelValue.getSeconds());
-                            }
-                            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 afterCheckValue = () => {
-            const { type } = props;
-            const { inputValue, datetimePanelValue } = reactData;
-            const dateLabelFormat = computeDateLabelFormat.value;
-            const inputReadonly = computeInputReadonly.value;
-            if (!inputReadonly) {
-                if (inputValue) {
-                    let inpDateVal = parseDate(inputValue, dateLabelFormat);
-                    if (XEUtils.isValidDate(inpDateVal)) {
-                        if (type === 'time') {
-                            inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
-                            if (inputValue !== inpDateVal) {
-                                handleChange(inpDateVal, { type: 'check' });
-                            }
-                            reactData.inputValue = inpDateVal;
-                        }
-                        else {
-                            let isChange = false;
-                            const firstDayOfWeek = computeFirstDayOfWeek.value;
-                            if (type === 'datetime') {
-                                const dateValue = computeDateValue.value;
-                                if (inputValue !== XEUtils.toDateString(dateValue, dateLabelFormat) || inputValue !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
-                                    isChange = true;
-                                    if (datetimePanelValue) {
-                                        datetimePanelValue.setHours(inpDateVal.getHours());
-                                        datetimePanelValue.setMinutes(inpDateVal.getMinutes());
-                                        datetimePanelValue.setSeconds(inpDateVal.getSeconds());
-                                    }
-                                }
-                            }
-                            else {
-                                isChange = true;
-                            }
-                            reactData.inputValue = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
-                            if (isChange) {
-                                dateChange(inpDateVal);
-                            }
-                        }
-                    }
-                    else {
-                        dateRevert();
-                    }
-                }
-                else {
-                    handleChange('', { type: 'check' });
-                }
-            }
-        };
         const blurEvent = (evnt) => {
+            const $datePanel = refDatePanel.value;
             const { inputValue } = reactData;
             const inpImmediate = computeInpImmediate.value;
             const value = inputValue;
             if (!inpImmediate) {
                 handleChange(value, evnt);
             }
-            afterCheckValue();
-            if (!reactData.visiblePanel) {
-                reactData.isActivated = false;
-            }
-            dispatchEvent('blur', { value }, evnt);
-            // 自动更新校验状态
-            if ($xeForm && formItemInfo) {
-                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
-            }
-        };
-        const keydownEvent = (evnt) => {
-            triggerEvent(evnt);
-        };
-        const keyupEvent = (evnt) => {
-            triggerEvent(evnt);
-        };
-        // 日期
-        const dateMonthHandle = (date, offsetMonth) => {
-            const firstDayOfWeek = computeFirstDayOfWeek.value;
-            const weekNum = XEUtils.getYearWeek(date, firstDayOfWeek);
-            const weekStartDate = XEUtils.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
-            const month = XEUtils.getWhatMonth(weekNum === 1 ? XEUtils.getWhatDay(weekStartDate, 6) : date, offsetMonth, 'first');
-            reactData.selectMonth = month;
-        };
-        const dateNowHandle = () => {
-            const { type } = props;
-            const firstDayOfWeek = computeFirstDayOfWeek.value;
-            let currentDate = new Date();
-            switch (type) {
-                case 'week':
-                    currentDate = XEUtils.getWhatWeek(currentDate, 0, firstDayOfWeek);
-                    break;
-                case 'datetime':
-                    currentDate = new Date();
-                    reactData.datetimePanelValue = new Date();
-                    break;
-                default:
-                    currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first');
-                    break;
-            }
-            reactData.currentDate = currentDate;
-            dateMonthHandle(currentDate, 0);
-        };
-        const dateToggleYearTypeEvent = () => {
-            reactData.datePanelType = 'year';
-        };
-        const dateToggleMonthTypeEvent = () => {
-            let { datePanelType } = reactData;
-            if (datePanelType === 'month' || datePanelType === 'quarter') {
-                datePanelType = 'year';
-            }
-            else {
-                datePanelType = 'month';
-            }
-            reactData.datePanelType = datePanelType;
-        };
-        const datePrevEvent = (evnt) => {
-            const { type } = props;
-            const { datePanelType, selectMonth, inputValue } = reactData;
-            const { yearSize } = internalData;
-            const value = inputValue;
-            const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
-            if (!isDisabledPrevDateBtn) {
-                let viewDate;
-                if (type === 'year') {
-                    viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, 'first');
-                }
-                else if (type === 'month' || type === 'quarter') {
-                    if (datePanelType === 'year') {
-                        viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, 'first');
-                    }
-                    else {
-                        viewDate = XEUtils.getWhatYear(selectMonth, -1, 'first');
-                    }
-                }
-                else {
-                    if (datePanelType === 'year') {
-                        viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, 'first');
-                    }
-                    else if (datePanelType === 'month') {
-                        viewDate = XEUtils.getWhatYear(selectMonth, -1, 'first');
-                    }
-                    else {
-                        viewDate = XEUtils.getWhatMonth(selectMonth, -1, 'first');
-                    }
-                }
-                reactData.selectMonth = viewDate;
-                dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
-            }
-        };
-        const dateTodayMonthEvent = (evnt) => {
-            dateNowHandle();
-            dateChange(reactData.currentDate, true);
-            if (!props.multiple) {
-                hidePanel();
-            }
-            dispatchEvent('date-today', { type: props.type }, evnt);
-        };
-        const dateNextEvent = (evnt) => {
-            const { type } = props;
-            const { datePanelType, selectMonth, inputValue } = reactData;
-            const { yearSize } = internalData;
-            const value = inputValue;
-            const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
-            if (!isDisabledNextDateBtn) {
-                let viewDate;
-                if (type === 'year') {
-                    viewDate = XEUtils.getWhatYear(selectMonth, yearSize, 'first');
-                }
-                else if (type === 'month' || type === 'quarter') {
-                    if (datePanelType === 'year') {
-                        viewDate = XEUtils.getWhatYear(selectMonth, yearSize, 'first');
-                    }
-                    else {
-                        viewDate = XEUtils.getWhatYear(selectMonth, 1, 'first');
-                    }
-                }
-                else {
-                    if (datePanelType === 'year') {
-                        viewDate = XEUtils.getWhatYear(selectMonth, yearSize, 'first');
-                    }
-                    else if (datePanelType === 'month') {
-                        viewDate = XEUtils.getWhatYear(selectMonth, 1, 'first');
-                    }
-                    else {
-                        viewDate = XEUtils.getWhatMonth(selectMonth, 1, 'first');
-                    }
-                }
-                reactData.selectMonth = viewDate;
-                dispatchEvent('date-next', { viewType: datePanelType, value, type }, evnt);
-            }
-        };
-        const isDateDisabled = (item) => {
-            const { disabledMethod } = props;
-            const { datePanelType } = reactData;
-            const dateStartTime = computeDateStartTime.value;
-            const dateEndTime = computeDateEndTime.value;
-            const { date } = item;
-            if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
-                return true;
-            }
-            if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
-                return true;
-            }
-            if (disabledMethod) {
-                return disabledMethod({ type: datePanelType, viewType: datePanelType, date, $datePicker: $xeDatePicker });
-            }
-            return false;
-        };
-        const dateSelectItem = (date) => {
-            const { type, multiple } = props;
-            const { datePanelType } = reactData;
-            if (type === 'month') {
-                if (datePanelType === 'year') {
-                    reactData.datePanelType = 'month';
-                    dateCheckMonth(date);
-                }
-                else {
-                    dateChange(date);
-                    if (!multiple) {
-                        hidePanel();
-                    }
-                }
-            }
-            else if (type === 'year') {
-                dateChange(date);
-                if (!multiple) {
-                    hidePanel();
-                }
-            }
-            else if (type === 'quarter') {
-                if (datePanelType === 'year') {
-                    reactData.datePanelType = 'quarter';
-                    dateCheckMonth(date);
-                }
-                else {
-                    dateChange(date);
-                    if (!multiple) {
-                        hidePanel();
-                    }
-                }
-            }
-            else {
-                if (datePanelType === 'month') {
-                    reactData.datePanelType = type === 'week' ? type : 'day';
-                    dateCheckMonth(date);
-                }
-                else if (datePanelType === 'year') {
-                    reactData.datePanelType = 'month';
-                    dateCheckMonth(date);
-                }
-                else {
-                    dateChange(date);
-                    if (type === 'datetime') {
-                        // 日期带时间
-                    }
-                    else {
-                        if (!multiple) {
-                            hidePanel();
-                        }
-                    }
-                }
-            }
-        };
-        const dateSelectEvent = (item) => {
-            if (!isDateDisabled(item)) {
-                dateSelectItem(item.date);
-            }
-        };
-        const dateMoveDay = (offsetDay) => {
-            if (!isDateDisabled({ date: offsetDay })) {
-                const dayList = computeDayList.value;
-                if (!dayList.some((item) => XEUtils.isDateSame(item.date, offsetDay, 'yyyyMMdd'))) {
-                    dateCheckMonth(offsetDay);
-                }
-                dateParseValue(offsetDay);
-            }
-        };
-        const dateMoveYear = (offsetYear) => {
-            if (!isDateDisabled({ date: offsetYear })) {
-                const yearList = computeYearList.value;
-                if (!yearList.some((item) => XEUtils.isDateSame(item.date, offsetYear, 'yyyy'))) {
-                    dateCheckMonth(offsetYear);
-                }
-                dateParseValue(offsetYear);
-            }
-        };
-        const dateMoveQuarter = (offsetQuarter) => {
-            if (!isDateDisabled({ date: offsetQuarter })) {
-                const quarterList = computeQuarterList.value;
-                if (!quarterList.some((item) => XEUtils.isDateSame(item.date, offsetQuarter, 'yyyyq'))) {
-                    dateCheckMonth(offsetQuarter);
-                }
-                dateParseValue(offsetQuarter);
-            }
-        };
-        const dateMoveMonth = (offsetMonth) => {
-            if (!isDateDisabled({ date: offsetMonth })) {
-                const monthList = computeMonthList.value;
-                if (!monthList.some((item) => XEUtils.isDateSame(item.date, offsetMonth, 'yyyyMM'))) {
-                    dateCheckMonth(offsetMonth);
-                }
-                dateParseValue(offsetMonth);
+            if (!reactData.visiblePanel) {
+                reactData.isActivated = false;
             }
-        };
-        const dateMouseenterEvent = (item) => {
-            if (!isDateDisabled(item)) {
-                const { datePanelType } = reactData;
-                if (datePanelType === 'month') {
-                    dateMoveMonth(item.date);
-                }
-                else if (datePanelType === 'quarter') {
-                    dateMoveQuarter(item.date);
-                }
-                else if (datePanelType === 'year') {
-                    dateMoveYear(item.date);
-                }
-                else {
-                    dateMoveDay(item.date);
-                }
+            if ($datePanel) {
+                $datePanel.checkValue(reactData.inputLabel);
             }
-        };
-        const updateTimePos = (liElem) => {
-            if (liElem) {
-                const height = liElem.offsetHeight;
-                const ulElem = liElem.parentNode;
-                ulElem.scrollTop = liElem.offsetTop - height * 4;
+            dispatchEvent('blur', { value }, evnt);
+            // 自动更新校验状态
+            if ($xeForm && formItemInfo) {
+                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
-        const dateTimeChangeEvent = (evnt) => {
-            const { datetimePanelValue } = reactData;
-            reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : new Date();
-            updateTimePos(evnt.currentTarget);
+        const keydownEvent = (evnt) => {
+            triggerEvent(evnt);
         };
-        const dateHourEvent = (evnt, item) => {
-            const { datetimePanelValue } = reactData;
-            if (datetimePanelValue) {
-                datetimePanelValue.setHours(item.value);
-            }
-            dateTimeChangeEvent(evnt);
+        const keyupEvent = (evnt) => {
+            triggerEvent(evnt);
         };
-        // const dateClearEvent = (evnt: MouseEvent) => {
-        //   const value = ''
-        //   handleChange(value, evnt)
-        //   dispatchEvent('clear', { value }, evnt)
-        // }
-        const dateConfirmEvent = () => {
-            const { multiple } = props;
-            const { datetimePanelValue } = reactData;
-            const dateValue = computeDateValue.value;
-            const isDateTimeType = computeIsDateTimeType.value;
-            if (isDateTimeType) {
-                const dateValueFormat = computeDateValueFormat.value;
-                if (multiple) {
-                    // 如果为多选
-                    const dateMultipleValue = computeDateMultipleValue.value;
-                    if (isDateTimeType) {
-                        // 如果是datetime特殊类型
-                        const dateListValue = [...computeDateListValue.value];
-                        const datetimeRest = [];
-                        dateListValue.forEach(item => {
-                            if (item) {
-                                if (datetimePanelValue) {
-                                    item.setHours(datetimePanelValue.getHours());
-                                    item.setMinutes(datetimePanelValue.getMinutes());
-                                    item.setSeconds(datetimePanelValue.getSeconds());
-                                }
-                                datetimeRest.push(item);
-                            }
-                        });
-                        handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
-                    }
-                    else {
-                        // 如果是日期类型
-                        handleChange(dateMultipleValue.join(','), { type: 'update' });
-                    }
-                }
-                else {
-                    dateChange(dateValue || reactData.currentDate);
-                }
+        const confirmEvent = (evnt) => {
+            const $datePanel = refDatePanel.value;
+            if ($datePanel) {
+                $datePanel.confirmByEvent(evnt);
             }
             hidePanel();
         };
-        const dateMinuteEvent = (evnt, item) => {
-            const { datetimePanelValue } = reactData;
-            if (datetimePanelValue) {
-                datetimePanelValue.setMinutes(item.value);
-            }
-            dateTimeChangeEvent(evnt);
-        };
-        const dateSecondEvent = (evnt, item) => {
-            const { datetimePanelValue } = reactData;
-            if (datetimePanelValue) {
-                datetimePanelValue.setSeconds(item.value);
+        const panelChangeEvent = (params) => {
+            const { multiple } = props;
+            const { value, $event } = params;
+            const isDateTimeType = computeIsDateTimeType.value;
+            handleChange(value, $event);
+            if (!multiple && !isDateTimeType) {
+                hidePanel();
             }
-            dateTimeChangeEvent(evnt);
         };
-        const dateOffsetEvent = (evnt) => {
-            const { isActivated, datePanelValue, datePanelType } = reactData;
-            if (isActivated) {
-                evnt.preventDefault();
-                const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
-                const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-                const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
-                const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-                if (datePanelType === 'year') {
-                    let offsetYear = XEUtils.getWhatYear(datePanelValue || Date.now(), 0, 'first');
-                    if (isLeftArrow) {
-                        offsetYear = XEUtils.getWhatYear(offsetYear, -1);
-                    }
-                    else if (isUpArrow) {
-                        offsetYear = XEUtils.getWhatYear(offsetYear, -4);
-                    }
-                    else if (isRightArrow) {
-                        offsetYear = XEUtils.getWhatYear(offsetYear, 1);
-                    }
-                    else if (isDwArrow) {
-                        offsetYear = XEUtils.getWhatYear(offsetYear, 4);
-                    }
-                    dateMoveYear(offsetYear);
-                }
-                else if (datePanelType === 'quarter') {
-                    let offsetQuarter = XEUtils.getWhatQuarter(datePanelValue || Date.now(), 0, 'first');
-                    if (isLeftArrow) {
-                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, -1);
-                    }
-                    else if (isUpArrow) {
-                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, -2);
-                    }
-                    else if (isRightArrow) {
-                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, 1);
-                    }
-                    else if (isDwArrow) {
-                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, 2);
-                    }
-                    dateMoveQuarter(offsetQuarter);
-                }
-                else if (datePanelType === 'month') {
-                    let offsetMonth = XEUtils.getWhatMonth(datePanelValue || Date.now(), 0, 'first');
-                    if (isLeftArrow) {
-                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, -1);
-                    }
-                    else if (isUpArrow) {
-                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, -4);
-                    }
-                    else if (isRightArrow) {
-                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, 1);
-                    }
-                    else if (isDwArrow) {
-                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, 4);
-                    }
-                    dateMoveMonth(offsetMonth);
-                }
-                else if (datePanelType === 'week') {
-                    let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
-                    const firstDayOfWeek = computeFirstDayOfWeek.value;
-                    if (isUpArrow) {
-                        offsetDay = XEUtils.getWhatWeek(offsetDay, -1, firstDayOfWeek);
-                    }
-                    else if (isDwArrow) {
-                        offsetDay = XEUtils.getWhatWeek(offsetDay, 1, firstDayOfWeek);
+        // 全局事件
+        const handleGlobalMousedownEvent = (evnt) => {
+            const $datePanel = refDatePanel.value;
+            const { visiblePanel, isActivated } = reactData;
+            const el = refElem.value;
+            const panelWrapperElem = refPanelWrapper.value;
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled && isActivated) {
+                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
+                if (!reactData.isActivated) {
+                    if (visiblePanel) {
+                        hidePanel();
+                        if ($datePanel) {
+                            $datePanel.checkValue(reactData.inputLabel);
+                        }
                     }
-                    dateMoveDay(offsetDay);
                 }
-                else {
-                    let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
-                    if (isLeftArrow) {
-                        offsetDay = XEUtils.getWhatDay(offsetDay, -1);
-                    }
-                    else if (isUpArrow) {
-                        offsetDay = XEUtils.getWhatWeek(offsetDay, -1, offsetDay.getDay());
-                    }
-                    else if (isRightArrow) {
-                        offsetDay = XEUtils.getWhatDay(offsetDay, 1);
+            }
+        };
+        const handleGlobalMousewheelEvent = (evnt) => {
+            const { visiblePanel } = reactData;
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
+                if (visiblePanel) {
+                    const panelWrapperElem = refPanelWrapper.value;
+                    if (getEventTargetNode(evnt, panelWrapperElem).flag) {
+                        updatePlacement();
                     }
-                    else if (isDwArrow) {
-                        offsetDay = XEUtils.getWhatWeek(offsetDay, 1, offsetDay.getDay());
+                    else {
+                        hidePanel();
                     }
-                    dateMoveDay(offsetDay);
                 }
             }
         };
-        const datePgOffsetEvent = (evnt) => {
-            const { isActivated } = reactData;
-            if (isActivated) {
-                const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
-                evnt.preventDefault();
-                if (isPgUp) {
-                    datePrevEvent(evnt);
-                }
-                else {
-                    dateNextEvent(evnt);
+        const handleGlobalBlurEvent = () => {
+            const $datePanel = refDatePanel.value;
+            const { isActivated, visiblePanel } = reactData;
+            if (visiblePanel) {
+                hidePanel();
+                if ($datePanel) {
+                    $datePanel.checkValue(reactData.inputLabel);
                 }
             }
-        };
-        const dateOpenPanel = () => {
-            const { type } = props;
-            const isDateTimeType = computeIsDateTimeType.value;
-            const dateValue = computeDateValue.value;
-            if (['year', 'quarter', 'month', 'week'].indexOf(type) > -1) {
-                reactData.datePanelType = type;
-            }
-            else {
-                reactData.datePanelType = 'day';
-            }
-            reactData.currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first');
-            if (dateValue) {
-                dateMonthHandle(dateValue, 0);
-                dateParseValue(dateValue);
-            }
-            else {
-                dateNowHandle();
-            }
-            if (isDateTimeType) {
-                reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
-                nextTick(() => {
-                    const timeBodyElem = refInputTimeBody.value;
-                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => {
-                        updateTimePos(elem);
-                    });
-                });
+            else if (isActivated) {
+                if ($datePanel) {
+                    $datePanel.checkValue(reactData.inputLabel);
+                }
             }
         };
-        // 日期
         // 弹出面板
         const updateZindex = () => {
             if (reactData.panelIndex < getLastZIndex()) {
@@ -1439,7 +535,6 @@ export default defineComponent({
         const showPanel = () => {
             const { visiblePanel } = reactData;
             const isDisabled = computeIsDisabled.value;
-            const isDatePickerType = computeIsDatePickerType.value;
             if (!isDisabled && !visiblePanel) {
                 if (!reactData.initialized) {
                     reactData.initialized = true;
@@ -1450,9 +545,6 @@ export default defineComponent({
                 }
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
-                if (isDatePickerType) {
-                    dateOpenPanel();
-                }
                 setTimeout(() => {
                     reactData.visiblePanel = true;
                 }, 10);
@@ -1472,146 +564,71 @@ export default defineComponent({
             triggerEvent(evnt);
         };
         const handleShortcutEvent = ({ option, $event }) => {
+            const { type } = props;
+            const { inputValue } = reactData;
             const shortcutOpts = computeShortcutOpts.value;
             const { autoClose } = shortcutOpts;
-            const clickMethod = option.clickMethod || shortcutOpts.clickMethod;
+            const { code, clickMethod } = option;
+            let value = inputValue;
             const shortcutParams = {
                 $datePicker: $xeDatePicker,
-                option: option
+                option,
+                value,
+                code
             };
-            if (clickMethod) {
-                clickMethod(shortcutParams);
-            }
-            if (autoClose) {
-                hidePanel();
-            }
-            dispatchEvent('shortcut-click', shortcutParams, $event);
-        };
-        // 全局事件
-        const handleGlobalMousedownEvent = (evnt) => {
-            const { visiblePanel, isActivated } = reactData;
-            const isDatePickerType = computeIsDatePickerType.value;
-            const el = refElem.value;
-            const panelWrapperElem = refPanelWrapper.value;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled && isActivated) {
-                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
-                if (!reactData.isActivated) {
-                    // 如果是日期类型
-                    if (isDatePickerType) {
-                        if (visiblePanel) {
-                            hidePanel();
-                            afterCheckValue();
-                        }
-                    }
-                    else {
-                        afterCheckValue();
-                    }
-                }
-            }
-        };
-        const handleGlobalKeydownEvent = (evnt) => {
-            const { clearable } = props;
-            const { visiblePanel } = reactData;
-            const isDatePickerType = computeIsDatePickerType.value;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
-                const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
-                const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-                const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
-                const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
-                const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-                const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
-                const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-                const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
-                const isPgDn = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_DOWN);
-                const operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow;
-                let isActivated = reactData.isActivated;
-                if (isTab) {
-                    if (isActivated) {
-                        afterCheckValue();
-                    }
-                    isActivated = false;
-                    reactData.isActivated = isActivated;
-                }
-                else if (operArrow) {
-                    if (isDatePickerType) {
-                        if (isActivated) {
-                            if (visiblePanel) {
-                                dateOffsetEvent(evnt);
-                            }
-                            else if (isUpArrow || isDwArrow) {
-                                datePickerOpenEvent(evnt);
-                            }
-                        }
-                    }
-                }
-                else if (isEnter) {
-                    if (isDatePickerType) {
-                        if (visiblePanel) {
-                            if (reactData.datePanelValue) {
-                                dateSelectItem(reactData.datePanelValue);
-                            }
-                            else {
-                                hidePanel();
-                            }
-                        }
-                        else if (isActivated) {
-                            datePickerOpenEvent(evnt);
-                        }
-                    }
+            if (!clickMethod && code) {
+                const gCommandOpts = commands.get(code);
+                const dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null;
+                if (dpCommandMethod) {
+                    dpCommandMethod(shortcutParams);
                 }
-                else if (isPgUp || isPgDn) {
-                    if (isDatePickerType) {
-                        if (isActivated) {
-                            datePgOffsetEvent(evnt);
+                else {
+                    const dateValueFormat = computeDateValueFormat.value;
+                    const firstDayOfWeek = computeFirstDayOfWeek.value;
+                    switch (code) {
+                        case 'now':
+                        case 'prev':
+                        case 'next':
+                        case 'minus':
+                        case 'plus': {
+                            const restObj = getDateByCode(code, value, type, {
+                                valueFormat: dateValueFormat,
+                                firstDay: firstDayOfWeek
+                            });
+                            value = restObj.value;
+                            shortcutParams.value = value;
+                            handleChange(value, $event);
+                            break;
                         }
-                    }
-                }
-                if (isTab || isEsc) {
-                    if (visiblePanel) {
-                        hidePanel();
-                    }
-                }
-                else if (isDel && clearable) {
-                    if (isActivated) {
-                        clearValueEvent(evnt, null);
+                        default:
+                            errLog('vxe.error.notCommands', [code]);
+                            break;
                     }
                 }
             }
-        };
-        const handleGlobalMousewheelEvent = (evnt) => {
-            const { visiblePanel } = reactData;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                if (visiblePanel) {
-                    const panelWrapperElem = refPanelWrapper.value;
-                    if (getEventTargetNode(evnt, panelWrapperElem).flag) {
-                        updatePlacement();
-                    }
-                    else {
-                        hidePanel();
-                        afterCheckValue();
-                    }
+            else {
+                const optClickMethod = clickMethod || shortcutOpts.clickMethod;
+                if (optClickMethod) {
+                    optClickMethod(shortcutParams);
                 }
             }
-        };
-        const handleGlobalBlurEvent = () => {
-            const { isActivated, visiblePanel } = reactData;
-            if (visiblePanel) {
+            if (autoClose) {
                 hidePanel();
-                afterCheckValue();
-            }
-            else if (isActivated) {
-                afterCheckValue();
             }
+            dispatchEvent('shortcut-click', shortcutParams, $event);
         };
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $datePicker: $xeDatePicker }, params));
         };
-        datePickerMethods = {
+        const datePickerMethods = {
             dispatchEvent,
+            setModelValue(value) {
+                reactData.inputValue = value;
+                emit('update:modelValue', value);
+            },
+            setModelValueByEvent(evnt, value) {
+                handleChange(value || '', evnt);
+            },
             focus() {
                 const inputElem = refInputTarget.value;
                 reactData.isActivated = true;
@@ -1635,424 +652,16 @@ export default defineComponent({
             updatePlacement
         };
         Object.assign($xeDatePicker, datePickerMethods);
-        const renderDateLabel = (item, label) => {
-            const { festivalMethod } = props;
-            if (festivalMethod) {
-                const { datePanelType } = reactData;
-                const festivalRest = festivalMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $datePicker: $xeDatePicker });
-                const festivalItem = festivalRest ? (XEUtils.isString(festivalRest) ? { label: festivalRest } : festivalRest) : {};
-                const extraItem = festivalItem.extra ? (XEUtils.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra) : null;
-                const labels = [
-                    h('span', {
-                        class: ['vxe-date-picker--date-label', {
-                                'is-notice': festivalItem.notice
-                            }]
-                    }, extraItem && extraItem.label
-                        ? [
-                            h('span', `${label}`),
-                            h('span', {
-                                class: ['vxe-date-picker--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
-                                style: extraItem.style
-                            }, XEUtils.toValueString(extraItem.label))
-                        ]
-                        : `${label}`)
-                ];
-                const festivalLabel = festivalItem.label;
-                if (festivalLabel) {
-                    // 默认最多支持3个节日重叠
-                    const festivalLabels = XEUtils.toValueString(festivalLabel).split(',');
-                    labels.push(h('span', {
-                        class: ['vxe-date-picker--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
-                        style: festivalItem.style
-                    }, [
-                        festivalLabels.length > 1
-                            ? h('span', {
-                                class: ['vxe-date-picker--date-festival--overlap', `overlap--${festivalLabels.length}`]
-                            }, festivalLabels.map(label => h('span', label.substring(0, 3))))
-                            : h('span', {
-                                class: 'vxe-date-picker--date-festival--label'
-                            }, festivalLabels[0].substring(0, 3))
-                    ]));
-                }
-                return labels;
-            }
-            return label;
-        };
-        const renderDateDayTable = () => {
-            const { multiple } = props;
-            const { datePanelType, datePanelValue } = reactData;
-            const dateValue = computeDateValue.value;
-            const dateHeaders = computeDateHeaders.value;
-            const dayDatas = computeDayDatas.value;
-            const dateListValue = computeDateListValue.value;
-            const overCount = computeOverCount.value;
-            const matchFormat = 'yyyyMMdd';
-            return [
-                h('table', {
-                    class: `vxe-date-picker--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
-                }, [
-                    h('thead', [
-                        h('tr', dateHeaders.map((item) => {
-                            return h('th', item.label);
-                        }))
-                    ]),
-                    h('tbody', dayDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                            return h('td', {
-                                class: {
-                                    'is--prev': item.isPrev,
-                                    'is--current': item.isCurrent,
-                                    'is--now': item.isNow,
-                                    'is--next': item.isNext,
-                                    'is--disabled': isDateDisabled(item),
-                                    'is--selected': isSelected,
-                                    'is--over': overCount && !isSelected,
-                                    'is--hover': !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                                },
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, item.label));
-                        }));
-                    }))
-                ])
-            ];
-        };
-        const renderDateWeekTable = () => {
-            const { multiple } = props;
-            const { datePanelType, datePanelValue } = reactData;
-            const dateValue = computeDateValue.value;
-            const weekHeaders = computeWeekHeaders.value;
-            const weekDates = computeWeekDates.value;
-            const dateListValue = computeDateListValue.value;
-            const overCount = computeOverCount.value;
-            const matchFormat = 'yyyyMMdd';
-            return [
-                h('table', {
-                    class: `vxe-date-picker--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
-                }, [
-                    h('thead', [
-                        h('tr', weekHeaders.map((item) => {
-                            return h('th', item.label);
-                        }))
-                    ]),
-                    h('tbody', weekDates.map((rows) => {
-                        const isSelected = multiple ? rows.some((item) => dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat))) : rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat));
-                        const isHover = rows.some((item) => XEUtils.isDateSame(datePanelValue, item.date, matchFormat));
-                        return h('tr', rows.map((item) => {
-                            return h('td', {
-                                class: {
-                                    'is--prev': item.isPrev,
-                                    'is--current': item.isCurrent,
-                                    'is--now': item.isNow,
-                                    'is--next': item.isNext,
-                                    'is--disabled': isDateDisabled(item),
-                                    'is--selected': isSelected,
-                                    'is--over': overCount && !isSelected,
-                                    'is--hover': !overCount && isHover
-                                },
-                                // event
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, item.label));
-                        }));
-                    }))
-                ])
-            ];
-        };
-        const renderDateMonthTable = () => {
-            const { multiple } = props;
-            const { datePanelType, datePanelValue } = reactData;
-            const dateValue = computeDateValue.value;
-            const monthDatas = computeMonthDatas.value;
-            const dateListValue = computeDateListValue.value;
-            const overCount = computeOverCount.value;
-            const matchFormat = 'yyyyMM';
-            return [
-                h('table', {
-                    class: `vxe-date-picker--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
-                }, [
-                    h('tbody', monthDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                            return h('td', {
-                                class: {
-                                    'is--prev': item.isPrev,
-                                    'is--current': item.isCurrent,
-                                    'is--now': item.isNow,
-                                    'is--next': item.isNext,
-                                    'is--disabled': isDateDisabled(item),
-                                    'is--selected': isSelected,
-                                    'is--over': overCount && !isSelected,
-                                    'is--hover': !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                                },
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)));
-                        }));
-                    }))
-                ])
-            ];
-        };
-        const renderDateQuarterTable = () => {
-            const { multiple } = props;
-            const { datePanelType, datePanelValue } = reactData;
-            const dateValue = computeDateValue.value;
-            const quarterDatas = computeQuarterDatas.value;
-            const dateListValue = computeDateListValue.value;
-            const overCount = computeOverCount.value;
-            const matchFormat = 'yyyyq';
-            return [
-                h('table', {
-                    class: `vxe-date-picker--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
-                }, [
-                    h('tbody', quarterDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                            return h('td', {
-                                class: {
-                                    'is--prev': item.isPrev,
-                                    'is--current': item.isCurrent,
-                                    'is--now': item.isNow,
-                                    'is--next': item.isNext,
-                                    'is--disabled': isDateDisabled(item),
-                                    'is--selected': isSelected,
-                                    'is--over': overCount && !isSelected,
-                                    'is--hover': !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                                },
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)));
-                        }));
-                    }))
-                ])
-            ];
-        };
-        const renderDateYearTable = () => {
-            const { multiple } = props;
-            const { datePanelType, datePanelValue } = reactData;
-            const dateValue = computeDateValue.value;
-            const yearDatas = computeYearDatas.value;
-            const dateListValue = computeDateListValue.value;
-            const overCount = computeOverCount.value;
-            const matchFormat = 'yyyy';
-            return [
-                h('table', {
-                    class: `vxe-date-picker--date-${datePanelType}-view`,
-                    cellspacing: 0,
-                    cellpadding: 0,
-                    border: 0
-                }, [
-                    h('tbody', yearDatas.map((rows) => {
-                        return h('tr', rows.map((item) => {
-                            const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                            return h('td', {
-                                class: {
-                                    'is--prev': item.isPrev,
-                                    'is--current': item.isCurrent,
-                                    'is--now': item.isNow,
-                                    'is--next': item.isNext,
-                                    'is--disabled': isDateDisabled(item),
-                                    'is--selected': isSelected,
-                                    'is--over': overCount && !isSelected,
-                                    'is--hover': !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                                },
-                                onClick: () => dateSelectEvent(item),
-                                onMouseenter: () => dateMouseenterEvent(item)
-                            }, renderDateLabel(item, item.year));
-                        }));
-                    }))
-                ])
-            ];
-        };
-        const renderDateTable = () => {
-            const { datePanelType } = reactData;
-            switch (datePanelType) {
-                case 'week':
-                    return renderDateWeekTable();
-                case 'month':
-                    return renderDateMonthTable();
-                case 'quarter':
-                    return renderDateQuarterTable();
-                case 'year':
-                    return renderDateYearTable();
-            }
-            return renderDateDayTable();
-        };
-        const renderDatePanel = () => {
-            const { multiple } = props;
-            const { datePanelType } = reactData;
-            const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
-            const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
-            const selectDatePanelObj = computeSelectDatePanelObj.value;
-            const supportMultiples = computeSupportMultiples.value;
-            return [
-                h('div', {
-                    class: 'vxe-date-picker--date-picker-header'
-                }, [
-                    h('div', {
-                        class: 'vxe-date-picker--date-picker-type-wrapper'
-                    }, [
-                        datePanelType === 'year'
-                            ? h('span', {
-                                class: 'vxe-date-picker--date-picker-label'
-                            }, selectDatePanelObj.y)
-                            : h('span', {
-                                class: 'vxe-date-picker--date-picker-btns'
-                            }, [
-                                h('span', {
-                                    class: 'vxe-date-picker--date-picker-btn',
-                                    onClick: dateToggleYearTypeEvent
-                                }, selectDatePanelObj.y),
-                                selectDatePanelObj.m
-                                    ? h('span', {
-                                        class: 'vxe-date-picker--date-picker-btn',
-                                        onClick: dateToggleMonthTypeEvent
-                                    }, selectDatePanelObj.m)
-                                    : renderEmptyElement($xeDatePicker)
-                            ])
-                    ]),
-                    h('div', {
-                        class: 'vxe-date-picker--date-picker-btn-wrapper'
-                    }, [
-                        h('span', {
-                            class: ['vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-prev-btn', {
-                                    'is--disabled': isDisabledPrevDateBtn
-                                }],
-                            onClick: datePrevEvent
-                        }, [
-                            h('i', {
-                                class: 'vxe-icon-caret-left'
-                            })
-                        ]),
-                        h('span', {
-                            class: 'vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-current-btn',
-                            onClick: dateTodayMonthEvent
-                        }, [
-                            h('i', {
-                                class: 'vxe-icon-dot'
-                            })
-                        ]),
-                        h('span', {
-                            class: ['vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-next-btn', {
-                                    'is--disabled': isDisabledNextDateBtn
-                                }],
-                            onClick: dateNextEvent
-                        }, [
-                            h('i', {
-                                class: 'vxe-icon-caret-right'
-                            })
-                        ]),
-                        multiple && supportMultiples
-                            ? h('span', {
-                                class: 'vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-confirm-btn'
-                            }, [
-                                h('button', {
-                                    class: 'vxe-date-picker--date-picker-confirm',
-                                    type: 'button',
-                                    onClick: dateConfirmEvent
-                                }, getI18n('vxe.button.confirm'))
-                            ])
-                            : null
-                    ])
-                ]),
-                h('div', {
-                    class: 'vxe-date-picker--date-picker-body'
-                }, renderDateTable())
-            ];
-        };
-        const renderTimePanel = () => {
-            const { datetimePanelValue } = reactData;
-            const dateTimeLabel = computeDateTimeLabel.value;
-            const hourList = computeHourList.value;
-            const hasTimeMinute = computeHasTimeMinute.value;
-            const minuteList = computeMinuteList.value;
-            const hasTimeSecond = computeHasTimeSecond.value;
-            const secondList = computeSecondList.value;
-            return [
-                h('div', {
-                    class: 'vxe-date-picker--time-picker-header'
-                }, [
-                    hasTimeMinute
-                        ? h('div', {
-                            class: 'vxe-date-picker--time-picker-title'
-                        }, dateTimeLabel)
-                        : createCommentVNode(),
-                    h('div', {
-                        class: 'vxe-date-picker--time-picker-btn'
-                    }, [
-                        h('button', {
-                            class: 'vxe-date-picker--time-picker-confirm',
-                            type: 'button',
-                            onClick: dateConfirmEvent
-                        }, getI18n('vxe.button.confirm'))
-                    ])
-                ]),
-                h('div', {
-                    ref: refInputTimeBody,
-                    class: 'vxe-date-picker--time-picker-body'
-                }, [
-                    h('ul', {
-                        class: 'vxe-date-picker--time-picker-hour-list'
-                    }, hourList.map((item, index) => {
-                        return h('li', {
-                            key: index,
-                            class: {
-                                'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
-                            },
-                            onClick: (evnt) => dateHourEvent(evnt, item)
-                        }, item.label);
-                    })),
-                    hasTimeMinute
-                        ? h('ul', {
-                            class: 'vxe-date-picker--time-picker-minute-list'
-                        }, minuteList.map((item, index) => {
-                            return h('li', {
-                                key: index,
-                                class: {
-                                    'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
-                                },
-                                onClick: (evnt) => dateMinuteEvent(evnt, item)
-                            }, item.label);
-                        }))
-                        : createCommentVNode(),
-                    hasTimeMinute && hasTimeSecond
-                        ? h('ul', {
-                            class: 'vxe-date-picker--time-picker-second-list'
-                        }, secondList.map((item, index) => {
-                            return h('li', {
-                                key: index,
-                                class: {
-                                    'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
-                                },
-                                onClick: (evnt) => dateSecondEvent(evnt, item)
-                            }, item.label);
-                        }))
-                        : createCommentVNode()
-                ])
-            ];
-        };
         const renderShortcutBtn = (pos, isVertical) => {
             const shortcutOpts = computeShortcutOpts.value;
-            const { options, position, align, mode } = shortcutOpts;
-            if (isEnableConf(shortcutOpts) && options && options.length && (position || 'left') === pos) {
+            const { position, align, mode } = shortcutOpts;
+            const shortcutList = computeShortcutList.value;
+            if (isEnableConf(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
                 return h('div', {
-                    class: `vxe-date-picker--panel-${pos}-wrapper`
+                    class: `vxe-date-picker--layout-${pos}-wrapper`
                 }, [
                     h(VxeButtonGroupComponent, {
-                        options,
+                        options: shortcutList,
                         mode,
                         align,
                         vertical: isVertical,
@@ -2062,49 +671,25 @@ export default defineComponent({
             }
             return renderEmptyElement($xeDatePicker);
         };
-        const renderPickerPanel = () => {
-            const { type } = props;
-            if (type === 'datetime') {
-                return h('div', {
-                    key: type,
-                    ref: refPanelWrapper,
-                    class: 'vxe-date-picker--panel-datetime-layout-wrapper'
-                }, [
-                    h('div', {
-                        class: 'vxe-date-picker--panel-datetime-left-wrapper'
-                    }, renderDatePanel()),
-                    h('div', {
-                        class: 'vxe-date-picker--panel-datetime-right-wrapper'
-                    }, renderTimePanel())
-                ]);
-            }
-            else if (type === 'time') {
-                return h('div', {
-                    key: type,
-                    ref: refPanelWrapper,
-                    class: 'vxe-date-picker--panel-wrapper'
-                }, renderTimePanel());
-            }
-            return h('div', {
-                key: type || 'default',
-                ref: refPanelWrapper,
-                class: 'vxe-date-picker--panel-wrapper'
-            }, renderDatePanel());
-        };
         const renderPanel = () => {
-            const { type } = props;
-            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData;
+            const { type, multiple, showClearButton, showConfirmButton } = props;
+            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle, inputValue } = reactData;
             const vSize = computeSize.value;
             const btnTransfer = computeBtnTransfer.value;
             const shortcutOpts = computeShortcutOpts.value;
-            const { options, position } = shortcutOpts;
+            const isClearable = computeIsClearable.value;
+            const isDateTimeType = computeIsDateTimeType.value;
+            const shortcutList = computeShortcutList.value;
+            const { position } = shortcutOpts;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             const topSlot = slots.top;
             const bottomSlot = slots.bottom;
             const leftSlot = slots.left;
             const rightSlot = slots.right;
-            const hasShortcutBtn = options && options.length;
+            const hasShortcutBtn = shortcutList.length > 0;
+            const showConfirmBtn = (showConfirmButton === null ? (isDateTimeType || multiple) : showConfirmButton);
+            const showClearBtn = (showClearButton === null ? (isClearable && showConfirmBtn && type !== 'time') : showClearButton);
             return h(Teleport, {
                 to: 'body',
                 disabled: btnTransfer ? !initialized : true
@@ -2126,49 +711,95 @@ export default defineComponent({
                 }, initialized && (visiblePanel || isAniVisible)
                     ? [
                         h('div', {
-                            class: 'vxe-date-picker--panel-layout-wrapper'
+                            ref: refPanelWrapper,
+                            class: ['vxe-date-picker--layout-all-wrapper', `type--${type}`, {
+                                    [`size--${vSize}`]: vSize
+                                }]
                         }, [
                             topSlot
                                 ? h('div', {
-                                    class: 'vxe-date-picker--panel-top-wrapper'
+                                    class: 'vxe-date-picker--layout-top-wrapper'
                                 }, topSlot({}))
                                 : renderShortcutBtn('top'),
                             h('div', {
-                                class: 'vxe-date-picker--panel-body-layout-wrapper'
+                                class: 'vxe-date-picker--layout-body-layout-wrapper'
                             }, [
                                 leftSlot
                                     ? h('div', {
-                                        class: 'vxe-date-picker--panel-left-wrapper'
+                                        class: 'vxe-date-picker--layout-left-wrapper'
                                     }, leftSlot({}))
                                     : renderShortcutBtn('left', true),
                                 h('div', {
-                                    class: 'vxe-date-picker--panel-body-content-wrapper'
+                                    class: 'vxe-date-picker--layout-body-content-wrapper'
                                 }, [
                                     headerSlot
                                         ? h('div', {
-                                            class: 'vxe-date-picker--panel-header-wrapper'
+                                            class: 'vxe-date-picker--layout-header-wrapper'
                                         }, headerSlot({}))
                                         : renderShortcutBtn('header'),
                                     h('div', {
-                                        class: 'vxe-date-picker--panel-body-wrapper'
+                                        class: 'vxe-date-picker--layout-body-wrapper'
                                     }, [
-                                        renderPickerPanel()
+                                        h(VxeDatePanelComponent, {
+                                            ref: refDatePanel,
+                                            modelValue: reactData.inputValue,
+                                            type: props.type,
+                                            className: props.className,
+                                            multiple: props.multiple,
+                                            limitCount: props.limitCount,
+                                            startDate: props.startDate,
+                                            endDate: props.endDate,
+                                            minDate: props.minDate,
+                                            maxDate: props.maxDate,
+                                            startDay: props.startDay,
+                                            labelFormat: props.labelFormat,
+                                            valueFormat: props.valueFormat,
+                                            festivalMethod: props.festivalMethod,
+                                            disabledMethod: props.disabledMethod,
+                                            selectDay: props.selectDay,
+                                            onChange: panelChangeEvent,
+                                            onDateToday: hidePanel
+                                        })
                                     ]),
-                                    footerSlot
-                                        ? h('div', {
-                                            class: 'vxe-date-picker--panel-footer-wrapper'
-                                        }, footerSlot({}))
-                                        : renderShortcutBtn('footer')
+                                    h('div', {
+                                        class: 'vxe-date-picker--layout-footer-wrapper'
+                                    }, [
+                                        h('div', {
+                                            class: 'vxe-date-picker--layout-footer-custom'
+                                        }, footerSlot ? footerSlot({}) : [renderShortcutBtn('footer')]),
+                                        showClearBtn || showConfirmBtn
+                                            ? h('div', {
+                                                class: 'vxe-date-picker--layout-footer-btns'
+                                            }, [
+                                                showClearBtn
+                                                    ? h(VxeButtonComponent, {
+                                                        size: 'mini',
+                                                        disabled: inputValue === '' || XEUtils.eqNull(inputValue),
+                                                        content: getI18n('vxe.button.clear'),
+                                                        onClick: clearValueEvent
+                                                    })
+                                                    : renderEmptyElement($xeDatePicker),
+                                                showConfirmBtn
+                                                    ? h(VxeButtonComponent, {
+                                                        size: 'mini',
+                                                        status: 'primary',
+                                                        content: getI18n('vxe.button.confirm'),
+                                                        onClick: confirmEvent
+                                                    })
+                                                    : renderEmptyElement($xeDatePicker)
+                                            ])
+                                            : renderEmptyElement($xeDatePicker)
+                                    ])
                                 ]),
                                 rightSlot
                                     ? h('div', {
-                                        class: 'vxe-date-picker--panel-right-wrapper'
+                                        class: 'vxe-date-picker--layout-right-wrapper'
                                     }, rightSlot({}))
                                     : renderShortcutBtn('right', true)
                             ]),
                             bottomSlot
                                 ? h('div', {
-                                    class: 'vxe-date-picker--panel-bottom-wrapper'
+                                    class: 'vxe-date-picker--layout-bottom-wrapper'
                                 }, bottomSlot({}))
                                 : renderShortcutBtn('bottom')
                         ])
@@ -2216,7 +847,7 @@ export default defineComponent({
                             class: getIcon().INPUT_CLEAR
                         })
                     ])
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeDatePicker),
                 renderExtraSuffixIcon(),
                 suffixSlot || suffixIcon
                     ? h('div', {
@@ -2229,7 +860,7 @@ export default defineComponent({
                                 class: suffixIcon
                             })
                         ])
-                    : createCommentVNode()
+                    : renderEmptyElement($xeDatePicker)
             ]);
         };
         const renderExtraSuffixIcon = () => {
@@ -2243,19 +874,19 @@ export default defineComponent({
             ]);
         };
         const renderVN = () => {
-            const { className, type, align, name, autocomplete, autoComplete } = props;
-            const { inputValue, visiblePanel, isActivated } = reactData;
+            const { className, type, name, autoComplete } = props;
+            const { inputValue, inputLabel, visiblePanel, isActivated } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const formReadonly = computeFormReadonly.value;
+            const panelLabel = computePanelLabel.value;
             if (formReadonly) {
                 return h('div', {
                     ref: refElem,
                     class: ['vxe-date-picker--readonly', `type--${type}`, className]
-                }, inputValue);
+                }, panelLabel);
             }
             const inputReadonly = computeInputReadonly.value;
-            const inputType = computeDatePickerType.value;
             const inpPlaceholder = computeInpPlaceholder.value;
             const isClearable = computeIsClearable.value;
             const prefix = renderPrefixIcon();
@@ -2264,7 +895,6 @@ export default defineComponent({
                 ref: refElem,
                 class: ['vxe-date-picker', `type--${type}`, className, {
                         [`size--${vSize}`]: vSize,
-                        [`is--${align}`]: align,
                         'is--prefix': !!prefix,
                         'is--suffix': !!suffix,
                         'is--visible': visiblePanel,
@@ -2274,20 +904,20 @@ export default defineComponent({
                     }],
                 spellcheck: false
             }, [
-                prefix || createCommentVNode(),
+                prefix || renderEmptyElement($xeDatePicker),
                 h('div', {
                     class: 'vxe-date-picker--wrapper'
                 }, [
                     h('input', {
                         ref: refInputTarget,
                         class: 'vxe-date-picker--inner',
-                        value: inputValue,
+                        value: inputLabel,
                         name,
-                        type: inputType,
+                        type: 'text',
                         placeholder: inpPlaceholder,
                         readonly: inputReadonly,
                         disabled: isDisabled,
-                        autocomplete: autoComplete || autocomplete,
+                        autocomplete: autoComplete,
                         onKeydown: keydownEvent,
                         onKeyup: keyupEvent,
                         onClick: clickEvent,
@@ -2297,48 +927,29 @@ export default defineComponent({
                         onBlur: blurEvent
                     })
                 ]),
-                suffix || createCommentVNode(),
+                suffix || renderEmptyElement($xeDatePicker),
                 // 下拉面板
                 renderPanel()
             ]);
         };
-        watch(() => props.modelValue, (val) => {
-            updateModelValue(val);
-            changeValue();
-        });
-        watch(() => props.type, () => {
-            // 切换类型是重置内置变量
-            Object.assign(reactData, {
-                inputValue: '',
-                datetimePanelValue: null,
-                datePanelValue: null,
-                datePanelLabel: '',
-                datePanelType: 'day',
-                selectMonth: null,
-                currentDate: null
-            });
-            initValue();
+        watch(computePanelLabel, (val) => {
+            reactData.inputLabel = val;
         });
-        watch(computeDateLabelFormat, () => {
-            const isDatePickerType = computeIsDatePickerType.value;
-            if (isDatePickerType) {
-                dateParseValue(reactData.datePanelValue);
-                reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-            }
+        watch(() => props.modelValue, () => {
+            updateModelValue();
         });
         nextTick(() => {
             globalEvents.on($xeDatePicker, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeDatePicker, 'mousedown', handleGlobalMousedownEvent);
-            globalEvents.on($xeDatePicker, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
         });
         onUnmounted(() => {
             globalEvents.off($xeDatePicker, 'mousewheel');
             globalEvents.off($xeDatePicker, 'mousedown');
-            globalEvents.off($xeDatePicker, 'keydown');
             globalEvents.off($xeDatePicker, 'blur');
         });
-        initValue();
+        updateModelValue();
+        provide('$xeDatePicker', $xeDatePicker);
         $xeDatePicker.renderVN = renderVN;
         return $xeDatePicker;
     },