vxe-pc-ui 4.5.36 → 4.6.0

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

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