vxe-pc-ui 4.5.36 → 4.6.0

package/packages/date-picker/src/date-picker.ts

@@ -1,13 +1,16 @@
-import { defineComponent, h, Teleport, ref, Ref, computed, reactive, inject, nextTick, watch, onUnmounted, PropType, createCommentVNode } from 'vue'
+import { defineComponent, h, Teleport, ref, Ref, computed, provide, reactive, inject, nextTick, watch, PropType, 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'
 
-import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeComponentStyleType, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeButtonGroupEvents } from '../../../types'
+import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeComponentStyleType, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineComponent({
@@ -36,12 +39,10 @@ export default defineComponent({
       default: null
     },
     placeholder: String as PropType<VxeDatePickerPropTypes.Placeholder>,
-    maxLength: [String, Number] as PropType<VxeDatePickerPropTypes.MaxLength>,
     autoComplete: {
       type: String as PropType<VxeDatePickerPropTypes.AutoComplete>,
       default: 'off'
     },
-    align: String as PropType<VxeDatePickerPropTypes.Align>,
     form: String as PropType<VxeDatePickerPropTypes.Form>,
     className: String as PropType<VxeDatePickerPropTypes.ClassName>,
     size: {
@@ -89,6 +90,18 @@ export default defineComponent({
       type: [String, Number] as PropType<VxeDatePickerPropTypes.SelectDay>,
       default: () => getConfig().datePicker.selectDay
     },
+    showClearButton: {
+      type: Boolean as PropType<VxeDatePickerPropTypes.ShowClearButton>,
+      default: () => getConfig().datePicker.showClearButton
+    },
+    showConfirmButton: {
+      type: Boolean as PropType<VxeDatePickerPropTypes.ShowConfirmButton>,
+      default: () => getConfig().datePicker.showConfirmButton
+    },
+    autoClose: {
+      type: Boolean as PropType<VxeDatePickerPropTypes.AutoClose>,
+      default: () => getConfig().datePicker.autoClose
+    },
 
     prefixIcon: String as PropType<VxeDatePickerPropTypes.PrefixIcon>,
     suffixIcon: String as PropType<VxeDatePickerPropTypes.SuffixIcon>,
@@ -101,11 +114,7 @@ export default defineComponent({
     shortcutConfig: Object as PropType<VxeDatePickerPropTypes.ShortcutConfig>,
 
     // 已废弃 startWeek，被 startDay 替换
-    startWeek: Number as PropType<VxeDatePickerPropTypes.StartDay>,
-    // 已废弃
-    maxlength: [String, Number] as PropType<VxeDatePickerPropTypes.MaxLength>,
-    // 已废弃
-    autocomplete: String as PropType<VxeDatePickerPropTypes.AutoComplete>
+    startWeek: Number as PropType<VxeDatePickerPropTypes.StartDay>
   },
   emits: [
     'update:modelValue',
@@ -146,26 +155,19 @@ export default defineComponent({
       panelPlacement: '',
       isActivated: false,
       inputValue: '',
-      datetimePanelValue: null,
-      datePanelValue: null,
-      datePanelLabel: '',
-      datePanelType: 'day',
-      selectMonth: null,
-      currentDate: null
+      inputLabel: ''
     })
 
     const internalData: DatePickerInternalData = {
-      yearSize: 12,
-      monthSize: 20,
-      quarterSize: 8,
       hpTimeout: undefined
     }
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refInputTarget = ref() as Ref<HTMLInputElement>
-    const refInputPanel = ref() as Ref<HTMLDivElement>
-    const refPanelWrapper = ref() as Ref<HTMLDivElement>
-    const refInputTimeBody = ref() as Ref<HTMLDivElement>
+    const refInputPanel = ref<HTMLDivElement>()
+    const refPanelWrapper = ref<HTMLDivElement>()
+
+    const refDatePanel = ref<VxeDatePanelConstructor>()
 
     const refMaps: DatePickerPrivateRef = {
       refElem,
@@ -181,8 +183,6 @@ export default defineComponent({
       getRefMaps: () => refMaps
     } as unknown as VxeDatePickerConstructor
 
-    let datePickerMethods = {} as DatePickerMethods
-
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
       if (transfer === null) {
@@ -233,58 +233,49 @@ export default defineComponent({
       return props.clearable
     })
 
-    const computeDateStartTime = computed(() => {
-      return props.startDate ? XEUtils.toStringDate(props.startDate) : null
-    })
-
-    const computeDateEndTime = computed(() => {
-      return props.endDate ? XEUtils.toStringDate(props.endDate) : null
-    })
-
-    const computeSupportMultiples = computed(() => {
-      return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1
+    const computeInputReadonly = computed(() => {
+      const { type, editable, multiple } = props
+      const formReadonly = computeFormReadonly.value
+      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter'
     })
 
-    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 computeInpPlaceholder = computed(() => {
+      const { placeholder } = props
+      if (placeholder) {
+        return getFuncText(placeholder)
       }
-      return []
+      const globalPlaceholder = getConfig().datePicker.placeholder
+      if (globalPlaceholder) {
+        return getFuncText(globalPlaceholder)
+      }
+      return getI18n('vxe.base.pleaseSelect')
     })
 
-    const computeDateMultipleValue = computed(() => {
-      const dateListValue = computeDateListValue.value
-      const dateValueFormat = computeDateValueFormat.value
-      return dateListValue.map(date => XEUtils.toDateString(date, dateValueFormat))
+    const computeInpImmediate = computed(() => {
+      const { immediate } = props
+      return immediate
     })
 
-    const computeDateMultipleLabel = computed(() => {
-      const dateListValue = computeDateListValue.value
-      const dateLabelFormat = computeDateLabelFormat.value
-      return dateListValue.map(date => XEUtils.toDateString(date, dateLabelFormat)).join(', ')
+    const computeShortcutOpts = computed(() => {
+      return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig)
     })
 
-    const computeLimitMaxCount = computed(() => {
-      return props.multiple ? XEUtils.toNumber(props.limitCount) : 0
+    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 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(() => {
@@ -301,360 +292,30 @@ 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: VxeDatePickerDefines.DateYearItem[] = []
-      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) as VxeDatePickerPropTypes.StartDay
-    })
-
-    const computeWeekDatas = computed(() => {
-      const weeks: number[] = []
-      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 { startDay } = props
+      return XEUtils.toNumber(startDay) as VxeDatePickerPropTypes.StartDay
     })
 
-    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: VxeDatePickerDefines.DateQuarterItem[] = []
-      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: VxeDatePickerDefines.DateMonthItem[] = []
-      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: VxeDatePickerDefines.DateDayItem[] = []
-      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 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: VxeDatePickerDefines.DateDayItem = {
-          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: VxeDatePickerDefines.DateHourMinuteSecondItem[] = []
-      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: VxeDatePickerDefines.DateHourMinuteSecondItem[] = []
-      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: string[] = 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: VxeDatePickerPropTypes.ModelValue | undefined) => {
-      const { isActivated, visiblePanel } = reactData
+    const updateModelValue = () => {
+      const { modelValue } = props
       let val: any = ''
       if (modelValue) {
         if (XEUtils.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
@@ -664,23 +325,6 @@ export default defineComponent({
         }
       }
       reactData.inputValue = val
-      if (isActivated && visiblePanel) {
-        dateOpenPanel()
-      }
-    }
-
-    const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => {
-      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: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'click' | 'focus' | 'blur' }) => {
@@ -688,10 +332,11 @@ export default defineComponent({
       dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
-    const handleChange = (value: string, evnt: Event | { type: string }) => {
+    const handleChange = (value: string | number | Date, evnt: Event | { type: string }) => {
+      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 as any)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
@@ -701,18 +346,10 @@ export default defineComponent({
     }
 
     const inputEvent = (evnt: Event & { type: 'input' }) => {
-      const isDatePickerType = computeIsDatePickerType.value
-      const inpImmediate = computeInpImmediate.value
       const inputElem = evnt.target as HTMLInputElement
       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: Event & { type: 'change' }) => {
@@ -752,661 +389,117 @@ export default defineComponent({
     const clearValueEvent = (evnt: Event, value: VxeDatePickerPropTypes.ModelValue) => {
       const isDatePickerType = computeIsDatePickerType.value
       if (isDatePickerType) {
-        hidePanel()
-      }
-      handleChange('', evnt)
-      dispatchEvent('clear', { value }, evnt)
-    }
-
-    const clickSuffixEvent = (evnt: Event) => {
-      const isDisabled = computeIsDisabled.value
-      if (!isDisabled) {
-        const { inputValue } = reactData
-        dispatchEvent('suffix-click', { value: inputValue }, evnt)
-      }
-    }
-
-    const dateParseValue = (value?: VxeDatePickerPropTypes.ModelValue) => {
-      const { type } = props
-      const dateLabelFormat = computeDateLabelFormat.value
-      const dateValueFormat = computeDateValueFormat.value
-      const firstDayOfWeek = computeFirstDayOfWeek.value
-      let dValue: Date | null = 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) as VxeDatePickerPropTypes.StartDay : 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: 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: Date, isReload?: boolean) => {
-      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) as VxeDatePickerPropTypes.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: Date[] = []
-          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: VxeDatePickerPropTypes.ModelValue = parseDate(inputValue, dateLabelFormat as string)
-          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: Event & { type: 'blur' }) => {
-      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: KeyboardEvent & { type: 'keydown' }) => {
-      triggerEvent(evnt)
-    }
-
-    const keyupEvent = (evnt: KeyboardEvent & { type: 'keyup' }) => {
-      triggerEvent(evnt)
-    }
-
-    // 日期
-    const dateMonthHandle = (date: Date, offsetMonth: number) => {
-      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: Event) => {
-      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: Event) => {
-      dateNowHandle()
-      dateChange(reactData.currentDate, true)
-      if (!props.multiple) {
-        hidePanel()
-      }
-      dispatchEvent('date-today', { type: props.type }, evnt)
-    }
-
-    const dateNextEvent = (evnt: Event) => {
-      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: { date: Date }) => {
-      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: 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: VxeDatePickerDefines.DateYearItem | VxeDatePickerDefines.DateQuarterItem | VxeDatePickerDefines.DateMonthItem | VxeDatePickerDefines.DateDayItem) => {
-      if (!isDateDisabled(item)) {
-        dateSelectItem(item.date)
-      }
-    }
-
-    const dateMoveDay = (offsetDay: Date) => {
-      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: Date) => {
-      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: Date) => {
-      if (!isDateDisabled({ date: offsetQuarter })) {
-        const quarterList = computeQuarterList.value
-        if (!quarterList.some((item) => XEUtils.isDateSame(item.date, offsetQuarter, 'yyyyq'))) {
-          dateCheckMonth(offsetQuarter)
-        }
-        dateParseValue(offsetQuarter)
+        hidePanel()
       }
+      handleChange('', evnt)
+      dispatchEvent('clear', { value }, evnt)
     }
 
-    const dateMoveMonth = (offsetMonth: Date) => {
-      if (!isDateDisabled({ date: offsetMonth })) {
-        const monthList = computeMonthList.value
-        if (!monthList.some((item) => XEUtils.isDateSame(item.date, offsetMonth, 'yyyyMM'))) {
-          dateCheckMonth(offsetMonth)
-        }
-        dateParseValue(offsetMonth)
+    const clickSuffixEvent = (evnt: Event) => {
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        const { inputValue } = reactData
+        dispatchEvent('suffix-click', { value: inputValue }, evnt)
       }
     }
 
-    const dateMouseenterEvent = (item: VxeDatePickerDefines.DateYearItem | VxeDatePickerDefines.DateQuarterItem | VxeDatePickerDefines.DateMonthItem | VxeDatePickerDefines.DateDayItem) => {
-      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)
-        }
+    const blurEvent = (evnt: Event & { type: 'blur' }) => {
+      const $datePanel = refDatePanel.value
+      const { inputValue } = reactData
+      const inpImmediate = computeInpImmediate.value
+      const value = inputValue
+      if (!inpImmediate) {
+        handleChange(value, evnt)
       }
-    }
-
-    const updateTimePos = (liElem: Element) => {
-      if (liElem) {
-        const height = (liElem as HTMLElement).offsetHeight
-        const ulElem = liElem.parentNode as HTMLElement
-        ulElem.scrollTop = (liElem as HTMLElement).offsetTop - height * 4
+      if (!reactData.visiblePanel) {
+        reactData.isActivated = false
+      }
+      if ($datePanel) {
+        $datePanel.checkValue(reactData.inputLabel)
+      }
+      dispatchEvent('blur', { value }, evnt)
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
       }
     }
 
-    const dateTimeChangeEvent = (evnt: Event) => {
-      const { datetimePanelValue } = reactData
-      reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : new Date()
-      updateTimePos(evnt.currentTarget as HTMLLIElement)
+    const keydownEvent = (evnt: KeyboardEvent & { type: 'keydown' }) => {
+      triggerEvent(evnt)
     }
 
-    const dateHourEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
-      const { datetimePanelValue } = reactData
-      if (datetimePanelValue) {
-        datetimePanelValue.setHours(item.value)
-      }
-      dateTimeChangeEvent(evnt)
+    const keyupEvent = (evnt: KeyboardEvent & { type: 'keyup' }) => {
+      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: Date[] = []
-            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: MouseEvent) => {
+      const $datePanel = refDatePanel.value
+      if ($datePanel) {
+        $datePanel.confirmByEvent(evnt)
       }
       hidePanel()
     }
 
-    const dateMinuteEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
-      const { datetimePanelValue } = reactData
-      if (datetimePanelValue) {
-        datetimePanelValue.setMinutes(item.value)
-      }
-      dateTimeChangeEvent(evnt)
-    }
-
-    const dateSecondEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => {
-      const { datetimePanelValue } = reactData
-      if (datetimePanelValue) {
-        datetimePanelValue.setSeconds(item.value)
+    const panelChangeEvent = (params: any) => {
+      const { multiple } = props
+      const { value, $event } = params
+      const isDateTimeType = computeIsDateTimeType.value
+      handleChange(value, $event)
+      if (!multiple && !isDateTimeType) {
+        hidePanel()
       }
-      dateTimeChangeEvent(evnt)
     }
 
-    const dateOffsetEvent = (evnt: KeyboardEvent) => {
-      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)
-          }
-          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() as VxeDatePickerPropTypes.StartDay)
-          } else if (isRightArrow) {
-            offsetDay = XEUtils.getWhatDay(offsetDay, 1)
-          } else if (isDwArrow) {
-            offsetDay = XEUtils.getWhatWeek(offsetDay, 1, offsetDay.getDay() as VxeDatePickerPropTypes.StartDay)
+    // 全局事件
+    const handleGlobalMousedownEvent = (evnt: Event) => {
+      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)
         }
       }
     }
 
-    const datePgOffsetEvent = (evnt: KeyboardEvent) => {
-      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 handleGlobalMousewheelEvent = (evnt: Event) => {
+      const { visiblePanel } = reactData
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        if (visiblePanel) {
+          const panelWrapperElem = refPanelWrapper.value
+          if (getEventTargetNode(evnt, panelWrapperElem).flag) {
+            updatePlacement()
+          } else {
+            hidePanel()
+          }
         }
       }
     }
 
-    const dateOpenPanel = () => {
-      const { type } = props
-      const isDateTimeType = computeIsDateTimeType.value
-      const dateValue = computeDateValue.value
-      if (['year', 'quarter', 'month', 'week'].indexOf(type) > -1) {
-        reactData.datePanelType = type as 'year' | 'quarter' | 'month' | 'week'
-      } 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)
-          })
-        })
+    const handleGlobalBlurEvent = () => {
+      const $datePanel = refDatePanel.value
+      const { isActivated, visiblePanel } = reactData
+      if (visiblePanel) {
+        hidePanel()
+        if ($datePanel) {
+          $datePanel.checkValue(reactData.inputLabel)
+        }
+      } else if (isActivated) {
+        if ($datePanel) {
+          $datePanel.checkValue(reactData.inputLabel)
+        }
       }
     }
 
-    // 日期
-
     // 弹出面板
     const updateZindex = () => {
       if (reactData.panelIndex < getLastZIndex()) {
@@ -1490,7 +583,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
@@ -1501,9 +593,6 @@ export default defineComponent({
         }
         reactData.isActivated = true
         reactData.isAniVisible = true
-        if (isDatePickerType) {
-          dateOpenPanel()
-        }
         setTimeout(() => {
           reactData.visiblePanel = true
         }, 10)
@@ -1526,143 +615,72 @@ export default defineComponent({
     }
 
     const handleShortcutEvent: VxeButtonGroupEvents.Click = ({ option, $event }) => {
+      const { type } = props
+      const { inputValue } = reactData
       const shortcutOpts = computeShortcutOpts.value
       const { autoClose } = shortcutOpts
-      const clickMethod = (option as VxeDatePickerDefines.ShortcutOption).clickMethod || shortcutOpts.clickMethod
+      const { code, clickMethod } = option as VxeDatePickerDefines.ShortcutOption
+      let value = inputValue
       const shortcutParams = {
         $datePicker: $xeDatePicker,
-        option: option as VxeDatePickerDefines.ShortcutOption
-      }
-      if (clickMethod) {
-        clickMethod(shortcutParams)
-      }
-      if (autoClose) {
-        hidePanel()
-      }
-      dispatchEvent('shortcut-click', shortcutParams, $event)
-    }
-
-    // 全局事件
-    const handleGlobalMousedownEvent = (evnt: Event) => {
-      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: KeyboardEvent) => {
-      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)
-            }
-          }
-        } else if (isPgUp || isPgDn) {
-          if (isDatePickerType) {
-            if (isActivated) {
-              datePgOffsetEvent(evnt)
+        option,
+        value,
+        code
+      }
+      if (!clickMethod && code) {
+        const gCommandOpts = commands.get(code)
+        const dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null
+        if (dpCommandMethod) {
+          dpCommandMethod(shortcutParams)
+        } 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
             }
+            default:
+              errLog('vxe.error.notCommands', [code])
+              break
           }
         }
-        if (isTab || isEsc) {
-          if (visiblePanel) {
-            hidePanel()
-          }
-        } else if (isDel && clearable) {
-          if (isActivated) {
-            clearValueEvent(evnt, null)
-          }
-        }
-      }
-    }
-
-    const handleGlobalMousewheelEvent = (evnt: Event) => {
-      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: ValueOf<VxeDatePickerEmits>, params: Record<string, any>, evnt: Event | null) => {
       emit(type, createEvent(evnt, { $datePicker: $xeDatePicker }, params))
     }
 
-    datePickerMethods = {
+    const datePickerMethods: 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
@@ -1688,435 +706,16 @@ export default defineComponent({
 
     Object.assign($xeDatePicker, datePickerMethods)
 
-    const renderDateLabel = (item: VxeDatePickerDefines.DateYearItem | VxeDatePickerDefines.DateQuarterItem | VxeDatePickerDefines.DateMonthItem | VxeDatePickerDefines.DateDayItem, label: string | number) => {
-      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: MouseEvent) => 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: MouseEvent) => 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: MouseEvent) => dateSecondEvent(evnt, item)
-              }, item.label)
-            }))
-            : createCommentVNode()
-        ])
-      ]
-    }
-
     const renderShortcutBtn = (pos: 'top' | 'bottom' | 'left' | 'right' | 'header' | 'footer', isVertical?: boolean) => {
       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,
@@ -2127,49 +726,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
@@ -2191,49 +766,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')
               ])
@@ -2283,7 +904,7 @@ export default defineComponent({
               class: getIcon().INPUT_CLEAR
             })
           ])
-          : createCommentVNode(),
+          : renderEmptyElement($xeDatePicker),
         renderExtraSuffixIcon(),
         suffixSlot || suffixIcon
           ? h('div', {
@@ -2296,7 +917,7 @@ export default defineComponent({
                   class: suffixIcon
                 })
               ])
-          : createCommentVNode()
+          : renderEmptyElement($xeDatePicker)
       ])
     }
 
@@ -2312,19 +933,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()
@@ -2333,7 +954,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,
@@ -2343,20 +963,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,
@@ -2366,54 +986,35 @@ 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