vxe-pc-ui 4.20.34 → 4.20.35

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

@@ -7,2057 +7,2060 @@ import { createComponentLog } from "../../ui/src/log";
 import VxeScrollbarComponent from "../../scrollbar";
 const { getConfig, getI18n, createEvent, useFns, renderEmptyElement } = VxeUI;
 const { errLog } = createComponentLog("date-panel");
-var date_panel_default = defineVxeComponent({
-  name: "VxeDatePanel",
-  props: {
-    modelValue: [String, Number, Date, Array],
-    type: {
-      type: String,
-      default: "date"
-    },
-    className: String,
-    cellClassName: [String, Function],
-    size: {
-      type: String,
-      default: () => getConfig().datePanel.size || getConfig().size
-    },
-    multiple: Boolean,
-    limitCount: {
-      type: [String, Number],
-      default: () => getConfig().datePanel.limitCount
-    },
-    // date、week、month、quarter、year
-    startDate: {
-      type: [String, Number, Date],
-      default: () => getConfig().datePanel.startDate
-    },
-    endDate: {
-      type: [String, Number, Date],
-      default: () => getConfig().datePanel.endDate
-    },
-    defaultMode: String,
-    defaultDate: [String, Number, Date],
-    defaultTime: [String, Number, Date],
-    minDate: [String, Number, Date],
-    maxDate: [String, Number, Date],
-    startDay: {
-      type: [String, Number],
-      default: () => getConfig().datePanel.startDay
+var date_panel_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeDatePanel",
+    props: {
+      modelValue: [String, Number, Date, Array],
+      type: {
+        type: String,
+        default: "date"
+      },
+      className: String,
+      cellClassName: [String, Function],
+      size: {
+        type: String,
+        default: () => getConfig().datePanel.size || getConfig().size
+      },
+      multiple: Boolean,
+      limitCount: {
+        type: [String, Number],
+        default: () => getConfig().datePanel.limitCount
+      },
+      // date、week、month、quarter、year
+      startDate: {
+        type: [String, Number, Date],
+        default: () => getConfig().datePanel.startDate
+      },
+      endDate: {
+        type: [String, Number, Date],
+        default: () => getConfig().datePanel.endDate
+      },
+      defaultMode: String,
+      defaultDate: [String, Number, Date],
+      defaultTime: [String, Number, Date],
+      minDate: [String, Number, Date],
+      maxDate: [String, Number, Date],
+      startDay: {
+        type: [String, Number],
+        default: () => getConfig().datePanel.startDay
+      },
+      labelFormat: String,
+      valueFormat: String,
+      timeFormat: String,
+      valueSort: Boolean,
+      festivalMethod: Function,
+      disabledMethod: Function,
+      timeConfig: Object,
+      // week
+      selectDay: {
+        type: [String, Number],
+        default: () => getConfig().datePanel.selectDay
+      }
     },
-    labelFormat: String,
-    valueFormat: String,
-    timeFormat: String,
-    valueSort: Boolean,
-    festivalMethod: Function,
-    disabledMethod: Function,
-    timeConfig: Object,
-    // week
-    selectDay: {
-      type: [String, Number],
-      default: () => getConfig().datePanel.selectDay
-    }
-  },
-  emits: ["update:modelValue", "change", "click", "clear", "date-prev", "date-today", "date-next", "confirm", "revert"],
-  setup(props, context) {
-    const { emit } = context;
-    const xID = XEUtils.uniqueId();
-    const { computeSize } = useFns.useSize(props);
-    const reactData = reactive({
-      visiblePanel: false,
-      isAniVisible: false,
-      isActivated: false,
-      inputValue: "",
-      inputLabel: "",
-      datetimePanelValue: null,
-      datePanelValue: null,
-      datePanelLabel: "",
-      datePanelType: "day",
-      selectMonth: null,
-      currentDate: null
-    });
-    const internalData = {
-      yearSize: 16,
-      monthSize: 12,
-      quarterSize: 4,
-      hpTimeout: void 0
-    };
-    const defaultFuncProps = {
-      festivalMethod: getConfig().datePanel.festivalMethod,
-      disabledMethod: getConfig().datePanel.disabledMethod
-    };
-    const refElem = ref();
-    const refPanelWrapper = ref();
-    const refInputTimeBody = ref();
-    const computeIsTimeType = computed(() => {
-      const { type } = props;
-      return type === "time";
-    });
-    const computeIsTimeOrDateTimeType = computed(() => {
-      const { type } = props;
-      const isTimeType = computeIsTimeType.value;
-      return isTimeType || type === "datetime";
-    });
-    const computeIsDatePanelType = computed(() => {
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
-      return isTimeOrDateTimeType || ["date", "week", "month", "quarter", "year"].indexOf(props.type) > -1;
-    });
-    const computeDateStartDate = computed(() => {
-      return props.startDate ? XEUtils.toStringDate(props.startDate) : null;
-    });
-    const computeDateEndDate = computed(() => {
-      return props.endDate ? XEUtils.toStringDate(props.endDate) : null;
-    });
-    const computeDateListValue = computed(() => {
-      const { modelValue, valueFormat } = props;
-      const isDatePanelType = computeIsDatePanelType.value;
-      const dateValueFormat = computeDateValueFormat.value;
-      const restList = [];
-      if (modelValue && isDatePanelType) {
-        ;
-        (XEUtils.isArray(modelValue) ? modelValue : XEUtils.toValueString(modelValue).split(",")).forEach((val) => {
-          let strVal = val;
-          if (val) {
-            if (valueFormat === "timestamp") {
-              if (XEUtils.isString(val) && /^\d+$/.test(val)) {
-                strVal = Number(strVal);
+    emits: ["update:modelValue", "change", "click", "clear", "date-prev", "date-today", "date-next", "confirm", "revert"],
+    setup(props, context) {
+      const { emit } = context;
+      const xID = XEUtils.uniqueId();
+      const { computeSize } = useFns.useSize(props);
+      const reactData = reactive({
+        visiblePanel: false,
+        isAniVisible: false,
+        isActivated: false,
+        inputValue: "",
+        inputLabel: "",
+        datetimePanelValue: null,
+        datePanelValue: null,
+        datePanelLabel: "",
+        datePanelType: "day",
+        selectMonth: null,
+        currentDate: null
+      });
+      const internalData = {
+        yearSize: 16,
+        monthSize: 12,
+        quarterSize: 4,
+        hpTimeout: void 0
+      };
+      const defaultFuncProps = {
+        festivalMethod: getConfig().datePanel.festivalMethod,
+        disabledMethod: getConfig().datePanel.disabledMethod
+      };
+      const refElem = ref();
+      const refPanelWrapper = ref();
+      const refInputTimeBody = ref();
+      const computeIsTimeType = computed(() => {
+        const { type } = props;
+        return type === "time";
+      });
+      const computeIsTimeOrDateTimeType = computed(() => {
+        const { type } = props;
+        const isTimeType = computeIsTimeType.value;
+        return isTimeType || type === "datetime";
+      });
+      const computeIsDatePanelType = computed(() => {
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+        return isTimeOrDateTimeType || ["date", "week", "month", "quarter", "year"].indexOf(props.type) > -1;
+      });
+      const computeDateStartDate = computed(() => {
+        return props.startDate ? XEUtils.toStringDate(props.startDate) : null;
+      });
+      const computeDateEndDate = computed(() => {
+        return props.endDate ? XEUtils.toStringDate(props.endDate) : null;
+      });
+      const computeDateListValue = computed(() => {
+        const { modelValue, valueFormat } = props;
+        const isDatePanelType = computeIsDatePanelType.value;
+        const dateValueFormat = computeDateValueFormat.value;
+        const restList = [];
+        if (modelValue && isDatePanelType) {
+          ;
+          (XEUtils.isArray(modelValue) ? modelValue : XEUtils.toValueString(modelValue).split(",")).forEach((val) => {
+            let strVal = val;
+            if (val) {
+              if (valueFormat === "timestamp") {
+                if (XEUtils.isString(val) && /^\d+$/.test(val)) {
+                  strVal = Number(strVal);
+                }
               }
+              const date = parseDate(strVal, dateValueFormat);
+              restList.push(date);
             }
-            const date = parseDate(strVal, dateValueFormat);
-            restList.push(date);
+          });
+        }
+        return restList;
+      });
+      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 computeTimeOpts = computed(() => {
+        return Object.assign({}, getConfig().datePanel.timeConfig, props.timeConfig);
+      });
+      const computeDateValueFormat = computed(() => {
+        const { type, valueFormat } = props;
+        return handleValueFormat(type, valueFormat);
+      });
+      const computeDateValue = computed(() => {
+        const { modelValue, defaultMode } = props;
+        const isDatePanelType = computeIsDatePanelType.value;
+        const dateValueFormat = computeDateValueFormat.value;
+        let val = null;
+        if (modelValue && isDatePanelType) {
+          const vals = XEUtils.isString(modelValue) ? modelValue.split(",") : modelValue;
+          const currVal = defaultMode === "last" ? XEUtils.last(vals) : XEUtils.first(vals);
+          const date = parseDate(currVal, dateValueFormat);
+          if (XEUtils.isValidDate(date)) {
+            val = date;
           }
-        });
-      }
-      return restList;
-    });
-    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 computeTimeOpts = computed(() => {
-      return Object.assign({}, getConfig().datePanel.timeConfig, props.timeConfig);
-    });
-    const computeDateValueFormat = computed(() => {
-      const { type, valueFormat } = props;
-      return handleValueFormat(type, valueFormat);
-    });
-    const computeDateValue = computed(() => {
-      const { modelValue, defaultMode } = props;
-      const isDatePanelType = computeIsDatePanelType.value;
-      const dateValueFormat = computeDateValueFormat.value;
-      let val = null;
-      if (modelValue && isDatePanelType) {
-        const vals = XEUtils.isString(modelValue) ? modelValue.split(",") : modelValue;
-        const currVal = defaultMode === "last" ? XEUtils.last(vals) : XEUtils.first(vals);
-        const date = parseDate(currVal, dateValueFormat);
-        if (XEUtils.isValidDate(date)) {
-          val = date;
         }
-      }
-      return val;
-    });
-    const computeIsDisabledPrevDateBtn = computed(() => {
-      const dateStartTime = computeDateStartDate.value;
-      const { selectMonth } = reactData;
-      if (selectMonth && dateStartTime) {
-        return selectMonth <= dateStartTime;
-      }
-      return false;
-    });
-    const computeIsDisabledNextDateBtn = computed(() => {
-      const dateEndTime = computeDateEndDate.value;
-      const { selectMonth } = reactData;
-      if (selectMonth && dateEndTime) {
-        return XEUtils.getWhatMonth(selectMonth, 0, "last") >= dateEndTime;
-      }
-      return false;
-    });
-    const computeDateTimeLabel = computed(() => {
-      const { datetimePanelValue } = reactData;
-      const hasTimeSecond = computeHasTimeSecond.value;
-      const hasTimeMinute = computeHasTimeMinute.value;
-      if (datetimePanelValue) {
-        return XEUtils.toDateString(datetimePanelValue, hasTimeMinute && hasTimeSecond ? "HH:mm:ss" : hasTimeMinute ? "HH:mm" : "HH");
-      }
-      return "";
-    });
-    const computeDateHMSTime = computed(() => {
-      const dateValue = computeDateValue.value;
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
-      return dateValue && isTimeOrDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1e3 : 0;
-    });
-    const computeDateLabelFormat = computed(() => {
-      const { labelFormat } = props;
-      const isDatePanelType = computeIsDatePanelType.value;
-      if (isDatePanelType) {
-        return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
-      }
-      return "";
-    });
-    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 = 0; index < yearSize; 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 val;
+      });
+      const computeIsDisabledPrevDateBtn = computed(() => {
+        const dateStartTime = computeDateStartDate.value;
+        const { selectMonth } = reactData;
+        if (selectMonth && dateStartTime) {
+          return selectMonth <= dateStartTime;
         }
-      }
-      return years;
-    });
-    const computeSelectDatePanelObj = computed(() => {
-      const isDatePanelType = computeIsDatePanelType.value;
-      let y = "";
-      let m = "";
-      if (isDatePanelType) {
-        const { datePanelType, selectMonth } = reactData;
-        const yearList = computeYearList.value;
-        let year = "";
-        let month;
-        if (selectMonth) {
-          year = selectMonth.getFullYear();
-          month = selectMonth.getMonth() + 1;
+        return false;
+      });
+      const computeIsDisabledNextDateBtn = computed(() => {
+        const dateEndTime = computeDateEndDate.value;
+        const { selectMonth } = reactData;
+        if (selectMonth && dateEndTime) {
+          return XEUtils.getWhatMonth(selectMonth, 0, "last") >= dateEndTime;
         }
-        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 false;
+      });
+      const computeDateTimeLabel = computed(() => {
+        const { datetimePanelValue } = reactData;
+        const hasTimeSecond = computeHasTimeSecond.value;
+        const hasTimeMinute = computeHasTimeMinute.value;
+        if (datetimePanelValue) {
+          return XEUtils.toDateString(datetimePanelValue, hasTimeMinute && hasTimeSecond ? "HH:mm:ss" : hasTimeMinute ? "HH:mm" : "HH");
         }
-      }
-      return {
-        y,
-        m
-      };
-    });
-    const computeFirstDayOfWeek = computed(() => {
-      const { startDay } = props;
-      return XEUtils.toNumber(startDay);
-    });
-    const computeWeekDatas = computed(() => {
-      const weeks = [];
-      const isDatePanelType = computeIsDatePanelType.value;
-      if (isDatePanelType) {
-        let sWeek = computeFirstDayOfWeek.value;
-        weeks.push(sWeek);
-        for (let index = 0; index < 6; index++) {
-          if (sWeek >= 6) {
-            sWeek = 0;
+        return "";
+      });
+      const computeDateHMSTime = computed(() => {
+        const dateValue = computeDateValue.value;
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+        return dateValue && isTimeOrDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1e3 : 0;
+      });
+      const computeDateLabelFormat = computed(() => {
+        const { labelFormat } = props;
+        const isDatePanelType = computeIsDatePanelType.value;
+        if (isDatePanelType) {
+          return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
+        }
+        return "";
+      });
+      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 = 0; index < yearSize; 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 isDatePanelType = computeIsDatePanelType.value;
+        let y = "";
+        let m = "";
+        if (isDatePanelType) {
+          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 {
-            sWeek++;
+            y = getI18n("vxe.datePicker.yearTitle", [year]);
+            m = month ? getI18n(`vxe.input.date.m${month}`) : "-";
           }
+        }
+        return {
+          y,
+          m
+        };
+      });
+      const computeFirstDayOfWeek = computed(() => {
+        const { startDay } = props;
+        return XEUtils.toNumber(startDay);
+      });
+      const computeWeekDatas = computed(() => {
+        const weeks = [];
+        const isDatePanelType = computeIsDatePanelType.value;
+        if (isDatePanelType) {
+          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 isDatePanelType = computeIsDatePanelType.value;
-      if (isDatePanelType) {
-        const weekDatas = computeWeekDatas.value;
-        return weekDatas.map((day) => {
-          return {
-            value: day,
-            label: getI18n(`vxe.input.date.weeks.w${day}`)
-          };
-        });
-      }
-      return [];
-    });
-    const computeWeekHeaders = computed(() => {
-      const isDatePanelType = computeIsDatePanelType.value;
-      if (isDatePanelType) {
-        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 = 0; index < quarterSize; 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 weeks;
+      });
+      const computeDateHeaders = computed(() => {
+        const isDatePanelType = computeIsDatePanelType.value;
+        if (isDatePanelType) {
+          const weekDatas = computeWeekDatas.value;
+          return weekDatas.map((day) => {
+            return {
+              value: day,
+              label: getI18n(`vxe.input.date.weeks.w${day}`)
+            };
           });
         }
-      }
-      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 = 0; index < monthSize; 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 [];
+      });
+      const computeWeekHeaders = computed(() => {
+        const isDatePanelType = computeIsDatePanelType.value;
+        if (isDatePanelType) {
+          const dateHeaders = computeDateHeaders.value;
+          return [{ label: getI18n("vxe.input.date.weeks.w") }].concat(dateHeaders);
         }
-      }
-      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 [];
+      });
+      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 = 0; index < quarterSize; 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 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 = {
-          date: firstItem.date,
-          isWeekNumber: true,
-          isPrev: false,
-          isCurrent: false,
-          isNow: false,
-          isNext: false,
-          label: XEUtils.getYearWeek(firstItem.date, firstDayOfWeek)
-        };
-        return [item].concat(list);
+        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 = 0; index < monthSize; 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 computeHourList = computed(() => {
-      const timeOpts = computeTimeOpts.value;
-      const { hours: hourOptions, hourDisabledMethod } = timeOpts;
-      const list = [];
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
-      if (isTimeOrDateTimeType) {
-        if (hourOptions && hourOptions.length) {
-          hourOptions.forEach((item) => {
-            if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
-              const hour = XEUtils.toNumber(item);
+      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 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 timeOpts = computeTimeOpts.value;
+        const { hours: hourOptions, hourDisabledMethod } = timeOpts;
+        const list = [];
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+        if (isTimeOrDateTimeType) {
+          if (hourOptions && hourOptions.length) {
+            hourOptions.forEach((item) => {
+              if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
+                const hour = XEUtils.toNumber(item);
+                list.push({
+                  value: hour,
+                  label: ("" + hour).padStart(2, "0"),
+                  disabled: !!(hourDisabledMethod && hourDisabledMethod({ hour }))
+                });
+              } else if (item) {
+                const hour = XEUtils.toNumber(item.value);
+                list.push({
+                  value: hour,
+                  label: ("" + (item.label || hour)).padStart(2, "0"),
+                  disabled: XEUtils.isBoolean(item.disabled) ? item.disabled : !!(hourDisabledMethod && hourDisabledMethod({ hour }))
+                });
+              }
+            });
+          } else {
+            for (let index = 0; index < 24; index++) {
+              const hour = index;
               list.push({
                 value: hour,
                 label: ("" + hour).padStart(2, "0"),
                 disabled: !!(hourDisabledMethod && hourDisabledMethod({ hour }))
               });
-            } else if (item) {
-              const hour = XEUtils.toNumber(item.value);
-              list.push({
-                value: hour,
-                label: ("" + (item.label || hour)).padStart(2, "0"),
-                disabled: XEUtils.isBoolean(item.disabled) ? item.disabled : !!(hourDisabledMethod && hourDisabledMethod({ hour }))
-              });
             }
-          });
-        } else {
-          for (let index = 0; index < 24; index++) {
-            const hour = index;
-            list.push({
-              value: hour,
-              label: ("" + hour).padStart(2, "0"),
-              disabled: !!(hourDisabledMethod && hourDisabledMethod({ hour }))
-            });
           }
         }
-      }
-      return list;
-    });
-    const computeMinuteList = computed(() => {
-      const timeOpts = computeTimeOpts.value;
-      const { minutes: minuteOptions, minuteDisabledMethod } = timeOpts;
-      const list = [];
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
-      if (isTimeOrDateTimeType) {
-        if (minuteOptions && minuteOptions.length) {
-          minuteOptions.forEach((item) => {
-            if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
-              const minute = XEUtils.toNumber(item);
+        return list;
+      });
+      const computeMinuteList = computed(() => {
+        const timeOpts = computeTimeOpts.value;
+        const { minutes: minuteOptions, minuteDisabledMethod } = timeOpts;
+        const list = [];
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+        if (isTimeOrDateTimeType) {
+          if (minuteOptions && minuteOptions.length) {
+            minuteOptions.forEach((item) => {
+              if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
+                const minute = XEUtils.toNumber(item);
+                list.push({
+                  value: minute,
+                  label: ("" + minute).padStart(2, "0"),
+                  disabled: !!(minuteDisabledMethod && minuteDisabledMethod({ minute }))
+                });
+              } else if (item) {
+                const minute = XEUtils.toNumber(item.value);
+                list.push({
+                  value: minute,
+                  label: ("" + (item.label || minute)).padStart(2, "0"),
+                  disabled: XEUtils.isBoolean(item.disabled) ? item.disabled : !!(minuteDisabledMethod && minuteDisabledMethod({ minute }))
+                });
+              }
+            });
+          } else {
+            for (let index = 0; index < 60; index++) {
+              const minute = index;
               list.push({
                 value: minute,
                 label: ("" + minute).padStart(2, "0"),
                 disabled: !!(minuteDisabledMethod && minuteDisabledMethod({ minute }))
               });
-            } else if (item) {
-              const minute = XEUtils.toNumber(item.value);
-              list.push({
-                value: minute,
-                label: ("" + (item.label || minute)).padStart(2, "0"),
-                disabled: XEUtils.isBoolean(item.disabled) ? item.disabled : !!(minuteDisabledMethod && minuteDisabledMethod({ minute }))
-              });
             }
-          });
-        } else {
-          for (let index = 0; index < 60; index++) {
-            const minute = index;
-            list.push({
-              value: minute,
-              label: ("" + minute).padStart(2, "0"),
-              disabled: !!(minuteDisabledMethod && minuteDisabledMethod({ minute }))
-            });
           }
         }
-      }
-      return list;
-    });
-    const computeHasTimeMinute = computed(() => {
-      const { timeFormat } = props;
-      const dateValueFormat = computeDateValueFormat.value;
-      return !/HH/.test(timeFormat || dateValueFormat) || /mm/.test(timeFormat || dateValueFormat);
-    });
-    const computeHasTimeSecond = computed(() => {
-      const { timeFormat } = props;
-      const dateValueFormat = computeDateValueFormat.value;
-      return !/HH/.test(timeFormat || dateValueFormat) || /ss/.test(timeFormat || dateValueFormat);
-    });
-    const computeSecondList = computed(() => {
-      const timeOpts = computeTimeOpts.value;
-      const { seconds: secondOptions, secondDisabledMethod } = timeOpts;
-      const list = [];
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
-      if (isTimeOrDateTimeType) {
-        if (secondOptions && secondOptions.length) {
-          secondOptions.forEach((item) => {
-            if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
-              const second = XEUtils.toNumber(item);
+        return list;
+      });
+      const computeHasTimeMinute = computed(() => {
+        const { timeFormat } = props;
+        const dateValueFormat = computeDateValueFormat.value;
+        return !/HH/.test(timeFormat || dateValueFormat) || /mm/.test(timeFormat || dateValueFormat);
+      });
+      const computeHasTimeSecond = computed(() => {
+        const { timeFormat } = props;
+        const dateValueFormat = computeDateValueFormat.value;
+        return !/HH/.test(timeFormat || dateValueFormat) || /ss/.test(timeFormat || dateValueFormat);
+      });
+      const computeSecondList = computed(() => {
+        const timeOpts = computeTimeOpts.value;
+        const { seconds: secondOptions, secondDisabledMethod } = timeOpts;
+        const list = [];
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+        if (isTimeOrDateTimeType) {
+          if (secondOptions && secondOptions.length) {
+            secondOptions.forEach((item) => {
+              if (XEUtils.isNumber(item) || XEUtils.isString(item)) {
+                const second = XEUtils.toNumber(item);
+                list.push({
+                  value: second,
+                  label: ("" + second).padStart(2, "0"),
+                  disabled: !!(secondDisabledMethod && secondDisabledMethod({ second }))
+                });
+              } else if (item) {
+                const second = XEUtils.toNumber(item.value);
+                list.push({
+                  value: second,
+                  label: ("" + (item.label || second)).padStart(2, "0"),
+                  disabled: XEUtils.isBoolean(item.disabled) ? item.disabled : !!(secondDisabledMethod && secondDisabledMethod({ second }))
+                });
+              }
+            });
+          } else {
+            for (let index = 0; index < 60; index++) {
+              const second = index;
               list.push({
                 value: second,
                 label: ("" + second).padStart(2, "0"),
                 disabled: !!(secondDisabledMethod && secondDisabledMethod({ second }))
               });
-            } else if (item) {
-              const second = XEUtils.toNumber(item.value);
-              list.push({
-                value: second,
-                label: ("" + (item.label || second)).padStart(2, "0"),
-                disabled: XEUtils.isBoolean(item.disabled) ? item.disabled : !!(secondDisabledMethod && secondDisabledMethod({ second }))
-              });
             }
-          });
-        } else {
-          for (let index = 0; index < 60; index++) {
-            const second = index;
-            list.push({
-              value: second,
-              label: ("" + second).padStart(2, "0"),
-              disabled: !!(secondDisabledMethod && secondDisabledMethod({ second }))
-            });
           }
         }
-      }
-      return list;
-    });
-    const refMaps = {
-      refElem
-    };
-    const computeMaps = {
-      computeSize,
-      computeYearList
-    };
-    const $xeDatePanel = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const updateModelValue = (modelValue) => {
-      const { type } = props;
-      const dateValueFormat = computeDateValueFormat.value;
-      const inpDate = parseDateValue(modelValue, type, { valueFormat: dateValueFormat });
-      reactData.inputValue = inpDate;
-      reactData.inputLabel = inpDate;
-      dateOpenPanel();
-    };
-    const parseDate = (value, format) => {
-      const { type, multiple } = props;
-      if (type === "time") {
-        return toStringTimeDate(XEUtils.isArray(value) ? XEUtils.last(value) : value);
-      }
-      if (XEUtils.isArray(value)) {
-        return XEUtils.toStringDate(XEUtils.last(value), format);
-      }
-      if (XEUtils.isString(value)) {
-        return XEUtils.toStringDate(multiple ? XEUtils.last(value.split(",")) : value, format);
-      }
-      return XEUtils.toStringDate(value, format);
-    };
-    const dateRevert = () => {
-      const label = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-      reactData.inputLabel = label;
-      dispatchEvent("revert", { label }, null);
-    };
-    const afterCheckValue = (inpVal) => {
-      const { type } = props;
-      const { inputLabel, datetimePanelValue } = reactData;
-      const dateLabelFormat = computeDateLabelFormat.value;
-      const dateStartDate = computeDateStartDate.value;
-      const dateEndDate = computeDateEndDate.value;
-      if (inpVal) {
-        let inpDateVal = parseDate(inpVal, dateLabelFormat);
-        if (XEUtils.isValidDate(inpDateVal)) {
-          if (type === "time") {
-            inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
-            if (inputLabel !== inpDateVal) {
-              handleChange(inpDateVal, { type: "check" });
-            }
-            reactData.inputLabel = inpDateVal;
-          } else {
-            if (dateEndDate && inpDateVal > dateEndDate) {
-              inpDateVal = dateEndDate;
-            }
-            if (dateStartDate && inpDateVal < dateStartDate) {
-              inpDateVal = dateStartDate;
-            }
-            let isChange = false;
-            const firstDayOfWeek = computeFirstDayOfWeek.value;
-            if (type === "datetime") {
-              const dateValue = computeDateValue.value;
-              if (inpVal !== XEUtils.toDateString(dateValue, dateLabelFormat) || inpVal !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
-                isChange = true;
-                if (datetimePanelValue) {
-                  datetimePanelValue.setHours(inpDateVal.getHours());
-                  datetimePanelValue.setMinutes(inpDateVal.getMinutes());
-                  datetimePanelValue.setSeconds(inpDateVal.getSeconds());
-                }
+        return list;
+      });
+      const refMaps = {
+        refElem
+      };
+      const computeMaps = {
+        computeSize,
+        computeYearList
+      };
+      const $xeDatePanel = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const updateModelValue = (modelValue) => {
+        const { type } = props;
+        const dateValueFormat = computeDateValueFormat.value;
+        const inpDate = parseDateValue(modelValue, type, { valueFormat: dateValueFormat });
+        reactData.inputValue = inpDate;
+        reactData.inputLabel = inpDate;
+        dateOpenPanel();
+      };
+      const parseDate = (value, format) => {
+        const { type, multiple } = props;
+        if (type === "time") {
+          return toStringTimeDate(XEUtils.isArray(value) ? XEUtils.last(value) : value);
+        }
+        if (XEUtils.isArray(value)) {
+          return XEUtils.toStringDate(XEUtils.last(value), format);
+        }
+        if (XEUtils.isString(value)) {
+          return XEUtils.toStringDate(multiple ? XEUtils.last(value.split(",")) : value, format);
+        }
+        return XEUtils.toStringDate(value, format);
+      };
+      const dateRevert = () => {
+        const label = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
+        reactData.inputLabel = label;
+        dispatchEvent("revert", { label }, null);
+      };
+      const afterCheckValue = (inpVal) => {
+        const { type } = props;
+        const { inputLabel, datetimePanelValue } = reactData;
+        const dateLabelFormat = computeDateLabelFormat.value;
+        const dateStartDate = computeDateStartDate.value;
+        const dateEndDate = computeDateEndDate.value;
+        if (inpVal) {
+          let inpDateVal = parseDate(inpVal, dateLabelFormat);
+          if (XEUtils.isValidDate(inpDateVal)) {
+            if (type === "time") {
+              inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
+              if (inputLabel !== inpDateVal) {
+                handleChange(inpDateVal, { type: "check" });
               }
+              reactData.inputLabel = inpDateVal;
             } else {
-              isChange = true;
-            }
-            reactData.inputLabel = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
-            if (isChange) {
-              dateChange(inpDateVal);
+              if (dateEndDate && inpDateVal > dateEndDate) {
+                inpDateVal = dateEndDate;
+              }
+              if (dateStartDate && inpDateVal < dateStartDate) {
+                inpDateVal = dateStartDate;
+              }
+              let isChange = false;
+              const firstDayOfWeek = computeFirstDayOfWeek.value;
+              if (type === "datetime") {
+                const dateValue = computeDateValue.value;
+                if (inpVal !== XEUtils.toDateString(dateValue, dateLabelFormat) || inpVal !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
+                  isChange = true;
+                  if (datetimePanelValue) {
+                    datetimePanelValue.setHours(inpDateVal.getHours());
+                    datetimePanelValue.setMinutes(inpDateVal.getMinutes());
+                    datetimePanelValue.setSeconds(inpDateVal.getSeconds());
+                  }
+                }
+              } else {
+                isChange = true;
+              }
+              reactData.inputLabel = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
+              if (isChange) {
+                dateChange(inpDateVal);
+              }
             }
+          } else {
+            dateRevert();
           }
         } else {
-          dateRevert();
+          handleChange("", { type: "check" });
         }
-      } else {
-        handleChange("", { type: "check" });
-      }
-    };
-    const emitModel = (value) => {
-      reactData.inputValue = value;
-      emit("update:modelValue", value);
-    };
-    const handleChange = (value, evnt, params) => {
-      const { type, modelValue, valueFormat } = props;
-      const dateValueFormat = computeDateValueFormat.value;
-      reactData.inputLabel = value;
-      if (hasTimestampValueType(valueFormat)) {
-        const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
-        const timeNum = dateVal ? dateVal.getTime() : null;
-        emitModel(timeNum);
-        if (modelValue !== timeNum) {
-          dispatchEvent("change", { value: timeNum, currValue: params ? params.currValue : "" }, evnt);
+      };
+      const emitModel = (value) => {
+        reactData.inputValue = value;
+        emit("update:modelValue", value);
+      };
+      const handleChange = (value, evnt, params) => {
+        const { type, modelValue, valueFormat } = props;
+        const dateValueFormat = computeDateValueFormat.value;
+        reactData.inputLabel = value;
+        if (hasTimestampValueType(valueFormat)) {
+          const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
+          const timeNum = dateVal ? dateVal.getTime() : null;
+          emitModel(timeNum);
+          if (modelValue !== timeNum) {
+            dispatchEvent("change", { value: timeNum, currValue: params ? params.currValue : "" }, evnt);
+          }
+        } else if (hasDateValueType(valueFormat)) {
+          const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
+          emitModel(dateVal);
+          if (modelValue && dateVal ? XEUtils.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
+            dispatchEvent("change", { value: dateVal, currValue: params ? params.currValue : "" }, evnt);
+          }
+        } else {
+          emitModel(value);
+          if (XEUtils.toValueString(modelValue) !== value) {
+            dispatchEvent("change", { value, currValue: params ? params.currValue : "" }, evnt);
+          }
+        }
+      };
+      const hidePanel = () => {
+        return new Promise((resolve) => {
+          reactData.visiblePanel = false;
+          internalData.hpTimeout = setTimeout(() => {
+            reactData.isAniVisible = false;
+            resolve();
+          }, 350);
+        });
+      };
+      const dateParseValue = (val) => {
+        const { type } = props;
+        const dateLabelFormat = computeDateLabelFormat.value;
+        const dateValueFormat = computeDateValueFormat.value;
+        const firstDayOfWeek = computeFirstDayOfWeek.value;
+        const dateObj = parseDateObj(val, type, {
+          valueFormat: dateValueFormat,
+          labelFormat: dateLabelFormat,
+          firstDay: firstDayOfWeek
+        });
+        reactData.datePanelValue = dateObj.value;
+        reactData.datePanelLabel = dateObj.label;
+      };
+      const changeValue = () => {
+        const isDatePanelType = computeIsDatePanelType.value;
+        const { inputLabel } = reactData;
+        if (isDatePanelType) {
+          dateParseValue(inputLabel);
+          reactData.inputLabel = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
         }
-      } else if (hasDateValueType(valueFormat)) {
-        const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
-        emitModel(dateVal);
-        if (modelValue && dateVal ? XEUtils.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
-          dispatchEvent("change", { value: dateVal, currValue: params ? params.currValue : "" }, evnt);
+      };
+      const initValue = () => {
+        const { modelValue } = props;
+        const isDatePanelType = computeIsDatePanelType.value;
+        updateModelValue(modelValue);
+        if (isDatePanelType) {
+          changeValue();
         }
-      } else {
-        emitModel(value);
-        if (XEUtils.toValueString(modelValue) !== value) {
-          dispatchEvent("change", { value, currValue: params ? params.currValue : "" }, evnt);
+      };
+      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 hidePanel = () => {
-      return new Promise((resolve) => {
-        reactData.visiblePanel = false;
-        internalData.hpTimeout = setTimeout(() => {
-          reactData.isAniVisible = false;
-          resolve();
-        }, 350);
-      });
-    };
-    const dateParseValue = (val) => {
-      const { type } = props;
-      const dateLabelFormat = computeDateLabelFormat.value;
-      const dateValueFormat = computeDateValueFormat.value;
-      const firstDayOfWeek = computeFirstDayOfWeek.value;
-      const dateObj = parseDateObj(val, type, {
-        valueFormat: dateValueFormat,
-        labelFormat: dateLabelFormat,
-        firstDay: firstDayOfWeek
-      });
-      reactData.datePanelValue = dateObj.value;
-      reactData.datePanelLabel = dateObj.label;
-    };
-    const changeValue = () => {
-      const isDatePanelType = computeIsDatePanelType.value;
-      const { inputLabel } = reactData;
-      if (isDatePanelType) {
-        dateParseValue(inputLabel);
-        reactData.inputLabel = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-      }
-    };
-    const initValue = () => {
-      const { modelValue } = props;
-      const isDatePanelType = computeIsDatePanelType.value;
-      updateModelValue(modelValue);
-      if (isDatePanelType) {
-        changeValue();
-      }
-    };
-    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, valueSort } = props;
-      const { datetimePanelValue } = reactData;
-      const isTimeType = computeIsTimeType.value;
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.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 (isTimeOrDateTimeType) {
-        if (datetimePanelValue) {
-          date.setHours(datetimePanelValue.getHours());
-          date.setMinutes(datetimePanelValue.getMinutes());
-          date.setSeconds(datetimePanelValue.getSeconds());
+      };
+      const dateChange = (date, isReload) => {
+        const { modelValue, multiple, valueSort } = props;
+        const { datetimePanelValue } = reactData;
+        const isTimeType = computeIsTimeType.value;
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.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 (isTimeOrDateTimeType) {
+          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 (!isTimeType && multiple) {
-        const overCount = computeOverCount.value;
-        if (isTimeOrDateTimeType) {
-          const dateListValue = isReload ? [] : [...computeDateListValue.value];
-          let datetimeRest = [];
-          const eqIndex = XEUtils.findIndexOf(dateListValue, (val) => XEUtils.isDateSame(date, val, "yyyyMMdd"));
-          if (eqIndex === -1) {
-            if (overCount) {
-              return;
+        const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
+        dateCheckMonth(date);
+        if (!isTimeType && multiple) {
+          const overCount = computeOverCount.value;
+          if (isTimeOrDateTimeType) {
+            const dateListValue = isReload ? [] : [...computeDateListValue.value];
+            let 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.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());
+            dateListValue.forEach((item) => {
+              if (item) {
+                if (datetimePanelValue) {
+                  item.setHours(datetimePanelValue.getHours());
+                  item.setMinutes(datetimePanelValue.getMinutes());
+                  item.setSeconds(datetimePanelValue.getSeconds());
+                }
+                datetimeRest.push(item);
               }
-              datetimeRest.push(item);
+            });
+            if (valueSort) {
+              datetimeRest = datetimeRest.sort((a, b) => a.getTime() - b.getTime());
             }
-          });
-          if (valueSort) {
-            datetimeRest = datetimeRest.sort((a, b) => a.getTime() - b.getTime());
-          }
-          handleChange(datetimeRest.map((date2) => XEUtils.toDateString(date2, dateValueFormat)).join(","), { type: "update" }, { currValue: inpVal });
-        } else {
-          const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value;
-          let dateRest = [];
-          if (dateMultipleValue.some((val) => XEUtils.isEqual(val, inpVal))) {
-            dateRest = dateMultipleValue.filter((val) => !XEUtils.isEqual(val, inpVal));
+            handleChange(datetimeRest.map((date2) => XEUtils.toDateString(date2, dateValueFormat)).join(","), { type: "update" }, { currValue: inpVal });
           } else {
-            if (overCount) {
-              return;
+            const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value;
+            let dateRest = [];
+            if (dateMultipleValue.some((val) => XEUtils.isEqual(val, inpVal))) {
+              dateRest = dateMultipleValue.filter((val) => !XEUtils.isEqual(val, inpVal));
+            } else {
+              if (overCount) {
+                return;
+              }
+              dateRest = dateMultipleValue.concat([inpVal]);
+            }
+            if (valueSort) {
+              dateRest = dateRest.sort();
             }
-            dateRest = dateMultipleValue.concat([inpVal]);
+            handleChange(dateRest.join(","), { type: "update" }, { currValue: inpVal });
           }
-          if (valueSort) {
-            dateRest = dateRest.sort();
+        } else {
+          if (!XEUtils.isEqual(modelValue, inpVal)) {
+            handleChange(inpVal, { type: "update" }, { currValue: inpVal });
           }
-          handleChange(dateRest.join(","), { type: "update" }, { currValue: inpVal });
         }
-      } else {
-        if (!XEUtils.isEqual(modelValue, inpVal)) {
-          handleChange(inpVal, { type: "update" }, { currValue: inpVal });
+      };
+      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 = /* @__PURE__ */ new Date();
+        switch (type) {
+          case "week":
+            currentDate = XEUtils.getWhatWeek(currentDate, 0, firstDayOfWeek);
+            break;
+          case "datetime":
+            currentDate = /* @__PURE__ */ new Date();
+            reactData.datetimePanelValue = /* @__PURE__ */ new Date();
+            break;
+          default:
+            currentDate = XEUtils.getWhatDay(Date.now(), 0, "first");
+            break;
         }
-      }
-    };
-    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 = /* @__PURE__ */ new Date();
-      switch (type) {
-        case "week":
-          currentDate = XEUtils.getWhatWeek(currentDate, 0, firstDayOfWeek);
-          break;
-        case "datetime":
-          currentDate = /* @__PURE__ */ new Date();
-          reactData.datetimePanelValue = /* @__PURE__ */ 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, inputLabel } = reactData;
-      const { yearSize } = internalData;
-      const value = inputLabel;
-      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");
-          }
+        reactData.currentDate = currentDate;
+        dateMonthHandle(currentDate, 0);
+      };
+      const dateToggleYearTypeEvent = () => {
+        reactData.datePanelType = "year";
+      };
+      const dateToggleMonthTypeEvent = () => {
+        let { datePanelType } = reactData;
+        if (datePanelType === "month" || datePanelType === "quarter") {
+          datePanelType = "year";
         } else {
-          if (datePanelType === "year") {
+          datePanelType = "month";
+        }
+        reactData.datePanelType = datePanelType;
+      };
+      const datePrevEvent = (evnt) => {
+        const { type } = props;
+        const { datePanelType, selectMonth, inputLabel } = reactData;
+        const { yearSize } = internalData;
+        const value = inputLabel;
+        const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
+        if (!isDisabledPrevDateBtn) {
+          let viewDate;
+          if (type === "year") {
             viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, "first");
-          } else if (datePanelType === "month") {
-            viewDate = XEUtils.getWhatYear(selectMonth, -1, "first");
+          } else if (type === "month" || type === "quarter") {
+            if (datePanelType === "year") {
+              viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, "first");
+            } else {
+              viewDate = XEUtils.getWhatYear(selectMonth, -1, "first");
+            }
           } else {
-            viewDate = XEUtils.getWhatMonth(selectMonth, -1, "first");
+            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);
         }
-        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", { viewType: reactData.datePanelType, type: props.type, viewDate: reactData.selectMonth }, evnt);
-    };
-    const dateNextEvent = (evnt) => {
-      const { type } = props;
-      const { datePanelType, selectMonth, inputLabel } = reactData;
-      const { yearSize } = internalData;
-      const value = inputLabel;
-      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") {
+      };
+      const dateTodayMonthEvent = (evnt) => {
+        dateNowHandle();
+        dateChange(reactData.currentDate, true);
+        if (!props.multiple) {
+          hidePanel();
+        }
+        dispatchEvent("date-today", { viewType: reactData.datePanelType, type: props.type, viewDate: reactData.selectMonth }, evnt);
+      };
+      const dateNextEvent = (evnt) => {
+        const { type } = props;
+        const { datePanelType, selectMonth, inputLabel } = reactData;
+        const { yearSize } = internalData;
+        const value = inputLabel;
+        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 {
-            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");
+            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, viewDate }, evnt);
         }
-        reactData.selectMonth = viewDate;
-        dispatchEvent("date-next", { viewType: datePanelType, value, type, viewDate }, evnt);
-      }
-    };
-    const isRangeDisabled = (item) => {
-      const dateStartTime = computeDateStartDate.value;
-      const dateEndTime = computeDateEndDate.value;
-      const { date } = item;
-      if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
-        return true;
-      }
-      if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
-        return true;
-      }
-      return false;
-    };
-    const isDateDisabled = (item) => {
-      const disbMethod = props.disabledMethod || defaultFuncProps.disabledMethod;
-      const { datePanelType } = reactData;
-      const { date } = item;
-      if (disbMethod) {
-        return disbMethod({ type: datePanelType, viewType: datePanelType, date, $datePanel: $xeDatePanel });
-      }
-      return false;
-    };
-    const hasAllDisabled = (item) => {
-      return isRangeDisabled(item) || isDateDisabled(item);
-    };
-    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();
-          }
+      };
+      const isRangeDisabled = (item) => {
+        const dateStartTime = computeDateStartDate.value;
+        const dateEndTime = computeDateEndDate.value;
+        const { date } = item;
+        if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
+          return true;
         }
-      } else if (type === "year") {
-        dateChange(date);
-        if (!multiple) {
-          hidePanel();
+        if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
+          return true;
         }
-      } else if (type === "quarter") {
-        if (datePanelType === "year") {
-          reactData.datePanelType = "quarter";
-          dateCheckMonth(date);
-        } else {
+        return false;
+      };
+      const isDateDisabled = (item) => {
+        const disbMethod = props.disabledMethod || defaultFuncProps.disabledMethod;
+        const { datePanelType } = reactData;
+        const { date } = item;
+        if (disbMethod) {
+          return disbMethod({ type: datePanelType, viewType: datePanelType, date, $datePanel: $xeDatePanel });
+        }
+        return false;
+      };
+      const hasAllDisabled = (item) => {
+        return isRangeDisabled(item) || isDateDisabled(item);
+      };
+      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 (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 (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 (!hasAllDisabled(item)) {
-        dateSelectItem(item.date);
-      }
-    };
-    const dateMoveDay = (offsetDay) => {
-      if (!hasAllDisabled({ date: offsetDay })) {
-        const dayList = computeDayList.value;
-        if (!dayList.some((item) => XEUtils.isDateSame(item.date, offsetDay, "yyyyMMdd"))) {
-          dateCheckMonth(offsetDay);
+      };
+      const dateSelectEvent = (item) => {
+        if (!hasAllDisabled(item)) {
+          dateSelectItem(item.date);
         }
-        dateParseValue(offsetDay);
-      }
-    };
-    const dateMoveYear = (offsetYear) => {
-      if (!hasAllDisabled({ date: offsetYear })) {
-        const yearList = computeYearList.value;
-        if (!yearList.some((item) => XEUtils.isDateSame(item.date, offsetYear, "yyyy"))) {
-          dateCheckMonth(offsetYear);
+      };
+      const dateMoveDay = (offsetDay) => {
+        if (!hasAllDisabled({ date: offsetDay })) {
+          const dayList = computeDayList.value;
+          if (!dayList.some((item) => XEUtils.isDateSame(item.date, offsetDay, "yyyyMMdd"))) {
+            dateCheckMonth(offsetDay);
+          }
+          dateParseValue(offsetDay);
         }
-        dateParseValue(offsetYear);
-      }
-    };
-    const dateMoveQuarter = (offsetQuarter) => {
-      if (!hasAllDisabled({ date: offsetQuarter })) {
-        const quarterList = computeQuarterList.value;
-        if (!quarterList.some((item) => XEUtils.isDateSame(item.date, offsetQuarter, "yyyyq"))) {
-          dateCheckMonth(offsetQuarter);
+      };
+      const dateMoveYear = (offsetYear) => {
+        if (!hasAllDisabled({ date: offsetYear })) {
+          const yearList = computeYearList.value;
+          if (!yearList.some((item) => XEUtils.isDateSame(item.date, offsetYear, "yyyy"))) {
+            dateCheckMonth(offsetYear);
+          }
+          dateParseValue(offsetYear);
         }
-        dateParseValue(offsetQuarter);
-      }
-    };
-    const dateMoveMonth = (offsetMonth) => {
-      if (!hasAllDisabled({ date: offsetMonth })) {
-        const monthList = computeMonthList.value;
-        if (!monthList.some((item) => XEUtils.isDateSame(item.date, offsetMonth, "yyyyMM"))) {
-          dateCheckMonth(offsetMonth);
+      };
+      const dateMoveQuarter = (offsetQuarter) => {
+        if (!hasAllDisabled({ date: offsetQuarter })) {
+          const quarterList = computeQuarterList.value;
+          if (!quarterList.some((item) => XEUtils.isDateSame(item.date, offsetQuarter, "yyyyq"))) {
+            dateCheckMonth(offsetQuarter);
+          }
+          dateParseValue(offsetQuarter);
         }
-        dateParseValue(offsetMonth);
-      }
-    };
-    const dateMouseenterEvent = (item) => {
-      if (!hasAllDisabled(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 dateMoveMonth = (offsetMonth) => {
+        if (!hasAllDisabled({ date: offsetMonth })) {
+          const monthList = computeMonthList.value;
+          if (!monthList.some((item) => XEUtils.isDateSame(item.date, offsetMonth, "yyyyMM"))) {
+            dateCheckMonth(offsetMonth);
+          }
+          dateParseValue(offsetMonth);
         }
-      }
-    };
-    const dateMouseleaveEvent = () => {
-      reactData.datePanelValue = null;
-    };
-    const updateTimePos = (liElem) => {
-      if (liElem) {
-        const height = liElem.offsetHeight;
-        const ulElem = liElem.parentNode;
-        ulElem.scrollTop = liElem.offsetTop - height * 4;
-      }
-    };
-    const dateTimeChangeEvent = (evnt) => {
-      const { datetimePanelValue } = reactData;
-      reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : /* @__PURE__ */ new Date();
-      updateTimePos(evnt.currentTarget);
-    };
-    const dateHourEvent = (evnt, item) => {
-      const { datetimePanelValue } = reactData;
-      if (!item.disabled) {
-        if (datetimePanelValue) {
-          datetimePanelValue.setHours(item.value);
+      };
+      const dateMouseenterEvent = (item) => {
+        if (!hasAllDisabled(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);
+          }
         }
-        dateTimeChangeEvent(evnt);
-      }
-    };
-    const dateConfirmEvent = (evnt) => {
-      const { multiple } = props;
-      const { datetimePanelValue, currentDate } = reactData;
-      const dateValue = computeDateValue.value;
-      const isTimeType = computeIsTimeType.value;
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
-      if (isTimeOrDateTimeType) {
-        const dateValueFormat = computeDateValueFormat.value;
-        if (!isTimeType && multiple) {
-          const dateMultipleValue = computeDateMultipleValue.value;
-          const dateListValue = computeDateListValue.value;
-          if (isTimeOrDateTimeType) {
-            const listVals = dateListValue.length ? [...dateListValue] : [];
-            const datetimeRest = [];
-            listVals.forEach((item) => {
-              if (item) {
-                if (datetimePanelValue) {
-                  item.setHours(datetimePanelValue.getHours());
-                  item.setMinutes(datetimePanelValue.getMinutes());
-                  item.setSeconds(datetimePanelValue.getSeconds());
+      };
+      const dateMouseleaveEvent = () => {
+        reactData.datePanelValue = null;
+      };
+      const updateTimePos = (liElem) => {
+        if (liElem) {
+          const height = liElem.offsetHeight;
+          const ulElem = liElem.parentNode;
+          ulElem.scrollTop = liElem.offsetTop - height * 4;
+        }
+      };
+      const dateTimeChangeEvent = (evnt) => {
+        const { datetimePanelValue } = reactData;
+        reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : /* @__PURE__ */ new Date();
+        updateTimePos(evnt.currentTarget);
+      };
+      const dateHourEvent = (evnt, item) => {
+        const { datetimePanelValue } = reactData;
+        if (!item.disabled) {
+          if (datetimePanelValue) {
+            datetimePanelValue.setHours(item.value);
+          }
+          dateTimeChangeEvent(evnt);
+        }
+      };
+      const dateConfirmEvent = (evnt) => {
+        const { multiple } = props;
+        const { datetimePanelValue, currentDate } = reactData;
+        const dateValue = computeDateValue.value;
+        const isTimeType = computeIsTimeType.value;
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.value;
+        if (isTimeOrDateTimeType) {
+          const dateValueFormat = computeDateValueFormat.value;
+          if (!isTimeType && multiple) {
+            const dateMultipleValue = computeDateMultipleValue.value;
+            const dateListValue = computeDateListValue.value;
+            if (isTimeOrDateTimeType) {
+              const listVals = dateListValue.length ? [...dateListValue] : [];
+              const datetimeRest = [];
+              listVals.forEach((item) => {
+                if (item) {
+                  if (datetimePanelValue) {
+                    item.setHours(datetimePanelValue.getHours());
+                    item.setMinutes(datetimePanelValue.getMinutes());
+                    item.setSeconds(datetimePanelValue.getSeconds());
+                  }
+                  datetimeRest.push(item);
                 }
-                datetimeRest.push(item);
-              }
-            });
-            handleChange(datetimeRest.map((date) => XEUtils.toDateString(date, dateValueFormat)).join(","), { type: "update" });
+              });
+              handleChange(datetimeRest.map((date) => XEUtils.toDateString(date, dateValueFormat)).join(","), { type: "update" });
+            } else {
+              handleChange(dateMultipleValue.join(","), { type: "update" });
+            }
           } else {
-            handleChange(dateMultipleValue.join(","), { type: "update" });
+            dateChange(dateValue || currentDate);
           }
-        } else {
-          dateChange(dateValue || currentDate);
         }
-      }
-      hidePanel();
-      dispatchEvent("confirm", {}, evnt);
-    };
-    const dateMinuteEvent = (evnt, item) => {
-      const { datetimePanelValue } = reactData;
-      if (!item.disabled) {
-        if (datetimePanelValue) {
-          datetimePanelValue.setMinutes(item.value);
+        hidePanel();
+        dispatchEvent("confirm", {}, evnt);
+      };
+      const dateMinuteEvent = (evnt, item) => {
+        const { datetimePanelValue } = reactData;
+        if (!item.disabled) {
+          if (datetimePanelValue) {
+            datetimePanelValue.setMinutes(item.value);
+          }
+          dateTimeChangeEvent(evnt);
         }
-        dateTimeChangeEvent(evnt);
-      }
-    };
-    const dateSecondEvent = (evnt, item) => {
-      const { datetimePanelValue } = reactData;
-      if (!item.disabled) {
-        if (datetimePanelValue) {
-          datetimePanelValue.setSeconds(item.value);
+      };
+      const dateSecondEvent = (evnt, item) => {
+        const { datetimePanelValue } = reactData;
+        if (!item.disabled) {
+          if (datetimePanelValue) {
+            datetimePanelValue.setSeconds(item.value);
+          }
+          dateTimeChangeEvent(evnt);
         }
-        dateTimeChangeEvent(evnt);
-      }
-    };
-    const dateOpenPanel = () => {
-      const { type, defaultDate, defaultTime } = props;
-      const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.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 {
-        if (defaultDate) {
-          const defDate = parseDate(defaultDate, "yyyy-MM-dd");
-          if (XEUtils.isValidDate(defDate)) {
-            dateMonthHandle(defDate, 0);
+      };
+      const dateOpenPanel = () => {
+        const { type, defaultDate, defaultTime } = props;
+        const isTimeOrDateTimeType = computeIsTimeOrDateTimeType.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 {
+          if (defaultDate) {
+            const defDate = parseDate(defaultDate, "yyyy-MM-dd");
+            if (XEUtils.isValidDate(defDate)) {
+              dateMonthHandle(defDate, 0);
+            } else {
+              dateNowHandle();
+            }
           } else {
             dateNowHandle();
           }
-        } else {
-          dateNowHandle();
         }
-      }
-      if (isTimeOrDateTimeType) {
-        let dtPanelValue = reactData.datePanelValue;
-        if (!dtPanelValue) {
-          dtPanelValue = XEUtils.getWhatDay(Date.now(), 0, "first");
-          if (defaultTime) {
-            const defTime = toStringTimeDate(defaultTime);
-            if (XEUtils.isValidDate(defTime)) {
-              dtPanelValue.setHours(defTime.getHours());
-              dtPanelValue.setMinutes(defTime.getMinutes());
-              dtPanelValue.setSeconds(defTime.getSeconds());
+        if (isTimeOrDateTimeType) {
+          let dtPanelValue = reactData.datePanelValue;
+          if (!dtPanelValue) {
+            dtPanelValue = XEUtils.getWhatDay(Date.now(), 0, "first");
+            if (defaultTime) {
+              const defTime = toStringTimeDate(defaultTime);
+              if (XEUtils.isValidDate(defTime)) {
+                dtPanelValue.setHours(defTime.getHours());
+                dtPanelValue.setMinutes(defTime.getMinutes());
+                dtPanelValue.setSeconds(defTime.getSeconds());
+              }
             }
           }
-        }
-        reactData.datetimePanelValue = dtPanelValue;
-        nextTick(() => {
-          const timeBodyElem = refInputTimeBody.value;
-          XEUtils.arrayEach(timeBodyElem.querySelectorAll("li.is--selected"), (elem) => {
-            updateTimePos(elem);
+          reactData.datetimePanelValue = dtPanelValue;
+          nextTick(() => {
+            const timeBodyElem = refInputTimeBody.value;
+            XEUtils.arrayEach(timeBodyElem.querySelectorAll("li.is--selected"), (elem) => {
+              updateTimePos(elem);
+            });
           });
-        });
-      }
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $datePanel: $xeDatePanel }, params));
-    };
-    const datePanelMethods = {
-      dispatchEvent,
-      getModelValue() {
-        return reactData.inputValue;
-      },
-      getViewType() {
-        const { datePanelType } = reactData;
-        return datePanelType;
-      },
-      setPanelDate(date) {
-        if (date) {
-          dateCheckMonth(date);
         }
-      },
-      getPanelDate() {
-        const { selectMonth } = reactData;
-        return selectMonth ? new Date(selectMonth.getTime()) : /* @__PURE__ */ new Date();
-      },
-      checkValue(value) {
-        afterCheckValue(value);
-      },
-      confirmByEvent(evnt) {
-        dateConfirmEvent(evnt);
-      }
-    };
-    Object.assign($xeDatePanel, datePanelMethods);
-    const renderDateLabel = (item, label) => {
-      const flMethod = props.festivalMethod || defaultFuncProps.festivalMethod;
-      const labelVNs = [];
-      if (flMethod) {
-        const { datePanelType } = reactData;
-        const festivalRest = flMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $datePanel: $xeDatePanel });
-        const festivalItem = festivalRest ? XEUtils.isString(festivalRest) ? { label: festivalRest } : festivalRest : {};
-        const extraItem = festivalItem.extra ? XEUtils.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra : null;
-        labelVNs.push(
-          h(
-            "div",
-            {
-              class: [
-                "vxe-date-panel--label",
-                {
-                  "is-notice": festivalItem.notice
-                }
-              ]
-            },
-            extraItem && extraItem.label ? [
-              h(
-                "div",
-                {
-                  class: "vxe-date-panel--label--number"
-                },
-                `${label}`
-              ),
-              h(
-                "div",
-                {
-                  class: ["vxe-date-panel--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
-                  style: extraItem.style
-                },
-                XEUtils.toValueString(extraItem.label)
-              )
-            ] : `${label}`
-          )
-        );
-        const festivalLabel = festivalItem.label;
-        if (festivalLabel) {
-          const festivalLabels = XEUtils.toValueString(festivalLabel).split(",");
+      };
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $datePanel: $xeDatePanel }, params));
+      };
+      const datePanelMethods = {
+        dispatchEvent,
+        getModelValue() {
+          return reactData.inputValue;
+        },
+        getViewType() {
+          const { datePanelType } = reactData;
+          return datePanelType;
+        },
+        setPanelDate(date) {
+          if (date) {
+            dateCheckMonth(date);
+          }
+        },
+        getPanelDate() {
+          const { selectMonth } = reactData;
+          return selectMonth ? new Date(selectMonth.getTime()) : /* @__PURE__ */ new Date();
+        },
+        checkValue(value) {
+          afterCheckValue(value);
+        },
+        confirmByEvent(evnt) {
+          dateConfirmEvent(evnt);
+        }
+      };
+      Object.assign($xeDatePanel, datePanelMethods);
+      const renderDateLabel = (item, label) => {
+        const flMethod = props.festivalMethod || defaultFuncProps.festivalMethod;
+        const labelVNs = [];
+        if (flMethod) {
+          const { datePanelType } = reactData;
+          const festivalRest = flMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $datePanel: $xeDatePanel });
+          const festivalItem = festivalRest ? XEUtils.isString(festivalRest) ? { label: festivalRest } : festivalRest : {};
+          const extraItem = festivalItem.extra ? XEUtils.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra : null;
           labelVNs.push(
             h(
               "div",
               {
-                class: ["vxe-date-panel--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
-                style: festivalItem.style
+                class: [
+                  "vxe-date-panel--label",
+                  {
+                    "is-notice": festivalItem.notice
+                  }
+                ]
               },
-              [
-                festivalLabels.length > 1 ? h(
+              extraItem && extraItem.label ? [
+                h(
                   "div",
                   {
-                    class: ["vxe-date-panel--festival--overlap", `overlap--${festivalLabels.length}`]
+                    class: "vxe-date-panel--label--number"
                   },
-                  festivalLabels.map((label2) => h("div", label2.substring(0, 3)))
-                ) : h(
+                  `${label}`
+                ),
+                h(
                   "div",
                   {
-                    class: "vxe-date-panel--festival--label"
+                    class: ["vxe-date-panel--label--extra", extraItem.important ? "is-important" : "", extraItem.className],
+                    style: extraItem.style
                   },
-                  festivalLabels[0].substring(0, 3)
+                  XEUtils.toValueString(extraItem.label)
                 )
-              ]
+              ] : `${label}`
+            )
+          );
+          const festivalLabel = festivalItem.label;
+          if (festivalLabel) {
+            const festivalLabels = XEUtils.toValueString(festivalLabel).split(",");
+            labelVNs.push(
+              h(
+                "div",
+                {
+                  class: ["vxe-date-panel--festival", festivalItem.important ? "is-important" : "", festivalItem.className],
+                  style: festivalItem.style
+                },
+                [
+                  festivalLabels.length > 1 ? h(
+                    "div",
+                    {
+                      class: ["vxe-date-panel--festival--overlap", `overlap--${festivalLabels.length}`]
+                    },
+                    festivalLabels.map((label2) => h("div", label2.substring(0, 3)))
+                  ) : h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--festival--label"
+                    },
+                    festivalLabels[0].substring(0, 3)
+                  )
+                ]
+              )
+            );
+          }
+        } else {
+          labelVNs.push(
+            h(
+              "div",
+              {
+                class: "vxe-date-panel--label"
+              },
+              `${label}`
             )
           );
         }
-      } else {
-        labelVNs.push(
+        return labelVNs;
+      };
+      const renderDateDayTable = () => {
+        const { type, multiple, cellClassName } = 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(
             "div",
             {
-              class: "vxe-date-panel--label"
+              class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
             },
-            `${label}`
-          )
-        );
-      }
-      return labelVNs;
-    };
-    const renderDateDayTable = () => {
-      const { type, multiple, cellClassName } = 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(
-          "div",
-          {
-            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-          },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--view-header"
-              },
-              [
-                h(
-                  "div",
-                  {
-                    class: "vxe-date-panel--view-row"
-                  },
-                  dateHeaders.map((item) => {
-                    return h(
-                      "div",
-                      {
-                        class: "vxe-date-panel--view-item",
-                        style: {
-                          width: `${100 / dateHeaders.length}%`
-                        }
-                      },
-                      [
-                        h(
-                          "div",
-                          {
-                            class: "vxe-date-panel--view-item-inner"
-                          },
-                          [
-                            h(
-                              "div",
-                              {
-                                class: "vxe-date-panel--view-item-label"
-                              },
-                              item.label
-                            )
-                          ]
-                        )
-                      ]
-                    );
-                  })
-                )
-              ]
-            ),
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--view-body"
-              },
-              dayDatas.map((rows) => {
-                return h(
-                  "div",
-                  {
-                    class: "vxe-date-panel--view-row",
-                    style: {
-                      height: `${100 / dayDatas.length}%`
-                    }
-                  },
-                  rows.map((item) => {
-                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                    return h(
-                      "div",
-                      {
-                        class: [
-                          "vxe-date-panel--view-item",
-                          cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
-                          {
-                            "is--prev": item.isPrev,
-                            "is--current": item.isCurrent,
-                            "is--now": item.isNow,
-                            "is--next": item.isNext,
-                            "is--range-disabled": isRangeDisabled(item),
-                            "is--disabled": isDateDisabled(item),
-                            "is--selected": isSelected,
-                            "is--over": overCount && !isSelected,
-                            "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--view-header"
+                },
+                [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--view-row"
+                    },
+                    dateHeaders.map((item) => {
+                      return h(
+                        "div",
+                        {
+                          class: "vxe-date-panel--view-item",
+                          style: {
+                            width: `${100 / dateHeaders.length}%`
                           }
-                        ],
-                        style: {
-                          width: `${100 / rows.length}%`
                         },
-                        onClick: () => dateSelectEvent(item),
-                        onMouseenter: () => dateMouseenterEvent(item),
-                        onMouseleave: dateMouseleaveEvent
-                      },
-                      [
-                        h(
-                          "div",
-                          {
-                            class: "vxe-date-panel--view-item-inner"
-                          },
-                          renderDateLabel(item, item.label)
-                        )
-                      ]
-                    );
-                  })
-                );
-              })
-            )
-          ]
-        )
-      ];
-    };
-    const renderDateWeekTable = () => {
-      const { type, multiple, cellClassName } = 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(
-          "div",
-          {
-            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-          },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--view-header"
-              },
-              [
-                h(
-                  "div",
-                  {
-                    class: "vxe-date-panel--view-row"
-                  },
-                  weekHeaders.map((item, rIndex) => {
-                    return h(
-                      "div",
-                      {
-                        class: "vxe-date-panel--view-item",
-                        style: {
-                          width: `${rIndex ? 13 : 9}%`
-                        }
-                      },
-                      [
-                        h(
-                          "div",
-                          {
-                            class: "vxe-date-panel--view-item-inner"
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-panel--view-item-inner"
+                            },
+                            [
+                              h(
+                                "div",
+                                {
+                                  class: "vxe-date-panel--view-item-label"
+                                },
+                                item.label
+                              )
+                            ]
+                          )
+                        ]
+                      );
+                    })
+                  )
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--view-body"
+                },
+                dayDatas.map((rows) => {
+                  return h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--view-row",
+                      style: {
+                        height: `${100 / dayDatas.length}%`
+                      }
+                    },
+                    rows.map((item) => {
+                      const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                      return h(
+                        "div",
+                        {
+                          class: [
+                            "vxe-date-panel--view-item",
+                            cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                            {
+                              "is--prev": item.isPrev,
+                              "is--current": item.isCurrent,
+                              "is--now": item.isNow,
+                              "is--next": item.isNext,
+                              "is--range-disabled": isRangeDisabled(item),
+                              "is--disabled": isDateDisabled(item),
+                              "is--selected": isSelected,
+                              "is--over": overCount && !isSelected,
+                              "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                            }
+                          ],
+                          style: {
+                            width: `${100 / rows.length}%`
                           },
-                          [
-                            h(
-                              "div",
-                              {
-                                class: "vxe-date-panel--view-item-label"
-                              },
-                              item.label
-                            )
-                          ]
-                        )
-                      ]
-                    );
-                  })
-                )
-              ]
-            ),
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--view-body"
-              },
-              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));
-                const isNowWeek = rows.some((item) => item.isNow);
-                return h(
-                  "div",
-                  {
-                    class: "vxe-date-panel--view-row",
-                    style: {
-                      height: `${100 / weekDates.length}%`
-                    }
-                  },
-                  rows.map((item, rIndex) => {
-                    return h(
-                      "div",
-                      {
-                        class: [
-                          "vxe-date-panel--view-item",
-                          cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
-                          {
-                            "is--prev": item.isPrev,
-                            "is--current": item.isCurrent,
-                            "is--now": rIndex ? item.isNow : isNowWeek,
-                            "is--next": item.isNext,
-                            "is--range-disabled": isRangeDisabled(item),
-                            "is--disabled": isDateDisabled(item),
-                            "is--selected": isSelected,
-                            "is--over": overCount && !isSelected,
-                            "is--hover": !overCount && isHover
+                          onClick: () => dateSelectEvent(item),
+                          onMouseenter: () => dateMouseenterEvent(item),
+                          onMouseleave: dateMouseleaveEvent
+                        },
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-panel--view-item-inner"
+                            },
+                            renderDateLabel(item, item.label)
+                          )
+                        ]
+                      );
+                    })
+                  );
+                })
+              )
+            ]
+          )
+        ];
+      };
+      const renderDateWeekTable = () => {
+        const { type, multiple, cellClassName } = 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(
+            "div",
+            {
+              class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--view-header"
+                },
+                [
+                  h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--view-row"
+                    },
+                    weekHeaders.map((item, rIndex) => {
+                      return h(
+                        "div",
+                        {
+                          class: "vxe-date-panel--view-item",
+                          style: {
+                            width: `${rIndex ? 13 : 9}%`
                           }
-                        ],
-                        style: {
-                          width: `${rIndex ? 13 : 9}%`
                         },
-                        onClick: () => dateSelectEvent(item),
-                        onMouseenter: () => dateMouseenterEvent(item),
-                        onMouseleave: dateMouseleaveEvent
-                      },
-                      [
-                        h(
-                          "div",
-                          {
-                            class: "vxe-date-panel--view-item-inner"
-                          },
-                          renderDateLabel(item, item.label)
-                        )
-                      ]
-                    );
-                  })
-                );
-              })
-            )
-          ]
-        )
-      ];
-    };
-    const renderDateMonthTable = () => {
-      const { type, multiple, cellClassName } = 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(
-          "div",
-          {
-            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-          },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--view-body"
-              },
-              monthDatas.map((rows) => {
-                return h(
-                  "div",
-                  {
-                    class: "vxe-date-panel--view-row",
-                    style: {
-                      height: `${100 / monthDatas.length}%`
-                    }
-                  },
-                  rows.map((item) => {
-                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                    return h(
-                      "div",
-                      {
-                        class: [
-                          "vxe-date-panel--view-item",
-                          cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
-                          {
-                            "is--prev": item.isPrev,
-                            "is--current": item.isCurrent,
-                            "is--now": item.isNow,
-                            "is--next": item.isNext,
-                            "is--range-disabled": isRangeDisabled(item),
-                            "is--disabled": isDateDisabled(item),
-                            "is--selected": isSelected,
-                            "is--over": overCount && !isSelected,
-                            "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                          }
-                        ],
-                        style: {
-                          width: `${100 / rows.length}%`
-                        },
-                        onClick: () => dateSelectEvent(item),
-                        onMouseenter: () => dateMouseenterEvent(item),
-                        onMouseleave: dateMouseleaveEvent
-                      },
-                      [
-                        h(
-                          "div",
-                          {
-                            class: "vxe-date-panel--view-item-inner"
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-panel--view-item-inner"
+                            },
+                            [
+                              h(
+                                "div",
+                                {
+                                  class: "vxe-date-panel--view-item-label"
+                                },
+                                item.label
+                              )
+                            ]
+                          )
+                        ]
+                      );
+                    })
+                  )
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--view-body"
+                },
+                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));
+                  const isNowWeek = rows.some((item) => item.isNow);
+                  return h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--view-row",
+                      style: {
+                        height: `${100 / weekDates.length}%`
+                      }
+                    },
+                    rows.map((item, rIndex) => {
+                      return h(
+                        "div",
+                        {
+                          class: [
+                            "vxe-date-panel--view-item",
+                            cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                            {
+                              "is--prev": item.isPrev,
+                              "is--current": item.isCurrent,
+                              "is--now": rIndex ? item.isNow : isNowWeek,
+                              "is--next": item.isNext,
+                              "is--range-disabled": isRangeDisabled(item),
+                              "is--disabled": isDateDisabled(item),
+                              "is--selected": isSelected,
+                              "is--over": overCount && !isSelected,
+                              "is--hover": !overCount && isHover
+                            }
+                          ],
+                          style: {
+                            width: `${rIndex ? 13 : 9}%`
                           },
-                          renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`))
-                        )
-                      ]
-                    );
-                  })
-                );
-              })
-            )
-          ]
-        )
-      ];
-    };
-    const renderDateQuarterTable = () => {
-      const { type, multiple, cellClassName } = 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(
-          "div",
-          {
-            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-          },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--view-body"
-              },
-              quarterDatas.map((rows) => {
-                return h(
-                  "div",
-                  {
-                    class: "vxe-date-panel--view-row",
-                    style: {
-                      height: `${100 / quarterDatas.length}%`
-                    }
-                  },
-                  rows.map((item) => {
-                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                    return h(
-                      "div",
-                      {
-                        class: [
-                          "vxe-date-panel--view-item",
-                          cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
-                          {
-                            "is--prev": item.isPrev,
-                            "is--current": item.isCurrent,
-                            "is--now": item.isNow,
-                            "is--next": item.isNext,
-                            "is--range-disabled": isRangeDisabled(item),
-                            "is--disabled": isDateDisabled(item),
-                            "is--selected": isSelected,
-                            "is--over": overCount && !isSelected,
-                            "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                          }
-                        ],
-                        style: {
-                          width: `${100 / rows.length}%`
+                          onClick: () => dateSelectEvent(item),
+                          onMouseenter: () => dateMouseenterEvent(item),
+                          onMouseleave: dateMouseleaveEvent
                         },
-                        onClick: () => dateSelectEvent(item),
-                        onMouseenter: () => dateMouseenterEvent(item),
-                        onMouseleave: dateMouseleaveEvent
-                      },
-                      [
-                        h(
-                          "div",
-                          {
-                            class: "vxe-date-panel--view-item-inner"
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-panel--view-item-inner"
+                            },
+                            renderDateLabel(item, item.label)
+                          )
+                        ]
+                      );
+                    })
+                  );
+                })
+              )
+            ]
+          )
+        ];
+      };
+      const renderDateMonthTable = () => {
+        const { type, multiple, cellClassName } = 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(
+            "div",
+            {
+              class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--view-body"
+                },
+                monthDatas.map((rows) => {
+                  return h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--view-row",
+                      style: {
+                        height: `${100 / monthDatas.length}%`
+                      }
+                    },
+                    rows.map((item) => {
+                      const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                      return h(
+                        "div",
+                        {
+                          class: [
+                            "vxe-date-panel--view-item",
+                            cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                            {
+                              "is--prev": item.isPrev,
+                              "is--current": item.isCurrent,
+                              "is--now": item.isNow,
+                              "is--next": item.isNext,
+                              "is--range-disabled": isRangeDisabled(item),
+                              "is--disabled": isDateDisabled(item),
+                              "is--selected": isSelected,
+                              "is--over": overCount && !isSelected,
+                              "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                            }
+                          ],
+                          style: {
+                            width: `${100 / rows.length}%`
                           },
-                          renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`))
-                        )
-                      ]
-                    );
-                  })
-                );
-              })
-            )
-          ]
-        )
-      ];
-    };
-    const renderDateYearTable = () => {
-      const { type, multiple, cellClassName } = 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(
-          "div",
-          {
-            class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
-          },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--view-body"
-              },
-              yearDatas.map((rows) => {
-                return h(
-                  "div",
-                  {
-                    class: "vxe-date-panel--view-row",
-                    style: {
-                      height: `${100 / yearDatas.length}%`
-                    }
-                  },
-                  rows.map((item) => {
-                    const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
-                    return h(
-                      "div",
-                      {
-                        class: [
-                          "vxe-date-panel--view-item",
-                          cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
-                          {
-                            "is--prev": item.isPrev,
-                            "is--current": item.isCurrent,
-                            "is--now": item.isNow,
-                            "is--next": item.isNext,
-                            "is--range-disabled": isRangeDisabled(item),
-                            "is--disabled": isDateDisabled(item),
-                            "is--selected": isSelected,
-                            "is--over": overCount && !isSelected,
-                            "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
-                          }
-                        ],
-                        style: {
-                          width: `${100 / rows.length}%`
+                          onClick: () => dateSelectEvent(item),
+                          onMouseenter: () => dateMouseenterEvent(item),
+                          onMouseleave: dateMouseleaveEvent
                         },
-                        onClick: () => dateSelectEvent(item),
-                        onMouseenter: () => dateMouseenterEvent(item),
-                        onMouseleave: dateMouseleaveEvent
-                      },
-                      [
-                        h(
-                          "div",
-                          {
-                            class: "vxe-date-panel--view-item-inner"
-                          },
-                          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 { datePanelType } = reactData;
-      const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
-      const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
-      const selectDatePanelObj = computeSelectDatePanelObj.value;
-      return [
-        h(
-          "div",
-          {
-            class: "vxe-date-panel--picker-header"
-          },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--picker-type-wrapper"
-              },
-              [
-                datePanelType === "year" ? h(
-                  "span",
-                  {
-                    class: "vxe-date-panel--picker-label"
-                  },
-                  selectDatePanelObj.y
-                ) : h(
-                  "span",
-                  {
-                    class: "vxe-date-panel--picker-btns"
-                  },
-                  [
-                    h(
-                      "span",
-                      {
-                        class: "vxe-date-panel--picker-btn",
-                        onClick: dateToggleYearTypeEvent
-                      },
-                      selectDatePanelObj.y
-                    ),
-                    selectDatePanelObj.m ? h(
-                      "span",
-                      {
-                        class: "vxe-date-panel--picker-btn",
-                        onClick: dateToggleMonthTypeEvent
-                      },
-                      selectDatePanelObj.m
-                    ) : renderEmptyElement($xeDatePanel)
-                  ]
-                )
-              ]
-            ),
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--picker-btn-wrapper"
-              },
-              [
-                h(
-                  "span",
-                  {
-                    class: [
-                      "vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn",
-                      {
-                        "is--disabled": isDisabledPrevDateBtn
-                      }
-                    ],
-                    onClick: datePrevEvent
-                  },
-                  [
-                    h("i", {
-                      class: "vxe-icon-caret-left"
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-panel--view-item-inner"
+                            },
+                            renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`))
+                          )
+                        ]
+                      );
                     })
-                  ]
-                ),
-                h(
-                  "span",
-                  {
-                    class: "vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn",
-                    onClick: dateTodayMonthEvent
-                  },
-                  [
-                    h("i", {
-                      class: "vxe-icon-dot"
+                  );
+                })
+              )
+            ]
+          )
+        ];
+      };
+      const renderDateQuarterTable = () => {
+        const { type, multiple, cellClassName } = 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(
+            "div",
+            {
+              class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--view-body"
+                },
+                quarterDatas.map((rows) => {
+                  return h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--view-row",
+                      style: {
+                        height: `${100 / quarterDatas.length}%`
+                      }
+                    },
+                    rows.map((item) => {
+                      const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                      return h(
+                        "div",
+                        {
+                          class: [
+                            "vxe-date-panel--view-item",
+                            cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                            {
+                              "is--prev": item.isPrev,
+                              "is--current": item.isCurrent,
+                              "is--now": item.isNow,
+                              "is--next": item.isNext,
+                              "is--range-disabled": isRangeDisabled(item),
+                              "is--disabled": isDateDisabled(item),
+                              "is--selected": isSelected,
+                              "is--over": overCount && !isSelected,
+                              "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                            }
+                          ],
+                          style: {
+                            width: `${100 / rows.length}%`
+                          },
+                          onClick: () => dateSelectEvent(item),
+                          onMouseenter: () => dateMouseenterEvent(item),
+                          onMouseleave: dateMouseleaveEvent
+                        },
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-panel--view-item-inner"
+                            },
+                            renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`))
+                          )
+                        ]
+                      );
                     })
-                  ]
-                ),
-                h(
-                  "span",
-                  {
-                    class: [
-                      "vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn",
-                      {
-                        "is--disabled": isDisabledNextDateBtn
+                  );
+                })
+              )
+            ]
+          )
+        ];
+      };
+      const renderDateYearTable = () => {
+        const { type, multiple, cellClassName } = 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(
+            "div",
+            {
+              class: ["vxe-date-panel--view-wrapper", `type--${datePanelType}`]
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--view-body"
+                },
+                yearDatas.map((rows) => {
+                  return h(
+                    "div",
+                    {
+                      class: "vxe-date-panel--view-row",
+                      style: {
+                        height: `${100 / yearDatas.length}%`
                       }
-                    ],
-                    onClick: dateNextEvent
-                  },
-                  [
-                    h("i", {
-                      class: "vxe-icon-caret-right"
+                    },
+                    rows.map((item) => {
+                      const isSelected = multiple ? dateListValue.some((val) => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat);
+                      return h(
+                        "div",
+                        {
+                          class: [
+                            "vxe-date-panel--view-item",
+                            cellClassName ? XEUtils.isFunction(cellClassName) ? `${cellClassName({ $datePanel: $xeDatePanel, type, viewType: datePanelType, date: item.date }) || ""}` : `${cellClassName || ""}` : "",
+                            {
+                              "is--prev": item.isPrev,
+                              "is--current": item.isCurrent,
+                              "is--now": item.isNow,
+                              "is--next": item.isNext,
+                              "is--range-disabled": isRangeDisabled(item),
+                              "is--disabled": isDateDisabled(item),
+                              "is--selected": isSelected,
+                              "is--over": overCount && !isSelected,
+                              "is--hover": !overCount && XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                            }
+                          ],
+                          style: {
+                            width: `${100 / rows.length}%`
+                          },
+                          onClick: () => dateSelectEvent(item),
+                          onMouseenter: () => dateMouseenterEvent(item),
+                          onMouseleave: dateMouseleaveEvent
+                        },
+                        [
+                          h(
+                            "div",
+                            {
+                              class: "vxe-date-panel--view-item-inner"
+                            },
+                            renderDateLabel(item, item.year)
+                          )
+                        ]
+                      );
                     })
-                  ]
-                )
-              ]
-            )
-          ]
-        ),
-        h(
-          "div",
-          {
-            class: "vxe-date-panel--picker-body"
-          },
-          renderDateTable()
-        )
-      ];
-    };
-    const renderTimePanel = () => {
-      const { type } = props;
-      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 [
-        type === "time" ? renderEmptyElement($xeDatePanel) : h(
-          "div",
-          {
-            class: "vxe-date-panel--time-header"
-          },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--time-title"
-              },
-              dateTimeLabel
-            )
-          ]
-        ),
-        h(
-          "div",
-          {
-            ref: refInputTimeBody,
-            class: "vxe-date-panel--time-body"
-          },
-          [
-            h(
-              VxeScrollbarComponent,
-              {
-                autoHide: true,
-                class: "vxe-date-panel--time-hour-list",
-                viewClassName: "vxe-date-panel--time-list-view",
-                viewInnerClassName: "vxe-date-panel--time-list-inner"
-              },
-              {
-                default: () => {
-                  return hourList.map((item, index) => {
-                    return h(
-                      "div",
-                      {
-                        key: index,
-                        class: [
-                          "vxe-date-panel--time-item",
-                          {
-                            "is--disabled": item.disabled,
-                            "is--selected": datetimePanelValue && datetimePanelValue.getHours() === item.value
-                          }
-                        ],
-                        onClick: (evnt) => dateHourEvent(evnt, item)
-                      },
-                      item.label
-                    );
-                  });
+                  );
+                })
+              )
+            ]
+          )
+        ];
+      };
+      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 { datePanelType } = reactData;
+        const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
+        const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
+        const selectDatePanelObj = computeSelectDatePanelObj.value;
+        return [
+          h(
+            "div",
+            {
+              class: "vxe-date-panel--picker-header"
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--picker-type-wrapper"
+                },
+                [
+                  datePanelType === "year" ? h(
+                    "span",
+                    {
+                      class: "vxe-date-panel--picker-label"
+                    },
+                    selectDatePanelObj.y
+                  ) : h(
+                    "span",
+                    {
+                      class: "vxe-date-panel--picker-btns"
+                    },
+                    [
+                      h(
+                        "span",
+                        {
+                          class: "vxe-date-panel--picker-btn",
+                          onClick: dateToggleYearTypeEvent
+                        },
+                        selectDatePanelObj.y
+                      ),
+                      selectDatePanelObj.m ? h(
+                        "span",
+                        {
+                          class: "vxe-date-panel--picker-btn",
+                          onClick: dateToggleMonthTypeEvent
+                        },
+                        selectDatePanelObj.m
+                      ) : renderEmptyElement($xeDatePanel)
+                    ]
+                  )
+                ]
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--picker-btn-wrapper"
+                },
+                [
+                  h(
+                    "span",
+                    {
+                      class: [
+                        "vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn",
+                        {
+                          "is--disabled": isDisabledPrevDateBtn
+                        }
+                      ],
+                      onClick: datePrevEvent
+                    },
+                    [
+                      h("i", {
+                        class: "vxe-icon-caret-left"
+                      })
+                    ]
+                  ),
+                  h(
+                    "span",
+                    {
+                      class: "vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn",
+                      onClick: dateTodayMonthEvent
+                    },
+                    [
+                      h("i", {
+                        class: "vxe-icon-dot"
+                      })
+                    ]
+                  ),
+                  h(
+                    "span",
+                    {
+                      class: [
+                        "vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn",
+                        {
+                          "is--disabled": isDisabledNextDateBtn
+                        }
+                      ],
+                      onClick: dateNextEvent
+                    },
+                    [
+                      h("i", {
+                        class: "vxe-icon-caret-right"
+                      })
+                    ]
+                  )
+                ]
+              )
+            ]
+          ),
+          h(
+            "div",
+            {
+              class: "vxe-date-panel--picker-body"
+            },
+            renderDateTable()
+          )
+        ];
+      };
+      const renderTimePanel = () => {
+        const { type } = props;
+        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 [
+          type === "time" ? renderEmptyElement($xeDatePanel) : h(
+            "div",
+            {
+              class: "vxe-date-panel--time-header"
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--time-title"
+                },
+                dateTimeLabel
+              )
+            ]
+          ),
+          h(
+            "div",
+            {
+              ref: refInputTimeBody,
+              class: "vxe-date-panel--time-body"
+            },
+            [
+              h(
+                VxeScrollbarComponent,
+                {
+                  autoHide: true,
+                  class: "vxe-date-panel--time-hour-list",
+                  viewClassName: "vxe-date-panel--time-list-view",
+                  viewInnerClassName: "vxe-date-panel--time-list-inner"
+                },
+                {
+                  default: () => {
+                    return hourList.map((item, index) => {
+                      return h(
+                        "div",
+                        {
+                          key: index,
+                          class: [
+                            "vxe-date-panel--time-item",
+                            {
+                              "is--disabled": item.disabled,
+                              "is--selected": datetimePanelValue && datetimePanelValue.getHours() === item.value
+                            }
+                          ],
+                          onClick: (evnt) => dateHourEvent(evnt, item)
+                        },
+                        item.label
+                      );
+                    });
+                  }
                 }
-              }
-            ),
-            hasTimeMinute ? h(
-              VxeScrollbarComponent,
-              {
-                autoHide: true,
-                class: "vxe-date-panel--time-minute-list",
-                viewClassName: "vxe-date-panel--time-list-view",
-                viewInnerClassName: "vxe-date-panel--time-list-inner"
-              },
-              {
-                default: () => {
-                  return minuteList.map((item, index) => {
-                    return h(
-                      "div",
-                      {
-                        key: index,
-                        class: [
-                          "vxe-date-panel--time-item",
-                          {
-                            "is--disabled": item.disabled,
-                            "is--selected": datetimePanelValue && datetimePanelValue.getMinutes() === item.value
-                          }
-                        ],
-                        onClick: (evnt) => dateMinuteEvent(evnt, item)
-                      },
-                      item.label
-                    );
-                  });
+              ),
+              hasTimeMinute ? h(
+                VxeScrollbarComponent,
+                {
+                  autoHide: true,
+                  class: "vxe-date-panel--time-minute-list",
+                  viewClassName: "vxe-date-panel--time-list-view",
+                  viewInnerClassName: "vxe-date-panel--time-list-inner"
+                },
+                {
+                  default: () => {
+                    return minuteList.map((item, index) => {
+                      return h(
+                        "div",
+                        {
+                          key: index,
+                          class: [
+                            "vxe-date-panel--time-item",
+                            {
+                              "is--disabled": item.disabled,
+                              "is--selected": datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+                            }
+                          ],
+                          onClick: (evnt) => dateMinuteEvent(evnt, item)
+                        },
+                        item.label
+                      );
+                    });
+                  }
                 }
-              }
-            ) : renderEmptyElement($xeDatePanel),
-            hasTimeMinute && hasTimeSecond ? h(
-              VxeScrollbarComponent,
-              {
-                autoHide: true,
-                class: "vxe-date-panel--time-second-list",
-                viewClassName: "vxe-date-panel--time-list-view",
-                viewInnerClassName: "vxe-date-panel--time-list-inner"
-              },
-              {
-                default: () => {
-                  return secondList.map((item, index) => {
-                    return h(
-                      "div",
-                      {
-                        key: index,
-                        class: [
-                          "vxe-date-panel--time-item",
-                          {
-                            "is--disabled": item.disabled,
-                            "is--selected": datetimePanelValue && datetimePanelValue.getSeconds() === item.value
-                          }
-                        ],
-                        onClick: (evnt) => dateSecondEvent(evnt, item)
-                      },
-                      item.label
-                    );
-                  });
+              ) : renderEmptyElement($xeDatePanel),
+              hasTimeMinute && hasTimeSecond ? h(
+                VxeScrollbarComponent,
+                {
+                  autoHide: true,
+                  class: "vxe-date-panel--time-second-list",
+                  viewClassName: "vxe-date-panel--time-list-view",
+                  viewInnerClassName: "vxe-date-panel--time-list-inner"
+                },
+                {
+                  default: () => {
+                    return secondList.map((item, index) => {
+                      return h(
+                        "div",
+                        {
+                          key: index,
+                          class: [
+                            "vxe-date-panel--time-item",
+                            {
+                              "is--disabled": item.disabled,
+                              "is--selected": datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+                            }
+                          ],
+                          onClick: (evnt) => dateSecondEvent(evnt, item)
+                        },
+                        item.label
+                      );
+                    });
+                  }
                 }
-              }
-            ) : renderEmptyElement($xeDatePanel)
-          ]
-        )
-      ];
-    };
-    const renderPickerPanel = () => {
-      const { type } = props;
-      if (type === "datetime") {
+              ) : renderEmptyElement($xeDatePanel)
+            ]
+          )
+        ];
+      };
+      const renderPickerPanel = () => {
+        const { type } = props;
+        if (type === "datetime") {
+          return h(
+            "div",
+            {
+              key: type,
+              ref: refPanelWrapper,
+              class: "vxe-date-panel--time-layout-wrapper"
+            },
+            [
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--time-left-wrapper"
+                },
+                renderDatePanel()
+              ),
+              h(
+                "div",
+                {
+                  class: "vxe-date-panel--time-right-wrapper"
+                },
+                renderTimePanel()
+              )
+            ]
+          );
+        } else if (type === "time") {
+          return h(
+            "div",
+            {
+              key: type,
+              ref: refPanelWrapper,
+              class: "vxe-date-panel--wrapper"
+            },
+            renderTimePanel()
+          );
+        }
         return h(
           "div",
           {
-            key: type,
+            key: type || "default",
             ref: refPanelWrapper,
-            class: "vxe-date-panel--time-layout-wrapper"
+            class: "vxe-date-panel--wrapper"
           },
-          [
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--time-left-wrapper"
-              },
-              renderDatePanel()
-            ),
-            h(
-              "div",
-              {
-                class: "vxe-date-panel--time-right-wrapper"
-              },
-              renderTimePanel()
-            )
-          ]
+          renderDatePanel()
         );
-      } else if (type === "time") {
+      };
+      const renderVN = () => {
+        const { type } = props;
+        const vSize = computeSize.value;
         return h(
           "div",
           {
-            key: type,
-            ref: refPanelWrapper,
-            class: "vxe-date-panel--wrapper"
+            class: [
+              "vxe-date-panel",
+              `type--${type}`,
+              {
+                [`size--${vSize}`]: vSize
+              }
+            ]
           },
-          renderTimePanel()
+          [renderPickerPanel()]
         );
-      }
-      return h(
-        "div",
-        {
-          key: type || "default",
-          ref: refPanelWrapper,
-          class: "vxe-date-panel--wrapper"
-        },
-        renderDatePanel()
+      };
+      watch(
+        () => props.modelValue,
+        (val) => {
+          updateModelValue(val);
+          changeValue();
+        }
       );
-    };
-    const renderVN = () => {
-      const { type } = props;
-      const vSize = computeSize.value;
-      return h(
-        "div",
-        {
-          class: [
-            "vxe-date-panel",
-            `type--${type}`,
-            {
-              [`size--${vSize}`]: vSize
-            }
-          ]
-        },
-        [renderPickerPanel()]
+      watch(
+        () => props.type,
+        () => {
+          Object.assign(reactData, {
+            inputLabel: "",
+            datetimePanelValue: null,
+            datePanelValue: null,
+            datePanelLabel: "",
+            datePanelType: "day",
+            selectMonth: null,
+            currentDate: null
+          });
+          initValue();
+        }
       );
-    };
-    watch(
-      () => props.modelValue,
-      (val) => {
-        updateModelValue(val);
-        changeValue();
-      }
-    );
-    watch(
-      () => props.type,
-      () => {
-        Object.assign(reactData, {
-          inputLabel: "",
-          datetimePanelValue: null,
-          datePanelValue: null,
-          datePanelLabel: "",
-          datePanelType: "day",
-          selectMonth: null,
-          currentDate: null
-        });
-        initValue();
-      }
-    );
-    watch(computeDateLabelFormat, () => {
-      const isDatePanelType = computeIsDatePanelType.value;
-      if (isDatePanelType) {
-        dateParseValue(reactData.datePanelValue);
-        reactData.inputLabel = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-      }
-    });
-    initValue();
-    dateOpenPanel();
-    onMounted(() => {
-      const { type, multiple } = props;
-      if (multiple && type === "time") {
-        errLog("vxe.error.notSupportProp", [`type=${type}`, "multiple=true", "multiple=false"]);
-      }
-    });
-    $xeDatePanel.renderVN = renderVN;
-    return $xeDatePanel;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      watch(computeDateLabelFormat, () => {
+        const isDatePanelType = computeIsDatePanelType.value;
+        if (isDatePanelType) {
+          dateParseValue(reactData.datePanelValue);
+          reactData.inputLabel = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
+        }
+      });
+      initValue();
+      dateOpenPanel();
+      onMounted(() => {
+        const { type, multiple } = props;
+        if (multiple && type === "time") {
+          errLog("vxe.error.notSupportProp", [`type=${type}`, "multiple=true", "multiple=false"]);
+        }
+      });
+      $xeDatePanel.renderVN = renderVN;
+      return $xeDatePanel;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   date_panel_default as default
 };