vxe-pc-ui 4.5.36 → 4.6.0

package/lib/index.umd.js

@@ -1907,7 +1907,9 @@ __webpack_require__.d(__webpack_exports__, {
   CollapsePane: function() { return /* reexport */ CollapsePane; },
   ColorPicker: function() { return /* reexport */ ColorPicker; },
   Countdown: function() { return /* reexport */ Countdown; },
+  DatePanel: function() { return /* reexport */ DatePanel; },
   DatePicker: function() { return /* reexport */ DatePicker; },
+  DateRangePicker: function() { return /* reexport */ DateRangePicker; },
   Drawer: function() { return /* reexport */ Drawer; },
   DrawerController: function() { return /* reexport */ DrawerController; },
   Empty: function() { return /* reexport */ Empty; },
@@ -1993,7 +1995,9 @@ __webpack_require__.d(__webpack_exports__, {
   VxeColorPicker: function() { return /* reexport */ VxeColorPicker; },
   VxeCore: function() { return /* reexport */ VxeCore; },
   VxeCountdown: function() { return /* reexport */ VxeCountdown; },
+  VxeDatePanel: function() { return /* reexport */ VxeDatePanel; },
   VxeDatePicker: function() { return /* reexport */ VxeDatePicker; },
+  VxeDateRangePicker: function() { return /* reexport */ VxeDateRangePicker; },
   VxeDrawer: function() { return /* reexport */ VxeDrawer; },
   VxeEmpty: function() { return /* reexport */ VxeEmpty; },
   VxeForm: function() { return /* reexport */ VxeForm; },
@@ -2129,7 +2133,9 @@ __webpack_require__.d(components_namespaceObject, {
   CollapsePane: function() { return CollapsePane; },
   ColorPicker: function() { return ColorPicker; },
   Countdown: function() { return Countdown; },
+  DatePanel: function() { return DatePanel; },
   DatePicker: function() { return DatePicker; },
+  DateRangePicker: function() { return DateRangePicker; },
   Drawer: function() { return Drawer; },
   DrawerController: function() { return DrawerController; },
   Empty: function() { return Empty; },
@@ -2215,7 +2221,9 @@ __webpack_require__.d(components_namespaceObject, {
   VxeColorPicker: function() { return VxeColorPicker; },
   VxeCore: function() { return VxeCore; },
   VxeCountdown: function() { return VxeCountdown; },
+  VxeDatePanel: function() { return VxeDatePanel; },
   VxeDatePicker: function() { return VxeDatePicker; },
+  VxeDateRangePicker: function() { return VxeDateRangePicker; },
   VxeDrawer: function() { return VxeDrawer; },
   VxeEmpty: function() { return VxeEmpty; },
   VxeForm: function() { return VxeForm; },
@@ -2346,7 +2354,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// CONCATENATED MODULE: ./node_modules/@vxe-ui/core/es/src/core.js
-const coreVersion = "4.1.0";
+const coreVersion = "4.1.2";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -2917,7 +2925,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "4.1.0";
+const version = "4.1.2";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -3721,7 +3729,7 @@ setTheme();
           year: 'yyyy'
         },
         weeks: {
-          w: '周',
+          w: '',
           w0: '周日',
           w1: '周一',
           w2: '周二',
@@ -4202,14 +4210,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.5.36"}`;
+const log_version = `ui v${"4.6.0"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.5.36";
+const ui_version = "4.6.0";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -4281,22 +4289,45 @@ setConfig({
     showColorExtractor: true,
     showQuick: true
   },
-  datePicker: {
-    // size: null,
-    // transfer: false
+  datePanel: {
     // parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',
     // labelFormat: '',
     // valueFormat: '',
     startDate: new Date(1900, 0, 1),
     endDate: new Date(2100, 0, 1),
     startDay: 1,
+    selectDay: 1
+  },
+  datePicker: {
+    // size: null,
+    // transfer: false,
+    shortcutConfig: {
+      // position: 'left',
+      align: 'left',
+      mode: 'text',
+      autoClose: true
+    },
+    startDay: 1,
     selectDay: 1,
+    autoClose: true,
+    showClearButton: null,
+    showConfirmButton: null
+  },
+  dateRangePicker: {
+    // size: null,
+    // transfer: false,
     shortcutConfig: {
       // position: 'left',
       align: 'left',
       mode: 'text',
       autoClose: true
-    }
+    },
+    startDay: 1,
+    selectDay: 1,
+    separator: ' ~ ',
+    autoClose: true,
+    showClearButton: null,
+    showConfirmButton: null
   },
   drawer: {
     // size: null,
@@ -4449,7 +4480,9 @@ setConfig({
     // pageSizes: [10, 15, 20, 50, 100],
     // layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
   },
-  print: {},
+  print: {
+    pageStyle: {}
+  },
   passwordInput: {
     controls: true
   },
@@ -7182,7 +7215,7 @@ dynamicApp.use(VxeButtonGroup);
 index_esm_VxeUI.component(button_group);
 const ButtonGroup = VxeButtonGroup;
 /* harmony default export */ var packages_button_group = (VxeButtonGroup);
-;// CONCATENATED MODULE: ./packages/date-picker/src/util.ts
+;// CONCATENATED MODULE: ./packages/date-panel/src/util.ts
 
 function toStringTimeDate(str) {
   if (str) {
@@ -7221,6 +7254,173 @@ function getDateQuarter(date) {
   }
   return 4;
 }
+const parseDateValue = (val, type, options) => {
+  const {
+    valueFormat
+  } = options;
+  if (val) {
+    if (type === 'time') {
+      return toStringTimeDate(val);
+    }
+    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(val) || /^[0-9]{11,15}$/.test(`${val}`)) {
+      return new Date(Number(val));
+    }
+    if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(val)) {
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().last(val.split(',')), valueFormat);
+    }
+    return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(val, valueFormat);
+  }
+  return null;
+};
+const parseDateString = (val, type, options) => {
+  const dValue = parseDateValue(val, type, options);
+  return dValue ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(dValue, options.valueFormat) : '';
+};
+function parseDateObj(val, type, options) {
+  const {
+    labelFormat,
+    firstDay
+  } = options;
+  let dValue = null;
+  let dLabel = '';
+  if (val) {
+    dValue = parseDateValue(val, type, options);
+  }
+  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isValidDate(dValue)) {
+    dLabel = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(dValue, labelFormat, {
+      firstDay
+    });
+    // 周选择器，由于年份和第几周是冲突的行为，所以需要特殊处理，判断是否跨年，例如
+    // '2024-12-31' 'yyyy-MM-dd W' >> '2024-12-31 1'
+    // '2025-01-01' 'yyyy-MM-dd W' >> '2025-01-01 1'
+    if (labelFormat && type === 'week') {
+      const weekNum = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getYearWeek(dValue, firstDay);
+      const weekDate = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(dValue, 0, weekNum === 1 ? (6 + firstDay) % 7 : firstDay, firstDay);
+      const weekFullYear = weekDate.getFullYear();
+      if (weekFullYear !== dValue.getFullYear()) {
+        const yyIndex = labelFormat.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;
+  }
+  return {
+    label: dLabel,
+    value: dValue
+  };
+}
+function getDateByCode(code, val, type, options) {
+  const {
+    valueFormat,
+    firstDay
+  } = options;
+  let dValue = null;
+  const value = (code === 'prev' || code === 'next' ? new Date() : val ? parseDateValue(val, type, options) : null) || new Date();
+  switch (code) {
+    case 'prev':
+    case 'next':
+    case 'minus':
+    case 'plus':
+      {
+        const offsetNum = code === 'plus' || code === 'next' ? 1 : -1;
+        switch (type) {
+          case 'date':
+          case 'datetime':
+            dValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatDay(value, offsetNum);
+            break;
+          case 'week':
+            dValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(value, offsetNum, firstDay, firstDay);
+            break;
+          case 'month':
+            dValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(value, offsetNum);
+            break;
+          case 'quarter':
+            dValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatQuarter(value, offsetNum);
+            break;
+          case 'year':
+            dValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatYear(value, offsetNum);
+            break;
+        }
+        break;
+      }
+    default:
+      dValue = new Date();
+      break;
+  }
+  return {
+    value: dValue ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(dValue, valueFormat) : ''
+  };
+}
+const rangeDateOffsetNumMaps = {
+  last180: -180,
+  last90: -90,
+  last60: -60,
+  last30: -30,
+  last7: -7,
+  last3: -3,
+  last1: -1
+};
+function getRangeDateOffsetNum(code) {
+  return rangeDateOffsetNumMaps[code] || 0;
+}
+function getRangeDateByCode(code, val, type, options) {
+  const {
+    valueFormat,
+    firstDay
+  } = options;
+  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(val)) {
+    val = val.join('');
+  }
+  const value = (val ? parseDateValue(val, type, options) : null) || new Date();
+  let sValue = null;
+  const eValue = value;
+  switch (code) {
+    case 'last1':
+    case 'last3':
+    case 'last7':
+    case 'last30':
+    case 'last60':
+    case 'last90':
+    case 'last180':
+      {
+        const offsetNum = getRangeDateOffsetNum(code);
+        switch (type) {
+          case 'date':
+          case 'datetime':
+            sValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatDay(value, offsetNum);
+            break;
+          case 'week':
+            sValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(value, offsetNum, firstDay, firstDay);
+            break;
+          case 'month':
+            sValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(value, offsetNum);
+            break;
+          case 'quarter':
+            sValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatQuarter(value, offsetNum);
+            break;
+          case 'year':
+            sValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatYear(value, offsetNum);
+            break;
+        }
+        break;
+      }
+    default:
+      sValue = new Date();
+      break;
+  }
+  const startValue = sValue ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(sValue, valueFormat) : '';
+  const endValue = eValue ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(eValue, valueFormat) : '';
+  return {
+    startValue,
+    endValue
+  };
+}
 ;// CONCATENATED MODULE: ./packages/calendar/src/calendar.ts
 
 
@@ -14399,130 +14599,73 @@ dynamicApp.use(VxeCountdown);
 index_esm_VxeUI.component(countdown);
 const Countdown = VxeCountdown;
 /* harmony default export */ var packages_countdown = (VxeCountdown);
-;// CONCATENATED MODULE: ./packages/date-picker/src/date-picker.ts
+;// CONCATENATED MODULE: ./packages/date-panel/src/date-panel.ts
 
 
 
 
 
-
-
-
-
-/* harmony default export */ var date_picker = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
-  name: 'VxeDatePicker',
+/* harmony default export */ var date_panel = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+  name: 'VxeDatePanel',
   props: {
     modelValue: [String, Number, Date],
-    immediate: {
-      type: Boolean,
-      default: true
-    },
-    name: String,
     type: {
       type: String,
       default: 'date'
     },
-    clearable: {
-      type: Boolean,
-      default: () => getConfig().datePicker.clearable
-    },
-    readonly: {
-      type: Boolean,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    placeholder: String,
-    maxLength: [String, Number],
-    autoComplete: {
-      type: String,
-      default: 'off'
-    },
-    align: String,
-    form: String,
     className: String,
     size: {
       type: String,
-      default: () => getConfig().datePicker.size || getConfig().size
+      default: () => getConfig().datePanel.size || getConfig().size
     },
     multiple: Boolean,
     limitCount: {
       type: [String, Number],
-      default: () => getConfig().upload.limitCount
+      default: () => getConfig().datePanel.limitCount
     },
     // date、week、month、quarter、year
     startDate: {
       type: [String, Number, Date],
-      default: () => getConfig().datePicker.startDate
+      default: () => getConfig().datePanel.startDate
     },
     endDate: {
       type: [String, Number, Date],
-      default: () => getConfig().datePicker.endDate
+      default: () => getConfig().datePanel.endDate
     },
     minDate: [String, Number, Date],
     maxDate: [String, Number, Date],
     startDay: {
       type: [String, Number],
-      default: () => getConfig().datePicker.startDay
+      default: () => getConfig().datePanel.startDay
     },
     labelFormat: String,
     valueFormat: String,
-    editable: {
-      type: Boolean,
-      default: true
-    },
     festivalMethod: {
       type: Function,
-      default: () => getConfig().datePicker.festivalMethod
+      default: () => getConfig().datePanel.festivalMethod
     },
     disabledMethod: {
       type: Function,
-      default: () => getConfig().datePicker.disabledMethod
+      default: () => getConfig().datePanel.disabledMethod
     },
     // week
     selectDay: {
       type: [String, Number],
-      default: () => getConfig().datePicker.selectDay
-    },
-    prefixIcon: String,
-    suffixIcon: String,
-    placement: String,
-    transfer: {
-      type: Boolean,
-      default: null
-    },
-    shortcutConfig: Object,
-    // 已废弃 startWeek，被 startDay 替换
-    startWeek: Number,
-    // 已废弃
-    maxlength: [String, Number],
-    // 已废弃
-    autocomplete: String
+      default: () => getConfig().datePanel.selectDay
+    }
   },
-  emits: ['update:modelValue', 'input', 'change', 'keydown', 'keyup', 'click', 'focus', 'blur', 'clear', 'prefix-click', 'suffix-click', 'date-prev', 'date-today', 'date-next', 'shortcut-click'],
+  emits: ['update:modelValue', 'change', 'click', 'clear', 'date-prev', 'date-today', 'date-next', 'confirm'],
   setup(props, context) {
     const {
-      slots,
       emit
     } = context;
-    const $xeModal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeModal', null);
-    const $xeDrawer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeDrawer', null);
-    const $xeTable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTable', null);
-    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
-    const formItemInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('xeFormItemInfo', null);
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     const {
       computeSize
     } = useSize(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      initialized: false,
-      panelIndex: 0,
       visiblePanel: false,
       isAniVisible: false,
-      panelStyle: {},
-      panelPlacement: '',
       isActivated: false,
       inputValue: '',
       datetimePanelValue: null,
@@ -14539,15 +14682,12 @@ const Countdown = VxeCountdown;
       hpTimeout: undefined
     };
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refInputTarget = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refInputPanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refPanelWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refInputTimeBody = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refMaps = {
-      refElem,
-      refInput: refInputTarget
+      refElem
     };
-    const $xeDatePicker = {
+    const $xeDatePanel = {
       xID,
       props,
       context,
@@ -14555,76 +14695,30 @@ const Countdown = VxeCountdown;
       internalData,
       getRefMaps: () => refMaps
     };
-    let datePickerMethods = {};
-    const computeBtnTransfer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        transfer
-      } = props;
-      if (transfer === null) {
-        const globalTransfer = getConfig().datePicker.transfer;
-        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
-          return globalTransfer;
-        }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-          return true;
-        }
-      }
-      return transfer;
-    });
-    const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        readonly
-      } = props;
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly;
-        }
-        return false;
-      }
-      return readonly;
-    });
-    const computeIsDisabled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        disabled
-      } = props;
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled;
-        }
-        return false;
-      }
-      return disabled;
-    });
     const computeIsDateTimeType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         type
       } = props;
       return type === 'time' || type === 'datetime';
     });
-    const computeIsDatePickerType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+    const computeIsDatePanelType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const isDateTimeType = computeIsDateTimeType.value;
       return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
     });
-    const computeIsClearable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return props.clearable;
-    });
     const computeDateStartTime = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return props.startDate ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(props.startDate) : null;
     });
     const computeDateEndTime = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return props.endDate ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(props.endDate) : null;
     });
-    const computeSupportMultiples = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
-    });
     const computeDateListValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         modelValue,
         multiple
       } = props;
-      const isDatePickerType = computeIsDatePickerType.value;
+      const isDatePanelType = computeIsDatePanelType.value;
       const dateValueFormat = computeDateValueFormat.value;
-      if (multiple && modelValue && isDatePickerType) {
+      if (multiple && modelValue && isDatePanelType) {
         return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(modelValue).split(',').map(item => {
           const date = parseDate(item, dateValueFormat);
           if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isValidDate(date)) {
@@ -14679,10 +14773,10 @@ const Countdown = VxeCountdown;
       const {
         modelValue
       } = props;
-      const isDatePickerType = computeIsDatePickerType.value;
+      const isDatePanelType = computeIsDatePanelType.value;
       const dateValueFormat = computeDateValueFormat.value;
       let val = null;
-      if (modelValue && isDatePickerType) {
+      if (modelValue && isDatePanelType) {
         const date = parseDate(modelValue, dateValueFormat);
         if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isValidDate(date)) {
           val = date;
@@ -14706,7 +14800,7 @@ const Countdown = VxeCountdown;
         selectMonth
       } = reactData;
       if (selectMonth && dateEndTime) {
-        return selectMonth >= dateEndTime;
+        return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(selectMonth, 0, 'last') >= dateEndTime;
       }
       return false;
     });
@@ -14715,8 +14809,9 @@ const Countdown = VxeCountdown;
         datetimePanelValue
       } = reactData;
       const hasTimeSecond = computeHasTimeSecond.value;
+      const hasTimeMinute = computeHasTimeMinute.value;
       if (datetimePanelValue) {
-        return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(datetimePanelValue, hasTimeSecond ? 'HH:mm:ss' : 'HH:mm');
+        return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(datetimePanelValue, hasTimeMinute && hasTimeSecond ? 'HH:mm:ss' : hasTimeMinute ? 'HH:mm' : 'HH');
       }
       return '';
     });
@@ -14729,11 +14824,11 @@ const Countdown = VxeCountdown;
       const {
         labelFormat
       } = props;
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (isDatePickerType) {
+      const isDatePanelType = computeIsDatePanelType.value;
+      if (isDatePanelType) {
         return labelFormat || i18n_getI18n(`vxe.input.date.labelFormat.${props.type}`);
       }
-      return null;
+      return '';
     });
     const computeYearList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
@@ -14764,10 +14859,10 @@ const Countdown = VxeCountdown;
       return years;
     });
     const computeSelectDatePanelObj = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const isDatePickerType = computeIsDatePickerType.value;
+      const isDatePanelType = computeIsDatePanelType.value;
       let y = '';
       let m = '';
-      if (isDatePickerType) {
+      if (isDatePanelType) {
         const {
           datePanelType,
           selectMonth
@@ -14795,15 +14890,14 @@ const Countdown = VxeCountdown;
     });
     const computeFirstDayOfWeek = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        startDay,
-        startWeek
+        startDay
       } = props;
-      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(startDay) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(startDay) ? startDay : startWeek);
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(startDay);
     });
     const computeWeekDatas = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const weeks = [];
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (isDatePickerType) {
+      const isDatePanelType = computeIsDatePanelType.value;
+      if (isDatePanelType) {
         let sWeek = computeFirstDayOfWeek.value;
         weeks.push(sWeek);
         for (let index = 0; index < 6; index++) {
@@ -14818,8 +14912,8 @@ const Countdown = VxeCountdown;
       return weeks;
     });
     const computeDateHeaders = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (isDatePickerType) {
+      const isDatePanelType = computeIsDatePanelType.value;
+      if (isDatePanelType) {
         const weekDatas = computeWeekDatas.value;
         return weekDatas.map(day => {
           return {
@@ -14831,8 +14925,8 @@ const Countdown = VxeCountdown;
       return [];
     });
     const computeWeekHeaders = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (isDatePickerType) {
+      const isDatePanelType = computeIsDatePanelType.value;
+      if (isDatePanelType) {
         const dateHeaders = computeDateHeaders.value;
         return [{
           label: i18n_getI18n('vxe.input.date.weeks.w')
@@ -15007,57 +15101,15 @@ const Countdown = VxeCountdown;
       const minuteList = computeMinuteList.value;
       return minuteList;
     });
-    const computeInputReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        type,
-        editable,
-        multiple
-      } = props;
-      const formReadonly = computeFormReadonly.value;
-      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
-    });
-    const computeDatePickerType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return 'text';
-    });
-    const computeInpPlaceholder = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        placeholder
-      } = props;
-      if (placeholder) {
-        return getFuncText(placeholder);
-      }
-      const globalPlaceholder = getConfig().datePicker.placeholder;
-      if (globalPlaceholder) {
-        return getFuncText(globalPlaceholder);
-      }
-      return i18n_getI18n('vxe.base.pleaseSelect');
-    });
-    const computeInpImmediate = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        immediate
-      } = props;
-      return immediate;
-    });
-    const computeShortcutOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig);
-    });
     const updateModelValue = modelValue => {
       const {
-        isActivated,
-        visiblePanel
-      } = reactData;
-      let val = '';
-      if (modelValue) {
-        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
-          val = new Date(modelValue);
-        } else {
-          val = modelValue;
-        }
-      }
-      reactData.inputValue = val;
-      if (isActivated && visiblePanel) {
-        dateOpenPanel();
-      }
+        type
+      } = props;
+      const dateValueFormat = computeDateValueFormat.value;
+      reactData.inputValue = parseDateValue(modelValue, type, {
+        valueFormat: dateValueFormat
+      });
+      dateOpenPanel();
     };
     const parseDate = (value, format) => {
       const {
@@ -15075,66 +15127,71 @@ const Countdown = VxeCountdown;
       }
       return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(value, format);
     };
-    const triggerEvent = evnt => {
+    const dateRevert = () => {
+      reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
+    };
+    const afterCheckValue = inputLabel => {
       const {
-        inputValue
+        type
+      } = props;
+      const {
+        inputValue,
+        datetimePanelValue
       } = reactData;
-      dispatchEvent(evnt.type, {
-        value: inputValue
-      }, evnt);
+      const dateLabelFormat = computeDateLabelFormat.value;
+      if (inputLabel) {
+        let inpDateVal = parseDate(inputLabel, dateLabelFormat);
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isValidDate(inpDateVal)) {
+          if (type === 'time') {
+            inpDateVal = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 (inputLabel !== external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(dateValue, dateLabelFormat) || inputLabel !== external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(inpDateVal, dateLabelFormat, {
+              firstDay: firstDayOfWeek
+            });
+            if (isChange) {
+              dateChange(inpDateVal);
+            }
+          }
+        } else {
+          dateRevert();
+        }
+      } else {
+        handleChange('', {
+          type: 'check'
+        });
+      }
     };
     const handleChange = (value, evnt) => {
+      const {
+        modelValue
+      } = props;
       reactData.inputValue = value;
       emit('update:modelValue', value);
-      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(props.modelValue) !== value) {
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(modelValue) !== value) {
         dispatchEvent('change', {
           value
         }, evnt);
-        // 自动更新校验状态
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
-        }
-      }
-    };
-    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);
-        }
-      }
-    };
-    const changeEvent = evnt => {
-      const inpImmediate = computeInpImmediate.value;
-      if (!inpImmediate) {
-        triggerEvent(evnt);
-      }
-    };
-    const focusEvent = evnt => {
-      reactData.isActivated = true;
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (isDatePickerType) {
-        datePickerOpenEvent(evnt);
-      }
-      triggerEvent(evnt);
-    };
-    const clickPrefixEvent = evnt => {
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        const {
-          inputValue
-        } = reactData;
-        dispatchEvent('prefix-click', {
-          value: inputValue
-        }, evnt);
       }
     };
     const hidePanel = () => {
@@ -15146,75 +15203,30 @@ const Countdown = VxeCountdown;
         }, 350);
       });
     };
-    const clearValueEvent = (evnt, value) => {
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (isDatePickerType) {
-        hidePanel();
-      }
-      handleChange('', evnt);
-      dispatchEvent('clear', {
-        value
-      }, evnt);
-    };
-    const clickSuffixEvent = evnt => {
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        const {
-          inputValue
-        } = reactData;
-        dispatchEvent('suffix-click', {
-          value: inputValue
-        }, evnt);
-      }
-    };
-    const dateParseValue = value => {
+    const dateParseValue = val => {
       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 (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isValidDate(dValue)) {
-        dLabel = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getYearWeek(dValue, firstDayOfWeek);
-          const weekDate = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 dateObj = parseDateObj(val, type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      });
+      reactData.datePanelValue = dateObj.value;
+      reactData.datePanelLabel = dateObj.label;
     };
     /**
      * 值变化时处理
      */
     const changeValue = () => {
-      const isDatePickerType = computeIsDatePickerType.value;
+      const isDatePanelType = computeIsDatePanelType.value;
       const {
         inputValue
       } = reactData;
-      if (isDatePickerType) {
+      if (isDatePanelType) {
         dateParseValue(inputValue);
         reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
       }
@@ -15223,15 +15235,15 @@ const Countdown = VxeCountdown;
      * 检查初始值
      */
     const initValue = () => {
-      const isDatePickerType = computeIsDatePickerType.value;
-      updateModelValue(props.modelValue);
-      if (isDatePickerType) {
+      const {
+        modelValue
+      } = props;
+      const isDatePanelType = computeIsDatePanelType.value;
+      updateModelValue(modelValue);
+      if (isDatePanelType) {
         changeValue();
       }
     };
-    const dateRevert = () => {
-      reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-    };
     const dateCheckMonth = date => {
       const firstDayOfWeek = computeFirstDayOfWeek.value;
       const weekNum = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getYearWeek(date, firstDayOfWeek);
@@ -15322,88 +15334,6 @@ const Countdown = VxeCountdown;
         }
       }
     };
-    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 (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isValidDate(inpDateVal)) {
-            if (type === 'time') {
-              inpDateVal = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 !== external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(dateValue, dateLabelFormat) || inputValue !== external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toDateString(inpDateVal, dateLabelFormat, {
-                firstDay: firstDayOfWeek
-              });
-              if (isChange) {
-                dateChange(inpDateVal);
-              }
-            }
-          } else {
-            dateRevert();
-          }
-        } else {
-          handleChange('', {
-            type: 'check'
-          });
-        }
-      }
-    };
-    const blurEvent = evnt => {
-      const {
-        inputValue
-      } = reactData;
-      const inpImmediate = computeInpImmediate.value;
-      const value = inputValue;
-      if (!inpImmediate) {
-        handleChange(value, evnt);
-      }
-      afterCheckValue();
-      if (!reactData.visiblePanel) {
-        reactData.isActivated = false;
-      }
-      dispatchEvent('blur', {
-        value
-      }, evnt);
-      // 自动更新校验状态
-      if ($xeForm && formItemInfo) {
-        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
-      }
-    };
-    const keydownEvent = evnt => {
-      triggerEvent(evnt);
-    };
-    const keyupEvent = evnt => {
-      triggerEvent(evnt);
-    };
     // 日期
     const dateMonthHandle = (date, offsetMonth) => {
       const firstDayOfWeek = computeFirstDayOfWeek.value;
@@ -15563,7 +15493,7 @@ const Countdown = VxeCountdown;
           type: datePanelType,
           viewType: datePanelType,
           date,
-          $datePicker: $xeDatePicker
+          $datePanel: $xeDatePanel
         });
       }
       return false;
@@ -15685,6 +15615,9 @@ const Countdown = VxeCountdown;
         }
       }
     };
+    const dateMouseleaveEvent = () => {
+      reactData.datePanelValue = null;
+    };
     const updateTimePos = liElem => {
       if (liElem) {
         const height = liElem.offsetHeight;
@@ -15708,12 +15641,7 @@ const Countdown = VxeCountdown;
       }
       dateTimeChangeEvent(evnt);
     };
-    // const dateClearEvent = (evnt: MouseEvent) => {
-    //   const value = ''
-    //   handleChange(value, evnt)
-    //   dispatchEvent('clear', { value }, evnt)
-    // }
-    const dateConfirmEvent = () => {
+    const dateConfirmEvent = evnt => {
       const {
         multiple
       } = props;
@@ -15755,6 +15683,7 @@ const Countdown = VxeCountdown;
         }
       }
       hidePanel();
+      dispatchEvent('confirm', {}, evnt);
     };
     const dateMinuteEvent = (evnt, item) => {
       const {
@@ -15774,92 +15703,6 @@ const Countdown = VxeCountdown;
       }
       dateTimeChangeEvent(evnt);
     };
-    const dateOffsetEvent = evnt => {
-      const {
-        isActivated,
-        datePanelValue,
-        datePanelType
-      } = reactData;
-      if (isActivated) {
-        evnt.preventDefault();
-        const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
-        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-        const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
-        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-        if (datePanelType === 'year') {
-          let offsetYear = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatYear(datePanelValue || Date.now(), 0, 'first');
-          if (isLeftArrow) {
-            offsetYear = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatYear(offsetYear, -1);
-          } else if (isUpArrow) {
-            offsetYear = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatYear(offsetYear, -4);
-          } else if (isRightArrow) {
-            offsetYear = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatYear(offsetYear, 1);
-          } else if (isDwArrow) {
-            offsetYear = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatYear(offsetYear, 4);
-          }
-          dateMoveYear(offsetYear);
-        } else if (datePanelType === 'quarter') {
-          let offsetQuarter = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatQuarter(datePanelValue || Date.now(), 0, 'first');
-          if (isLeftArrow) {
-            offsetQuarter = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatQuarter(offsetQuarter, -1);
-          } else if (isUpArrow) {
-            offsetQuarter = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatQuarter(offsetQuarter, -2);
-          } else if (isRightArrow) {
-            offsetQuarter = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatQuarter(offsetQuarter, 1);
-          } else if (isDwArrow) {
-            offsetQuarter = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatQuarter(offsetQuarter, 2);
-          }
-          dateMoveQuarter(offsetQuarter);
-        } else if (datePanelType === 'month') {
-          let offsetMonth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(datePanelValue || Date.now(), 0, 'first');
-          if (isLeftArrow) {
-            offsetMonth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(offsetMonth, -1);
-          } else if (isUpArrow) {
-            offsetMonth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(offsetMonth, -4);
-          } else if (isRightArrow) {
-            offsetMonth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(offsetMonth, 1);
-          } else if (isDwArrow) {
-            offsetMonth = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatMonth(offsetMonth, 4);
-          }
-          dateMoveMonth(offsetMonth);
-        } else if (datePanelType === 'week') {
-          let offsetDay = datePanelValue || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatDay(Date.now(), 0, 'first');
-          const firstDayOfWeek = computeFirstDayOfWeek.value;
-          if (isUpArrow) {
-            offsetDay = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(offsetDay, -1, firstDayOfWeek);
-          } else if (isDwArrow) {
-            offsetDay = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(offsetDay, 1, firstDayOfWeek);
-          }
-          dateMoveDay(offsetDay);
-        } else {
-          let offsetDay = datePanelValue || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatDay(Date.now(), 0, 'first');
-          if (isLeftArrow) {
-            offsetDay = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatDay(offsetDay, -1);
-          } else if (isUpArrow) {
-            offsetDay = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(offsetDay, -1, offsetDay.getDay());
-          } else if (isRightArrow) {
-            offsetDay = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatDay(offsetDay, 1);
-          } else if (isDwArrow) {
-            offsetDay = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().getWhatWeek(offsetDay, 1, offsetDay.getDay());
-          }
-          dateMoveDay(offsetDay);
-        }
-      }
-    };
-    const datePgOffsetEvent = evnt => {
-      const {
-        isActivated
-      } = reactData;
-      if (isActivated) {
-        const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
-        evnt.preventDefault();
-        if (isPgUp) {
-          datePrevEvent(evnt);
-        } else {
-          dateNextEvent(evnt);
-        }
-      }
-    };
     const dateOpenPanel = () => {
       const {
         type
@@ -15888,281 +15731,2433 @@ const Countdown = VxeCountdown;
         });
       }
     };
-    // 日期
-    // 弹出面板
-    const updateZindex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
-        reactData.panelIndex = nextZIndex();
-      }
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $datePanel: $xeDatePanel
+      }, params));
     };
-    const updatePlacement = () => {
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-        const {
-          placement
-        } = props;
-        const {
-          panelIndex
-        } = reactData;
-        const targetElem = refInputTarget.value;
-        const panelElem = refInputPanel.value;
-        const btnTransfer = computeBtnTransfer.value;
-        if (targetElem && panelElem) {
-          const targetHeight = targetElem.offsetHeight;
-          const targetWidth = targetElem.offsetWidth;
-          const panelHeight = panelElem.offsetHeight;
-          const panelWidth = panelElem.offsetWidth;
-          const marginSize = 5;
-          const panelStyle = {
-            zIndex: panelIndex
-          };
-          const {
-            boundingTop,
-            boundingLeft,
-            visibleHeight,
-            visibleWidth
-          } = getAbsolutePos(targetElem);
-          let panelPlacement = 'bottom';
-          if (btnTransfer) {
-            let left = boundingLeft;
-            let top = boundingTop + targetHeight;
-            if (placement === 'top') {
-              panelPlacement = 'top';
-              top = boundingTop - panelHeight;
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (top + panelHeight + marginSize > visibleHeight) {
-                panelPlacement = 'top';
-                top = boundingTop - panelHeight;
-              }
-              // 如果上面不够放，则向下（优先）
-              if (top < marginSize) {
-                panelPlacement = 'bottom';
-                top = boundingTop + targetHeight;
-              }
-            }
-            // 如果溢出右边
-            if (left + panelWidth + marginSize > visibleWidth) {
-              left -= left + panelWidth + marginSize - visibleWidth;
-            }
-            // 如果溢出左边
-            if (left < marginSize) {
-              left = marginSize;
-            }
-            Object.assign(panelStyle, {
-              left: `${left}px`,
-              top: `${top}px`,
-              minWidth: `${targetWidth}px`
-            });
-          } else {
-            if (placement === 'top') {
-              panelPlacement = 'top';
-              panelStyle.bottom = `${targetHeight}px`;
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              panelStyle.top = `${targetHeight}px`;
-              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                // 如果上面不够放，则向下（优先）
-                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                  panelPlacement = 'top';
-                  panelStyle.top = '';
-                  panelStyle.bottom = `${targetHeight}px`;
-                }
-              }
-            }
-          }
-          reactData.panelStyle = panelStyle;
-          reactData.panelPlacement = panelPlacement;
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    const datePanelMethods = {
+      dispatchEvent,
+      getValue() {
+        return reactData.inputValue;
+      },
+      setPanelDate(date) {
+        if (date) {
+          dateCheckMonth(date);
         }
-      });
+      },
+      getPanelDate() {
+        return reactData.selectMonth;
+      },
+      checkValue(inputLabel) {
+        afterCheckValue(inputLabel);
+      },
+      confirmByEvent(evnt) {
+        dateConfirmEvent(evnt);
+      }
     };
-    const showPanel = () => {
+    Object.assign($xeDatePanel, datePanelMethods);
+    const renderDateLabel = (item, label) => {
       const {
-        visiblePanel
-      } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (!isDisabled && !visiblePanel) {
-        if (!reactData.initialized) {
-          reactData.initialized = true;
-        }
-        if (internalData.hpTimeout) {
-          clearTimeout(internalData.hpTimeout);
-          internalData.hpTimeout = undefined;
-        }
-        reactData.isActivated = true;
-        reactData.isAniVisible = true;
-        if (isDatePickerType) {
-          dateOpenPanel();
+        festivalMethod
+      } = props;
+      const labelVNs = [];
+      if (festivalMethod) {
+        const {
+          datePanelType
+        } = reactData;
+        const festivalRest = festivalMethod({
+          type: datePanelType,
+          viewType: datePanelType,
+          date: item.date,
+          $datePanel: $xeDatePanel
+        });
+        const festivalItem = festivalRest ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(festivalRest) ? {
+          label: festivalRest
+        } : festivalRest : {};
+        const extraItem = festivalItem.extra ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(festivalItem.extra) ? {
+          label: festivalItem.extra
+        } : festivalItem.extra : null;
+        labelVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: ['vxe-date-panel--label', {
+            'is-notice': festivalItem.notice
+          }]
+        }, extraItem && extraItem.label ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', `${label}`), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: ['vxe-date-panel--label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
+          style: extraItem.style
+        }, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(extraItem.label))] : `${label}`));
+        const festivalLabel = festivalItem.label;
+        if (festivalLabel) {
+          // 默认最多支持3个节日重叠
+          const festivalLabels = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(festivalLabel).split(',');
+          labelVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-date-panel--festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+            style: festivalItem.style
+          }, [festivalLabels.length > 1 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-date-panel--festival--overlap', `overlap--${festivalLabels.length}`]
+          }, festivalLabels.map(label => (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', label.substring(0, 3)))) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-date-panel--festival--label'
+          }, festivalLabels[0].substring(0, 3))]));
         }
-        setTimeout(() => {
-          reactData.visiblePanel = true;
-        }, 10);
-        updateZindex();
-        return updatePlacement();
-      }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-    };
-    const datePickerOpenEvent = evnt => {
-      const formReadonly = computeFormReadonly.value;
-      if (!formReadonly) {
-        evnt.preventDefault();
-        showPanel();
       }
+      return labelVNs;
     };
-    const clickEvent = evnt => {
-      triggerEvent(evnt);
-    };
-    const handleShortcutEvent = ({
-      option,
-      $event
-    }) => {
-      const shortcutOpts = computeShortcutOpts.value;
+    const renderDateDayTable = () => {
       const {
-        autoClose
-      } = shortcutOpts;
-      const clickMethod = option.clickMethod || shortcutOpts.clickMethod;
-      const shortcutParams = {
-        $datePicker: $xeDatePicker,
-        option: option
-      };
-      if (clickMethod) {
-        clickMethod(shortcutParams);
-      }
-      if (autoClose) {
-        hidePanel();
-      }
-      dispatchEvent('shortcut-click', shortcutParams, $event);
-    };
-    // 全局事件
-    const handleGlobalMousedownEvent = evnt => {
+        multiple
+      } = props;
       const {
-        visiblePanel,
-        isActivated
+        datePanelType,
+        datePanelValue
       } = reactData;
-      const isDatePickerType = computeIsDatePickerType.value;
-      const el = refElem.value;
-      const panelWrapperElem = refPanelWrapper.value;
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled && isActivated) {
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
-        if (!reactData.isActivated) {
-          // 如果是日期类型
-          if (isDatePickerType) {
-            if (visiblePanel) {
-              hidePanel();
-              afterCheckValue();
-            }
-          } else {
-            afterCheckValue();
+      const dateValue = computeDateValue.value;
+      const dateHeaders = computeDateHeaders.value;
+      const dayDatas = computeDayDatas.value;
+      const dateListValue = computeDateListValue.value;
+      const overCount = computeOverCount.value;
+      const matchFormat = 'yyyyMMdd';
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-date-panel--view-wrapper', `type--${datePanelType}`]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-header'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-row'
+      }, dateHeaders.map(item => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-item',
+          style: {
+            width: `${100 / dateHeaders.length}%`
           }
-        }
-      }
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-item-inner'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-item-label'
+        }, item.label)])]);
+      }))]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-body'
+      }, dayDatas.map(rows => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: `${100 / dayDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-date-panel--view-item', {
+              '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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: `${100 / rows.length}%`
+            },
+            onClick: () => dateSelectEvent(item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, renderDateLabel(item, item.label))]);
+        }));
+      }))])];
     };
-    const handleGlobalKeydownEvent = evnt => {
+    const renderDateWeekTable = () => {
       const {
-        clearable
+        multiple
       } = props;
       const {
-        visiblePanel
+        datePanelType,
+        datePanelValue
       } = reactData;
-      const isDatePickerType = computeIsDatePickerType.value;
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
-        const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
-        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-        const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
-        const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
-        const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
-        const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
-        const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
-        const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
-        const isPgDn = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_DOWN);
-        const operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow;
-        let isActivated = reactData.isActivated;
-        if (isTab) {
-          if (isActivated) {
-            afterCheckValue();
-          }
-          isActivated = false;
-          reactData.isActivated = isActivated;
-        } else if (operArrow) {
-          if (isDatePickerType) {
-            if (isActivated) {
-              if (visiblePanel) {
-                dateOffsetEvent(evnt);
-              } else if (isUpArrow || isDwArrow) {
-                datePickerOpenEvent(evnt);
-              }
-            }
-          }
-        } else if (isEnter) {
-          if (isDatePickerType) {
-            if (visiblePanel) {
-              if (reactData.datePanelValue) {
-                dateSelectItem(reactData.datePanelValue);
-              } else {
-                hidePanel();
-              }
-            } else if (isActivated) {
-              datePickerOpenEvent(evnt);
-            }
-          }
-        } else if (isPgUp || isPgDn) {
-          if (isDatePickerType) {
-            if (isActivated) {
-              datePgOffsetEvent(evnt);
-            }
-          }
-        }
-        if (isTab || isEsc) {
-          if (visiblePanel) {
-            hidePanel();
+      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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-date-panel--view-wrapper', `type--${datePanelType}`]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-header'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-row'
+      }, weekHeaders.map((item, rIndex) => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-item',
+          style: {
+            width: `${rIndex ? 13 : 9}%`
           }
-        } else if (isDel && clearable) {
-          if (isActivated) {
-            clearValueEvent(evnt, null);
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-item-inner'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-item-label'
+        }, item.label)])]);
+      }))]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-body'
+      }, weekDates.map(rows => {
+        const isSelected = multiple ? rows.some(item => dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat))) : rows.some(item => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat));
+        const isHover = rows.some(item => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat));
+        const isNowWeek = rows.some(item => item.isNow);
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: `${100 / weekDates.length}%`
           }
-        }
-      }
+        }, rows.map((item, rIndex) => {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-date-panel--view-item', {
+              'is--prev': item.isPrev,
+              'is--current': item.isCurrent,
+              'is--now': rIndex ? item.isNow : isNowWeek,
+              'is--next': item.isNext,
+              'is--disabled': isDateDisabled(item),
+              'is--selected': isSelected,
+              'is--over': overCount && !isSelected,
+              'is--hover': !overCount && isHover
+            }],
+            style: {
+              width: `${rIndex ? 13 : 9}%`
+            },
+            onClick: () => dateSelectEvent(item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, renderDateLabel(item, item.label))]);
+        }));
+      }))])];
     };
-    const handleGlobalMousewheelEvent = evnt => {
+    const renderDateMonthTable = () => {
       const {
-        visiblePanel
-      } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        if (visiblePanel) {
-          const panelWrapperElem = refPanelWrapper.value;
-          if (getEventTargetNode(evnt, panelWrapperElem).flag) {
-            updatePlacement();
-          } else {
-            hidePanel();
-            afterCheckValue();
-          }
-        }
-      }
-    };
-    const handleGlobalBlurEvent = () => {
+        multiple
+      } = props;
       const {
-        isActivated,
-        visiblePanel
+        datePanelType,
+        datePanelValue
       } = reactData;
-      if (visiblePanel) {
-        hidePanel();
-        afterCheckValue();
-      } else if (isActivated) {
-        afterCheckValue();
-      }
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
-        $datePicker: $xeDatePicker
-      }, params));
-    };
-    datePickerMethods = {
-      dispatchEvent,
+      const dateValue = computeDateValue.value;
+      const monthDatas = computeMonthDatas.value;
+      const dateListValue = computeDateListValue.value;
+      const overCount = computeOverCount.value;
+      const matchFormat = 'yyyyMM';
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-date-panel--view-wrapper', `type--${datePanelType}`]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-body'
+      }, monthDatas.map(rows => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: `${100 / monthDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-date-panel--view-item', {
+              '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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: `${100 / rows.length}%`
+            },
+            onClick: () => dateSelectEvent(item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, renderDateLabel(item, i18n_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-date-panel--view-wrapper', `type--${datePanelType}`]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-body'
+      }, quarterDatas.map(rows => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: `${100 / quarterDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-date-panel--view-item', {
+              '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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: `${100 / rows.length}%`
+            },
+            onClick: () => dateSelectEvent(item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-date-panel--view-item-inner'
+          }, renderDateLabel(item, i18n_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-date-panel--view-wrapper', `type--${datePanelType}`]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--view-body'
+      }, yearDatas.map(rows => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--view-row',
+          style: {
+            height: `${100 / yearDatas.length}%`
+          }
+        }, rows.map(item => {
+          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-date-panel--view-item', {
+              '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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat)
+            }],
+            style: {
+              width: `${100 / rows.length}%`
+            },
+            onClick: () => dateSelectEvent(item),
+            onMouseenter: () => dateMouseenterEvent(item),
+            onMouseleave: dateMouseleaveEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--picker-header'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--picker-type-wrapper'
+      }, [datePanelType === 'year' ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-date-panel--picker-label'
+      }, selectDatePanelObj.y) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-date-panel--picker-btns'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-date-panel--picker-btn',
+        onClick: dateToggleYearTypeEvent
+      }, selectDatePanelObj.y), selectDatePanelObj.m ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-date-panel--picker-btn',
+        onClick: dateToggleMonthTypeEvent
+      }, selectDatePanelObj.m) : renderEmptyElement($xeDatePanel)])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--picker-btn-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: ['vxe-date-panel--picker-btn vxe-date-panel--picker-prev-btn', {
+          'is--disabled': isDisabledPrevDateBtn
+        }],
+        onClick: datePrevEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: 'vxe-icon-caret-left'
+      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: 'vxe-date-panel--picker-btn vxe-date-panel--picker-current-btn',
+        onClick: dateTodayMonthEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: 'vxe-icon-dot'
+      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        class: ['vxe-date-panel--picker-btn vxe-date-panel--picker-next-btn', {
+          'is--disabled': isDisabledNextDateBtn
+        }],
+        onClick: dateNextEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: 'vxe-icon-caret-right'
+      })])])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--time-header'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-panel--time-title'
+      }, dateTimeLabel)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refInputTimeBody,
+        class: 'vxe-date-panel--time-body'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
+        class: 'vxe-date-panel--time-hour-list'
+      }, hourList.map((item, index) => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
+          key: index,
+          class: {
+            'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
+          },
+          onClick: evnt => dateHourEvent(evnt, item)
+        }, item.label);
+      })), hasTimeMinute ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
+        class: 'vxe-date-panel--time-minute-list'
+      }, minuteList.map((item, index) => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
+          key: index,
+          class: {
+            'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+          },
+          onClick: evnt => dateMinuteEvent(evnt, item)
+        }, item.label);
+      })) : renderEmptyElement($xeDatePanel), hasTimeMinute && hasTimeSecond ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
+        class: 'vxe-date-panel--time-second-list'
+      }, secondList.map((item, index) => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
+          key: index,
+          class: {
+            'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+          },
+          onClick: evnt => dateSecondEvent(evnt, item)
+        }, item.label);
+      })) : renderEmptyElement($xeDatePanel)])];
+    };
+    const renderPickerPanel = () => {
+      const {
+        type
+      } = props;
+      if (type === 'datetime') {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: type,
+          ref: refPanelWrapper,
+          class: 'vxe-date-panel--time-layout-wrapper'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--time-left-wrapper'
+        }, renderDatePanel()), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-date-panel--time-right-wrapper'
+        }, renderTimePanel())]);
+      } else if (type === 'time') {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: type,
+          ref: refPanelWrapper,
+          class: 'vxe-date-panel--wrapper'
+        }, renderTimePanel());
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: type || 'default',
+        ref: refPanelWrapper,
+        class: 'vxe-date-panel--wrapper'
+      }, renderDatePanel());
+    };
+    const renderVN = () => {
+      const {
+        type
+      } = props;
+      const vSize = computeSize.value;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-date-panel', `type--${type}`, {
+          [`size--${vSize}`]: vSize
+        }]
+      }, [renderPickerPanel()]);
+    };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
+      updateModelValue(val);
+      changeValue();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.type, () => {
+      // 切换类型是重置内置变量
+      Object.assign(reactData, {
+        inputValue: '',
+        datetimePanelValue: null,
+        datePanelValue: null,
+        datePanelLabel: '',
+        datePanelType: 'day',
+        selectMonth: null,
+        currentDate: null
+      });
+      initValue();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDateLabelFormat, () => {
+      const isDatePanelType = computeIsDatePanelType.value;
+      if (isDatePanelType) {
+        dateParseValue(reactData.datePanelValue);
+        reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
+      }
+    });
+    initValue();
+    dateOpenPanel();
+    $xeDatePanel.renderVN = renderVN;
+    return $xeDatePanel;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// CONCATENATED MODULE: ./packages/date-panel/index.ts
+
+
+
+const VxeDatePanel = Object.assign({}, date_panel, {
+  install(app) {
+    app.component(date_panel.name, date_panel);
+  }
+});
+dynamicApp.use(VxeDatePanel);
+index_esm_VxeUI.component(date_panel);
+const DatePanel = VxeDatePanel;
+/* harmony default export */ var packages_date_panel = (VxeDatePanel);
+;// CONCATENATED MODULE: ./packages/date-picker/src/date-picker.ts
+
+
+
+
+
+
+
+
+
+
+
+/* harmony default export */ var date_picker = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+  name: 'VxeDatePicker',
+  props: {
+    modelValue: [String, Number, Date],
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    type: {
+      type: String,
+      default: 'date'
+    },
+    clearable: {
+      type: Boolean,
+      default: () => getConfig().datePicker.clearable
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    placeholder: String,
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    form: String,
+    className: String,
+    size: {
+      type: String,
+      default: () => getConfig().datePicker.size || getConfig().size
+    },
+    multiple: Boolean,
+    limitCount: {
+      type: [String, Number],
+      default: () => getConfig().upload.limitCount
+    },
+    // date、week、month、quarter、year
+    startDate: {
+      type: [String, Number, Date],
+      default: () => getConfig().datePicker.startDate
+    },
+    endDate: {
+      type: [String, Number, Date],
+      default: () => getConfig().datePicker.endDate
+    },
+    minDate: [String, Number, Date],
+    maxDate: [String, Number, Date],
+    startDay: {
+      type: [String, Number],
+      default: () => getConfig().datePicker.startDay
+    },
+    labelFormat: String,
+    valueFormat: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    festivalMethod: {
+      type: Function,
+      default: () => getConfig().datePicker.festivalMethod
+    },
+    disabledMethod: {
+      type: Function,
+      default: () => getConfig().datePicker.disabledMethod
+    },
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: () => getConfig().datePicker.selectDay
+    },
+    showClearButton: {
+      type: Boolean,
+      default: () => getConfig().datePicker.showClearButton
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: () => getConfig().datePicker.showConfirmButton
+    },
+    autoClose: {
+      type: Boolean,
+      default: () => getConfig().datePicker.autoClose
+    },
+    prefixIcon: String,
+    suffixIcon: String,
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    shortcutConfig: Object,
+    // 已废弃 startWeek，被 startDay 替换
+    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) {
+    const {
+      slots,
+      emit
+    } = context;
+    const $xeModal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeModal', null);
+    const $xeDrawer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeDrawer', null);
+    const $xeTable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTable', null);
+    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
+    const formItemInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('xeFormItemInfo', null);
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const {
+      computeSize
+    } = useSize(props);
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
+      initialized: false,
+      panelIndex: 0,
+      visiblePanel: false,
+      isAniVisible: false,
+      panelStyle: {},
+      panelPlacement: '',
+      isActivated: false,
+      inputValue: '',
+      inputLabel: ''
+    });
+    const internalData = {
+      hpTimeout: undefined
+    };
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refInputTarget = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refInputPanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refPanelWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refDatePanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refMaps = {
+      refElem,
+      refInput: refInputTarget
+    };
+    const $xeDatePicker = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps
+    };
+    const computeBtnTransfer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        transfer
+      } = props;
+      if (transfer === null) {
+        const globalTransfer = getConfig().datePicker.transfer;
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    });
+    const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        readonly
+      } = props;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    });
+    const computeIsDisabled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
+    const computeIsDateTimeType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type
+      } = props;
+      return type === 'time' || type === 'datetime';
+    });
+    const computeIsDatePickerType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const isDateTimeType = computeIsDateTimeType.value;
+      return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    });
+    const computeIsClearable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return props.clearable;
+    });
+    const computeInputReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type,
+        editable,
+        multiple
+      } = props;
+      const formReadonly = computeFormReadonly.value;
+      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
+    });
+    const computeInpPlaceholder = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        placeholder
+      } = props;
+      if (placeholder) {
+        return getFuncText(placeholder);
+      }
+      const globalPlaceholder = getConfig().datePicker.placeholder;
+      if (globalPlaceholder) {
+        return getFuncText(globalPlaceholder);
+      }
+      return i18n_getI18n('vxe.base.pleaseSelect');
+    });
+    const computeInpImmediate = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        immediate
+      } = props;
+      return immediate;
+    });
+    const computeShortcutOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig);
+    });
+    const computeShortcutList = (0,external_commonjs_vue_commonjs2_vue_root_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 computeDateLabelFormat = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        labelFormat
+      } = props;
+      return labelFormat || i18n_getI18n(`vxe.input.date.labelFormat.${props.type}`);
+    });
+    const computeDateValueFormat = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type,
+        valueFormat
+      } = props;
+      if (valueFormat) {
+        return valueFormat;
+      }
+      if (type === 'time') {
+        return 'HH:mm:ss';
+      }
+      if (type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss';
+      }
+      return 'yyyy-MM-dd';
+    });
+    const computeFirstDayOfWeek = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        startDay
+      } = props;
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(startDay);
+    });
+    const computePanelLabel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type,
+        multiple
+      } = props;
+      const {
+        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 = parseDateObj(val, type, {
+          valueFormat: dateValueFormat,
+          labelFormat: dateLabelFormat,
+          firstDay: firstDayOfWeek
+        });
+        return dateObj.label;
+      }).join(', ');
+    });
+    const updateModelValue = () => {
+      const {
+        modelValue
+      } = props;
+      let val = '';
+      if (modelValue) {
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
+          val = new Date(modelValue);
+        } else {
+          val = modelValue;
+        }
+      }
+      reactData.inputValue = val;
+    };
+    const triggerEvent = evnt => {
+      const {
+        inputValue
+      } = reactData;
+      dispatchEvent(evnt.type, {
+        value: inputValue
+      }, evnt);
+    };
+    const handleChange = (value, evnt) => {
+      const {
+        modelValue
+      } = props;
+      reactData.inputValue = value;
+      emit('update:modelValue', value);
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(modelValue) !== value) {
+        dispatchEvent('change', {
+          value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      }
+    };
+    const inputEvent = evnt => {
+      const inputElem = evnt.target;
+      const value = inputElem.value;
+      reactData.inputLabel = value;
+      dispatchEvent('input', {
+        value
+      }, evnt);
+    };
+    const changeEvent = evnt => {
+      const inpImmediate = computeInpImmediate.value;
+      if (!inpImmediate) {
+        triggerEvent(evnt);
+      }
+    };
+    const focusEvent = evnt => {
+      reactData.isActivated = true;
+      const isDatePickerType = computeIsDatePickerType.value;
+      if (isDatePickerType) {
+        datePickerOpenEvent(evnt);
+      }
+      triggerEvent(evnt);
+    };
+    const clickPrefixEvent = evnt => {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        const {
+          inputValue
+        } = reactData;
+        dispatchEvent('prefix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    };
+    const hidePanel = () => {
+      return new Promise(resolve => {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(() => {
+          reactData.isAniVisible = false;
+          resolve();
+        }, 350);
+      });
+    };
+    const clearValueEvent = (evnt, value) => {
+      const isDatePickerType = computeIsDatePickerType.value;
+      if (isDatePickerType) {
+        hidePanel();
+      }
+      handleChange('', evnt);
+      dispatchEvent('clear', {
+        value
+      }, evnt);
+    };
+    const clickSuffixEvent = evnt => {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        const {
+          inputValue
+        } = reactData;
+        dispatchEvent('suffix-click', {
+          value: inputValue
+        }, evnt);
+      }
+    };
+    const blurEvent = evnt => {
+      const $datePanel = refDatePanel.value;
+      const {
+        inputValue
+      } = reactData;
+      const inpImmediate = computeInpImmediate.value;
+      const value = inputValue;
+      if (!inpImmediate) {
+        handleChange(value, evnt);
+      }
+      if (!reactData.visiblePanel) {
+        reactData.isActivated = false;
+      }
+      if ($datePanel) {
+        $datePanel.checkValue(reactData.inputLabel);
+      }
+      dispatchEvent('blur', {
+        value
+      }, evnt);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      }
+    };
+    const keydownEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const keyupEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const confirmEvent = evnt => {
+      const $datePanel = refDatePanel.value;
+      if ($datePanel) {
+        $datePanel.confirmByEvent(evnt);
+      }
+      hidePanel();
+    };
+    const panelChangeEvent = params => {
+      const {
+        multiple
+      } = props;
+      const {
+        value,
+        $event
+      } = params;
+      const isDateTimeType = computeIsDateTimeType.value;
+      handleChange(value, $event);
+      if (!multiple && !isDateTimeType) {
+        hidePanel();
+      }
+    };
+    // 全局事件
+    const handleGlobalMousedownEvent = evnt => {
+      const $datePanel = refDatePanel.value;
+      const {
+        visiblePanel,
+        isActivated
+      } = reactData;
+      const el = refElem.value;
+      const panelWrapperElem = refPanelWrapper.value;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled && isActivated) {
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
+        if (!reactData.isActivated) {
+          if (visiblePanel) {
+            hidePanel();
+            if ($datePanel) {
+              $datePanel.checkValue(reactData.inputLabel);
+            }
+          }
+        }
+      }
+    };
+    const handleGlobalMousewheelEvent = evnt => {
+      const {
+        visiblePanel
+      } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          const panelWrapperElem = refPanelWrapper.value;
+          if (getEventTargetNode(evnt, panelWrapperElem).flag) {
+            updatePlacement();
+          } else {
+            hidePanel();
+          }
+        }
+      }
+    };
+    const handleGlobalBlurEvent = () => {
+      const $datePanel = refDatePanel.value;
+      const {
+        isActivated,
+        visiblePanel
+      } = reactData;
+      if (visiblePanel) {
+        hidePanel();
+        if ($datePanel) {
+          $datePanel.checkValue(reactData.inputLabel);
+        }
+      } else if (isActivated) {
+        if ($datePanel) {
+          $datePanel.checkValue(reactData.inputLabel);
+        }
+      }
+    };
+    // 弹出面板
+    const updateZindex = () => {
+      if (reactData.panelIndex < getLastZIndex()) {
+        reactData.panelIndex = nextZIndex();
+      }
+    };
+    const updatePlacement = () => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+        const {
+          placement
+        } = props;
+        const {
+          panelIndex
+        } = reactData;
+        const targetElem = refInputTarget.value;
+        const panelElem = refInputPanel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        if (targetElem && panelElem) {
+          const targetHeight = targetElem.offsetHeight;
+          const targetWidth = targetElem.offsetWidth;
+          const panelHeight = panelElem.offsetHeight;
+          const panelWidth = panelElem.offsetWidth;
+          const marginSize = 5;
+          const panelStyle = {
+            zIndex: panelIndex
+          };
+          const {
+            boundingTop,
+            boundingLeft,
+            visibleHeight,
+            visibleWidth
+          } = getAbsolutePos(targetElem);
+          let panelPlacement = 'bottom';
+          if (btnTransfer) {
+            let left = boundingLeft;
+            let top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: `${left}px`,
+              top: `${top}px`,
+              minWidth: `${targetWidth}px`
+            });
+          } else {
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              panelStyle.bottom = `${targetHeight}px`;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              panelStyle.top = `${targetHeight}px`;
+              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                // 如果上面不够放，则向下（优先）
+                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                  panelPlacement = 'top';
+                  panelStyle.top = '';
+                  panelStyle.bottom = `${targetHeight}px`;
+                }
+              }
+            }
+          }
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = panelPlacement;
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+        }
+      });
+    };
+    const showPanel = () => {
+      const {
+        visiblePanel
+      } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled && !visiblePanel) {
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+        }
+        if (internalData.hpTimeout) {
+          clearTimeout(internalData.hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        setTimeout(() => {
+          reactData.visiblePanel = true;
+        }, 10);
+        updateZindex();
+        return updatePlacement();
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const datePickerOpenEvent = evnt => {
+      const formReadonly = computeFormReadonly.value;
+      if (!formReadonly) {
+        evnt.preventDefault();
+        showPanel();
+      }
+    };
+    const clickEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const handleShortcutEvent = ({
+      option,
+      $event
+    }) => {
+      const {
+        type
+      } = props;
+      const {
+        inputValue
+      } = reactData;
+      const shortcutOpts = computeShortcutOpts.value;
+      const {
+        autoClose
+      } = shortcutOpts;
+      const {
+        code,
+        clickMethod
+      } = option;
+      let value = inputValue;
+      const shortcutParams = {
+        $datePicker: $xeDatePicker,
+        option,
+        value,
+        code
+      };
+      if (!clickMethod && code) {
+        const gCommandOpts = commands.get(code);
+        const dpCommandMethod = gCommandOpts ? gCommandOpts.datePickerCommandMethod : null;
+        if (dpCommandMethod) {
+          dpCommandMethod(shortcutParams);
+        } else {
+          const dateValueFormat = computeDateValueFormat.value;
+          const firstDayOfWeek = computeFirstDayOfWeek.value;
+          switch (code) {
+            case 'now':
+            case 'prev':
+            case 'next':
+            case 'minus':
+            case 'plus':
+              {
+                const restObj = getDateByCode(code, value, type, {
+                  valueFormat: dateValueFormat,
+                  firstDay: firstDayOfWeek
+                });
+                value = restObj.value;
+                shortcutParams.value = value;
+                handleChange(value, $event);
+                break;
+              }
+            default:
+              errLog('vxe.error.notCommands', [code]);
+              break;
+          }
+        }
+      } else {
+        const optClickMethod = clickMethod || shortcutOpts.clickMethod;
+        if (optClickMethod) {
+          optClickMethod(shortcutParams);
+        }
+      }
+      if (autoClose) {
+        hidePanel();
+      }
+      dispatchEvent('shortcut-click', shortcutParams, $event);
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $datePicker: $xeDatePicker
+      }, params));
+    };
+    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;
+        inputElem.focus();
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      showPanel,
+      hidePanel,
+      updatePlacement
+    };
+    Object.assign($xeDatePicker, datePickerMethods);
+    const renderShortcutBtn = (pos, isVertical) => {
+      const shortcutOpts = computeShortcutOpts.value;
+      const {
+        position,
+        align,
+        mode
+      } = shortcutOpts;
+      const shortcutList = computeShortcutList.value;
+      if (isEnableConf(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: `vxe-date-picker--layout-${pos}-wrapper`
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(button_group, {
+          options: shortcutList,
+          mode,
+          align,
+          vertical: isVertical,
+          onClick: handleShortcutEvent
+        })]);
+      }
+      return renderEmptyElement($xeDatePicker);
+    };
+    const renderPanel = () => {
+      const {
+        type,
+        multiple,
+        showClearButton,
+        showConfirmButton
+      } = props;
+      const {
+        initialized,
+        isAniVisible,
+        visiblePanel,
+        panelPlacement,
+        panelStyle,
+        inputValue
+      } = reactData;
+      const vSize = computeSize.value;
+      const btnTransfer = computeBtnTransfer.value;
+      const shortcutOpts = computeShortcutOpts.value;
+      const isClearable = computeIsClearable.value;
+      const isDateTimeType = computeIsDateTimeType.value;
+      const shortcutList = computeShortcutList.value;
+      const {
+        position
+      } = shortcutOpts;
+      const headerSlot = slots.header;
+      const footerSlot = slots.footer;
+      const topSlot = slots.top;
+      const bottomSlot = slots.bottom;
+      const leftSlot = slots.left;
+      const rightSlot = slots.right;
+      const hasShortcutBtn = shortcutList.length > 0;
+      const showConfirmBtn = showConfirmButton === null ? isDateTimeType || multiple : showConfirmButton;
+      const showClearBtn = showClearButton === null ? isClearable && showConfirmBtn && type !== 'time' : showClearButton;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.Teleport, {
+        to: 'body',
+        disabled: btnTransfer ? !initialized : true
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refInputPanel,
+        class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
+          [`size--${vSize}`]: vSize,
+          'is--transfer': btnTransfer,
+          'ani--leave': isAniVisible,
+          'ani--enter': visiblePanel,
+          'show--top': !!(topSlot || headerSlot || hasShortcutBtn && (position === 'top' || position === 'header')),
+          'show--bottom': !!(bottomSlot || footerSlot || hasShortcutBtn && (position === 'bottom' || position === 'footer')),
+          'show--left': !!(leftSlot || hasShortcutBtn && position === 'left'),
+          'show--right': !!(rightSlot || hasShortcutBtn && position === 'right')
+        }],
+        placement: panelPlacement,
+        style: panelStyle
+      }, initialized && (visiblePanel || isAniVisible) ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refPanelWrapper,
+        class: ['vxe-date-picker--layout-all-wrapper', `type--${type}`, {
+          [`size--${vSize}`]: vSize
+        }]
+      }, [topSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-top-wrapper'
+      }, topSlot({})) : renderShortcutBtn('top'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-body-layout-wrapper'
+      }, [leftSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-left-wrapper'
+      }, leftSlot({})) : renderShortcutBtn('left', true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-body-content-wrapper'
+      }, [headerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-header-wrapper'
+      }, headerSlot({})) : renderShortcutBtn('header'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-body-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(date_panel, {
+        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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-footer-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-footer-custom'
+      }, footerSlot ? footerSlot({}) : [renderShortcutBtn('footer')]), showClearBtn || showConfirmBtn ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-footer-btns'
+      }, [showClearBtn ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_button, {
+        size: 'mini',
+        disabled: inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue),
+        content: i18n_getI18n('vxe.button.clear'),
+        onClick: clearValueEvent
+      }) : renderEmptyElement($xeDatePicker), showConfirmBtn ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_button, {
+        size: 'mini',
+        status: 'primary',
+        content: i18n_getI18n('vxe.button.confirm'),
+        onClick: confirmEvent
+      }) : renderEmptyElement($xeDatePicker)]) : renderEmptyElement($xeDatePicker)])]), rightSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-right-wrapper'
+      }, rightSlot({})) : renderShortcutBtn('right', true)]), bottomSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--layout-bottom-wrapper'
+      }, bottomSlot({})) : renderShortcutBtn('bottom')])] : [])]);
+    };
+    const renderPrefixIcon = () => {
+      const {
+        prefixIcon
+      } = props;
+      const prefixSlot = slots.prefix;
+      return prefixSlot || prefixIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--prefix',
+        onClick: clickPrefixEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--prefix-icon'
+      }, prefixSlot ? getSlotVNs(prefixSlot({})) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: prefixIcon
+      })])]) : null;
+    };
+    const renderSuffixIcon = () => {
+      const {
+        suffixIcon
+      } = props;
+      const {
+        inputValue
+      } = reactData;
+      const suffixSlot = slots.suffix;
+      const isDisabled = computeIsDisabled.value;
+      const isClearable = computeIsClearable.value;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-date-picker--suffix', {
+          'is--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+        }]
+      }, [isClearable ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--clear-icon',
+        onClick: clearValueEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: getIcon().INPUT_CLEAR
+      })]) : renderEmptyElement($xeDatePicker), renderExtraSuffixIcon(), suffixSlot || suffixIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--suffix-icon',
+        onClick: clickSuffixEvent
+      }, suffixSlot ? getSlotVNs(suffixSlot({})) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: suffixIcon
+      })]) : renderEmptyElement($xeDatePicker)]);
+    };
+    const renderExtraSuffixIcon = () => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--control-icon',
+        onClick: datePickerOpenEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: ['vxe-date-picker--date-picker-icon', getIcon().DATE_PICKER_DATE]
+      })]);
+    };
+    const renderVN = () => {
+      const {
+        className,
+        type,
+        name,
+        autoComplete
+      } = props;
+      const {
+        inputValue,
+        inputLabel,
+        visiblePanel,
+        isActivated
+      } = reactData;
+      const vSize = computeSize.value;
+      const isDisabled = computeIsDisabled.value;
+      const formReadonly = computeFormReadonly.value;
+      const panelLabel = computePanelLabel.value;
+      if (formReadonly) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refElem,
+          class: ['vxe-date-picker--readonly', `type--${type}`, className]
+        }, panelLabel);
+      }
+      const inputReadonly = computeInputReadonly.value;
+      const inpPlaceholder = computeInpPlaceholder.value;
+      const isClearable = computeIsClearable.value;
+      const prefix = renderPrefixIcon();
+      const suffix = renderSuffixIcon();
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        class: ['vxe-date-picker', `type--${type}`, className, {
+          [`size--${vSize}`]: vSize,
+          'is--prefix': !!prefix,
+          'is--suffix': !!suffix,
+          'is--visible': visiblePanel,
+          'is--disabled': isDisabled,
+          'is--active': isActivated,
+          'show--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+        }],
+        spellcheck: false
+      }, [prefix || renderEmptyElement($xeDatePicker), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-picker--wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
+        ref: refInputTarget,
+        class: 'vxe-date-picker--inner',
+        value: inputLabel,
+        name,
+        type: 'text',
+        placeholder: inpPlaceholder,
+        readonly: inputReadonly,
+        disabled: isDisabled,
+        autocomplete: autoComplete,
+        onKeydown: keydownEvent,
+        onKeyup: keyupEvent,
+        onClick: clickEvent,
+        onInput: inputEvent,
+        onChange: changeEvent,
+        onFocus: focusEvent,
+        onBlur: blurEvent
+      })]), suffix || renderEmptyElement($xeDatePicker),
+      // 下拉面板
+      renderPanel()]);
+    };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computePanelLabel, val => {
+      reactData.inputLabel = val;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
+      updateModelValue();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+      globalEvents.on($xeDatePicker, 'mousewheel', handleGlobalMousewheelEvent);
+      globalEvents.on($xeDatePicker, 'mousedown', handleGlobalMousedownEvent);
+      globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+      globalEvents.off($xeDatePicker, 'mousewheel');
+      globalEvents.off($xeDatePicker, 'mousedown');
+      globalEvents.off($xeDatePicker, 'blur');
+    });
+    updateModelValue();
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeDatePicker', $xeDatePicker);
+    $xeDatePicker.renderVN = renderVN;
+    return $xeDatePicker;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// CONCATENATED MODULE: ./packages/date-picker/index.ts
+
+
+
+const VxeDatePicker = Object.assign({}, date_picker, {
+  install(app) {
+    app.component(date_picker.name, date_picker);
+  }
+});
+dynamicApp.use(VxeDatePicker);
+index_esm_VxeUI.component(date_picker);
+const DatePicker = VxeDatePicker;
+/* harmony default export */ var packages_date_picker = (VxeDatePicker);
+;// CONCATENATED MODULE: ./packages/date-range-picker/src/date-range-picker.ts
+
+
+
+
+
+
+
+
+
+
+
+/* harmony default export */ var date_range_picker = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
+  name: 'VxeDateRangePicker',
+  props: {
+    modelValue: [String, Number, Date, Array],
+    startValue: [String, Number, Date],
+    endValue: [String, Number, Date],
+    immediate: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    type: {
+      type: String,
+      default: 'date'
+    },
+    clearable: {
+      type: Boolean,
+      default: () => getConfig().dateRangePicker.clearable
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    placeholder: String,
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    form: String,
+    className: String,
+    size: {
+      type: String,
+      default: () => getConfig().dateRangePicker.size || getConfig().size
+    },
+    minDate: [String, Number, Date],
+    maxDate: [String, Number, Date],
+    startDay: {
+      type: [String, Number],
+      default: () => getConfig().dateRangePicker.startDay
+    },
+    labelFormat: String,
+    valueFormat: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    festivalMethod: {
+      type: Function,
+      default: () => getConfig().dateRangePicker.festivalMethod
+    },
+    disabledMethod: {
+      type: Function,
+      default: () => getConfig().dateRangePicker.disabledMethod
+    },
+    separator: {
+      type: [String, Number],
+      default: () => getConfig().dateRangePicker.separator
+    },
+    // week
+    selectDay: {
+      type: [String, Number],
+      default: () => getConfig().dateRangePicker.selectDay
+    },
+    showClearButton: {
+      type: Boolean,
+      default: () => getConfig().dateRangePicker.showClearButton
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: () => getConfig().dateRangePicker.showConfirmButton
+    },
+    autoClose: {
+      type: Boolean,
+      default: () => getConfig().dateRangePicker.autoClose
+    },
+    prefixIcon: String,
+    suffixIcon: String,
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    shortcutConfig: Object
+  },
+  emits: ['update:modelValue', 'update:startValue', 'update:endValue', 'input', 'change', 'keydown', 'keyup', 'click', 'focus', 'blur', 'clear', 'prefix-click', 'suffix-click', 'date-prev', 'date-today', 'date-next', 'shortcut-click'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const $xeModal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeModal', null);
+    const $xeDrawer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeDrawer', null);
+    const $xeTable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTable', null);
+    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
+    const formItemInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('xeFormItemInfo', null);
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const {
+      computeSize
+    } = useSize(props);
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
+      initialized: false,
+      panelIndex: 0,
+      visiblePanel: false,
+      isAniVisible: false,
+      panelStyle: {},
+      panelPlacement: '',
+      isActivated: false,
+      startValue: '',
+      endValue: ''
+    });
+    const internalData = {
+      // selectStatus: false
+      // hpTimeout: undefined
+    };
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refInputTarget = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refInputPanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refPanelWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refStartDatePanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refEndDatePanel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refMaps = {
+      refElem,
+      refInput: refInputTarget
+    };
+    const $xeDateRangePicker = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+      getRefMaps: () => refMaps
+    };
+    let dateRangePickerMethods = {};
+    const computeBtnTransfer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        transfer
+      } = props;
+      if (transfer === null) {
+        const globalTransfer = getConfig().dateRangePicker.transfer;
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    });
+    const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        readonly
+      } = props;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    });
+    const computeIsDisabled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
+    const computeMVal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        startValue,
+        endValue
+      } = props;
+      return `${startValue || ''}${endValue || ''}`;
+    });
+    const computeIsDateTimeType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type
+      } = props;
+      return type === 'time' || type === 'datetime';
+    });
+    const computeIsDatePickerType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+    });
+    const computeIsClearable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return props.clearable;
+    });
+    const computeInpPlaceholder = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        placeholder
+      } = props;
+      if (placeholder) {
+        return getFuncText(placeholder);
+      }
+      const globalPlaceholder = getConfig().dateRangePicker.placeholder;
+      if (globalPlaceholder) {
+        return getFuncText(globalPlaceholder);
+      }
+      return i18n_getI18n('vxe.base.pleaseSelect');
+    });
+    const computeInpImmediate = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        immediate
+      } = props;
+      return immediate;
+    });
+    const computeShortcutOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().dateRangePicker.shortcutConfig, props.shortcutConfig);
+    });
+    const computeShortcutList = (0,external_commonjs_vue_commonjs2_vue_root_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 computeDateLabelFormat = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        labelFormat
+      } = props;
+      return labelFormat || i18n_getI18n(`vxe.input.date.labelFormat.${props.type}`);
+    });
+    const computeDateValueFormat = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        type,
+        valueFormat
+      } = props;
+      if (valueFormat) {
+        return valueFormat;
+      }
+      if (type === 'time') {
+        return 'HH:mm:ss';
+      }
+      if (type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss';
+      }
+      return 'yyyy-MM-dd';
+    });
+    const computeFirstDayOfWeek = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        startDay
+      } = props;
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(startDay);
+    });
+    const computePanelLabelObj = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const vals = startValue || endValue ? [startValue || '', endValue || ''] : [];
+      return formatRangeLabel(vals);
+    });
+    const computeInputLabel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const panelLabelObj = computePanelLabelObj.value;
+      return panelLabelObj.label;
+    });
+    const formatRangeLabel = vals => {
+      const {
+        type,
+        separator
+      } = props;
+      const dateLabelFormat = computeDateLabelFormat.value;
+      const dateValueFormat = computeDateValueFormat.value;
+      const firstDayOfWeek = computeFirstDayOfWeek.value;
+      const startRest = vals[0] ? parseDateObj(vals[0], type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      }) : null;
+      const endRest = vals[1] ? parseDateObj(vals[1], type, {
+        valueFormat: dateValueFormat,
+        labelFormat: dateLabelFormat,
+        firstDay: firstDayOfWeek
+      }) : null;
+      const startLabel = startRest ? startRest.label : '';
+      const endLabel = endRest ? endRest.label : '';
+      return {
+        label: (startLabel || endLabel ? [startLabel, endLabel] : []).join(`${separator || ' ~ '}`),
+        startLabel,
+        endLabel
+      };
+    };
+    const getRangeValue = (sValue, eValue) => {
+      const {
+        modelValue
+      } = props;
+      const isArr = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue);
+      if (sValue || eValue) {
+        const rest = [sValue || '', eValue || ''];
+        if (isArr) {
+          return rest;
+        }
+        return rest.join(',');
+      }
+      return isArr ? [] : '';
+    };
+    const paraeUpdateModel = () => {
+      const {
+        type,
+        modelValue
+      } = props;
+      const dateValueFormat = computeDateValueFormat.value;
+      let sValue = '';
+      let eValue = '';
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue)) {
+        const date1 = parseDateString(modelValue[0], type, {
+          valueFormat: dateValueFormat
+        });
+        const date2 = parseDateString(modelValue[1], type, {
+          valueFormat: dateValueFormat
+        });
+        if (date1 || date2) {
+          sValue = date1 || '';
+          eValue = date2 || '';
+        }
+      } else if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(modelValue)) {
+        const strArr = modelValue.split(',');
+        if (strArr[0] || strArr[1]) {
+          sValue = strArr[0] || '';
+          eValue = strArr[1] || '';
+        }
+      }
+      return {
+        sValue,
+        eValue
+      };
+    };
+    const parseUpdateData = () => {
+      const {
+        type,
+        startValue,
+        endValue
+      } = props;
+      const dateValueFormat = computeDateValueFormat.value;
+      let sValue = '';
+      let eValue = '';
+      sValue = parseDateString(startValue, type, {
+        valueFormat: dateValueFormat
+      });
+      eValue = parseDateString(endValue, type, {
+        valueFormat: dateValueFormat
+      });
+      return {
+        sValue,
+        eValue
+      };
+    };
+    const updateModelValue = isModel => {
+      const {
+        modelValue,
+        startValue,
+        endValue
+      } = props;
+      let restObj = {
+        sValue: '',
+        eValue: ''
+      };
+      if (isModel) {
+        if (modelValue) {
+          restObj = paraeUpdateModel();
+        } else {
+          restObj = parseUpdateData();
+        }
+      } else {
+        if (startValue || endValue) {
+          restObj = parseUpdateData();
+        } else {
+          restObj = paraeUpdateModel();
+        }
+      }
+      reactData.startValue = restObj.sValue;
+      reactData.endValue = restObj.eValue;
+    };
+    const triggerEvent = evnt => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const value = getRangeValue(startValue, endValue);
+      dispatchEvent(evnt.type, {
+        value,
+        startValue,
+        endValue
+      }, evnt);
+    };
+    const handleChange = (sValue, eValue, evnt) => {
+      const {
+        modelValue
+      } = props;
+      reactData.startValue = sValue;
+      reactData.endValue = eValue;
+      const value = getRangeValue(sValue, eValue);
+      emit('update:modelValue', value);
+      emit('update:startValue', sValue || '');
+      emit('update:endValue', eValue || '');
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(modelValue) !== value) {
+        dispatchEvent('change', {
+          value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      }
+    };
+    const changeEvent = evnt => {
+      const inpImmediate = computeInpImmediate.value;
+      if (!inpImmediate) {
+        triggerEvent(evnt);
+      }
+    };
+    const focusEvent = evnt => {
+      reactData.isActivated = true;
+      dateRangePickerOpenEvent(evnt);
+      triggerEvent(evnt);
+    };
+    const clickPrefixEvent = evnt => {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        const {
+          startValue,
+          endValue
+        } = reactData;
+        const value = getRangeValue(startValue, endValue);
+        dispatchEvent('prefix-click', {
+          value,
+          startValue,
+          endValue
+        }, evnt);
+      }
+    };
+    const hidePanel = () => {
+      return new Promise(resolve => {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(() => {
+          reactData.isAniVisible = false;
+          resolve();
+        }, 350);
+      });
+    };
+    const clearValueEvent = (evnt, value) => {
+      const isDatePickerType = computeIsDatePickerType.value;
+      if (isDatePickerType) {
+        hidePanel();
+      }
+      handleChange('', '', evnt);
+      dispatchEvent('clear', {
+        value
+      }, evnt);
+    };
+    const checkValue = () => {
+      const $startDatePanel = refStartDatePanel.value;
+      const $endDatePanel = refEndDatePanel.value;
+      if ($startDatePanel && $endDatePanel) {
+        const startValue = $startDatePanel.getValue();
+        const endValue = $endDatePanel.getValue();
+        if (!startValue || !endValue) {
+          handleChange('', '', {
+            type: 'check'
+          });
+        }
+      }
+    };
+    const handleSelectClose = () => {
+      const {
+        autoClose
+      } = props;
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const {
+        selectStatus
+      } = internalData;
+      const isDatePickerType = computeIsDatePickerType.value;
+      if (autoClose) {
+        if (selectStatus && isDatePickerType) {
+          if (startValue && endValue) {
+            hidePanel();
+          }
+        }
+      } else {
+        if (startValue && endValue) {
+          internalData.selectStatus = false;
+        }
+      }
+    };
+    const clickSuffixEvent = evnt => {
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        const {
+          startValue,
+          endValue
+        } = reactData;
+        const value = getRangeValue(startValue, endValue);
+        dispatchEvent('suffix-click', {
+          value,
+          startValue,
+          endValue
+        }, evnt);
+      }
+    };
+    const blurEvent = evnt => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const inpImmediate = computeInpImmediate.value;
+      const value = '';
+      if (!inpImmediate) {
+        handleChange(startValue, endValue, evnt);
+      }
+      if (!reactData.visiblePanel) {
+        reactData.isActivated = false;
+      }
+      dispatchEvent('blur', {
+        value,
+        startValue,
+        endValue
+      }, evnt);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      }
+    };
+    const keydownEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const keyupEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const confirmEvent = evnt => {
+      const $startDatePanel = refStartDatePanel.value;
+      const $endDatePanel = refEndDatePanel.value;
+      if ($startDatePanel && $endDatePanel) {
+        const startValue = $startDatePanel.getValue();
+        const endValue = $endDatePanel.getValue();
+        if (startValue && endValue) {
+          $startDatePanel.confirmByEvent(evnt);
+          $endDatePanel.confirmByEvent(evnt);
+        } else {
+          handleChange('', '', evnt);
+        }
+      }
+      hidePanel();
+    };
+    const startPanelChangeEvent = params => {
+      const {
+        selectStatus
+      } = internalData;
+      const {
+        value,
+        $event
+      } = params;
+      const endValue = selectStatus ? reactData.endValue : '';
+      handleChange(value, endValue, $event);
+      handleSelectClose();
+      if (!selectStatus) {
+        internalData.selectStatus = true;
+      }
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        const $startDatePanel = refStartDatePanel.value;
+        const $endDatePanel = refEndDatePanel.value;
+        if ($startDatePanel && $endDatePanel) {
+          const startValue = $startDatePanel.getValue();
+          if (!endValue && startValue) {
+            $endDatePanel.setPanelDate(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(startValue));
+          }
+        }
+      });
+    };
+    const endPanelChangeEvent = params => {
+      const {
+        selectStatus
+      } = internalData;
+      const {
+        value,
+        $event
+      } = params;
+      const startValue = selectStatus ? reactData.startValue : '';
+      handleChange(startValue, value, $event);
+      handleSelectClose();
+      if (!selectStatus) {
+        internalData.selectStatus = true;
+      }
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        const $startDatePanel = refStartDatePanel.value;
+        const $endDatePanel = refEndDatePanel.value;
+        if ($startDatePanel && $endDatePanel) {
+          const endValue = $endDatePanel.getValue();
+          if (!startValue && endValue) {
+            $startDatePanel.setPanelDate(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toStringDate(endValue));
+          }
+        }
+      });
+    };
+    // 全局事件
+    const handleGlobalMousedownEvent = evnt => {
+      const {
+        visiblePanel,
+        isActivated
+      } = reactData;
+      const el = refElem.value;
+      const panelWrapperElem = refPanelWrapper.value;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled && isActivated) {
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
+        if (!reactData.isActivated) {
+          if (visiblePanel) {
+            checkValue();
+            hidePanel();
+          }
+        }
+      }
+    };
+    const handleGlobalMousewheelEvent = evnt => {
+      const {
+        visiblePanel
+      } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          const panelWrapperElem = refPanelWrapper.value;
+          if (getEventTargetNode(evnt, panelWrapperElem).flag) {
+            updatePlacement();
+          } else {
+            hidePanel();
+          }
+        }
+      }
+    };
+    const handleGlobalBlurEvent = () => {
+      const {
+        visiblePanel
+      } = reactData;
+      if (visiblePanel) {
+        hidePanel();
+      }
+    };
+    // 弹出面板
+    const updateZindex = () => {
+      if (reactData.panelIndex < getLastZIndex()) {
+        reactData.panelIndex = nextZIndex();
+      }
+    };
+    const updatePlacement = () => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+        const {
+          placement
+        } = props;
+        const {
+          panelIndex
+        } = reactData;
+        const targetElem = refInputTarget.value;
+        const panelElem = refInputPanel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        if (targetElem && panelElem) {
+          const targetHeight = targetElem.offsetHeight;
+          const targetWidth = targetElem.offsetWidth;
+          const panelHeight = panelElem.offsetHeight;
+          const panelWidth = panelElem.offsetWidth;
+          const marginSize = 5;
+          const panelStyle = {
+            zIndex: panelIndex
+          };
+          const {
+            boundingTop,
+            boundingLeft,
+            visibleHeight,
+            visibleWidth
+          } = getAbsolutePos(targetElem);
+          let panelPlacement = 'bottom';
+          if (btnTransfer) {
+            let left = boundingLeft;
+            let top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: `${left}px`,
+              top: `${top}px`,
+              minWidth: `${targetWidth}px`
+            });
+          } else {
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              panelStyle.bottom = `${targetHeight}px`;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              panelStyle.top = `${targetHeight}px`;
+              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                // 如果上面不够放，则向下（优先）
+                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                  panelPlacement = 'top';
+                  panelStyle.top = '';
+                  panelStyle.bottom = `${targetHeight}px`;
+                }
+              }
+            }
+          }
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = panelPlacement;
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+        }
+      });
+    };
+    const showPanel = () => {
+      const {
+        visiblePanel
+      } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      if (!isDisabled && !visiblePanel) {
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+        }
+        if (internalData.hpTimeout) {
+          clearTimeout(internalData.hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        internalData.selectStatus = false;
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        setTimeout(() => {
+          reactData.visiblePanel = true;
+        }, 10);
+        updateZindex();
+        return updatePlacement();
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const dateRangePickerOpenEvent = evnt => {
+      const formReadonly = computeFormReadonly.value;
+      if (!formReadonly) {
+        evnt.preventDefault();
+        showPanel();
+      }
+    };
+    const clickEvent = evnt => {
+      triggerEvent(evnt);
+    };
+    const handleShortcutEvent = ({
+      option,
+      $event
+    }) => {
+      const {
+        type
+      } = props;
+      const shortcutOpts = computeShortcutOpts.value;
+      const {
+        autoClose
+      } = shortcutOpts;
+      const {
+        code,
+        clickMethod
+      } = option;
+      let startValue = reactData.startValue;
+      let endValue = reactData.endValue;
+      let value = getRangeValue(startValue, endValue);
+      const shortcutParams = {
+        $dateRangePicker: $xeDateRangePicker,
+        option: option,
+        value,
+        startValue,
+        endValue,
+        code
+      };
+      if (!clickMethod && code) {
+        const gCommandOpts = commands.get(code);
+        const drpCommandMethod = gCommandOpts ? gCommandOpts.dateRangePickerCommandMethod : null;
+        if (drpCommandMethod) {
+          drpCommandMethod(shortcutParams);
+        } else {
+          const dateValueFormat = computeDateValueFormat.value;
+          const firstDayOfWeek = computeFirstDayOfWeek.value;
+          switch (code) {
+            case 'last1':
+            case 'last3':
+            case 'last7':
+            case 'last30':
+            case 'last60':
+            case 'last90':
+            case 'last180':
+              {
+                const restObj = getRangeDateByCode(code, value, type, {
+                  valueFormat: dateValueFormat,
+                  firstDay: firstDayOfWeek
+                });
+                startValue = restObj.startValue;
+                endValue = restObj.endValue;
+                value = getRangeValue(startValue, endValue);
+                shortcutParams.value = value;
+                shortcutParams.startValue = startValue;
+                shortcutParams.endValue = endValue;
+                handleChange(startValue, endValue, $event);
+                break;
+              }
+            default:
+              errLog('vxe.error.notCommands', [code]);
+              break;
+          }
+        }
+      } else {
+        const optClickMethod = clickMethod || shortcutOpts.clickMethod;
+        if (optClickMethod) {
+          optClickMethod(shortcutParams);
+        }
+      }
+      if (autoClose) {
+        hidePanel();
+      }
+      dispatchEvent('shortcut-click', shortcutParams, $event);
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $dateRangePicker: $xeDateRangePicker
+      }, params));
+    };
+    dateRangePickerMethods = {
+      dispatchEvent,
+      setModelValue(startValue, endValue) {
+        reactData.startValue = startValue || '';
+        reactData.endValue = endValue || '';
+        const value = getRangeValue(startValue, endValue);
+        emit('update:modelValue', value);
+      },
+      setModelValueByEvent(evnt, startValue, endValue) {
+        handleChange(startValue || '', endValue || '', evnt);
+      },
       focus() {
         const inputElem = refInputTarget.value;
         reactData.isActivated = true;
@@ -16185,441 +18180,57 @@ const Countdown = VxeCountdown;
       hidePanel,
       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 ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(festivalRest) ? {
-          label: festivalRest
-        } : festivalRest : {};
-        const extraItem = festivalItem.extra ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(festivalItem.extra) ? {
-          label: festivalItem.extra
-        } : festivalItem.extra : null;
-        const labels = [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: ['vxe-date-picker--date-label', {
-            'is-notice': festivalItem.notice
-          }]
-        }, extraItem && extraItem.label ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', `${label}`), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: ['vxe-date-picker--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
-          style: extraItem.style
-        }, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(extraItem.label))] : `${label}`)];
-        const festivalLabel = festivalItem.label;
-        if (festivalLabel) {
-          // 默认最多支持3个节日重叠
-          const festivalLabels = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(festivalLabel).split(',');
-          labels.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: ['vxe-date-picker--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
-            style: festivalItem.style
-          }, [festivalLabels.length > 1 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-            class: ['vxe-date-picker--date-festival--overlap', `overlap--${festivalLabels.length}`]
-          }, festivalLabels.map(label => (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', label.substring(0, 3)))) : (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {
-        class: `vxe-date-picker--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', dateHeaders.map(item => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', item.label);
-      }))]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', dayDatas.map(rows => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', rows.map(item => {
-          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
-          return (0,external_commonjs_vue_commonjs2_vue_root_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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {
-        class: `vxe-date-picker--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', weekHeaders.map(item => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', item.label);
-      }))]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', weekDates.map(rows => {
-        const isSelected = multiple ? rows.some(item => dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat))) : rows.some(item => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat));
-        const isHover = rows.some(item => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat));
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', rows.map(item => {
-          return (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {
-        class: `vxe-date-picker--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', monthDatas.map(rows => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', rows.map(item => {
-          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
-          return (0,external_commonjs_vue_commonjs2_vue_root_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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat)
-            },
-            onClick: () => dateSelectEvent(item),
-            onMouseenter: () => dateMouseenterEvent(item)
-          }, renderDateLabel(item, i18n_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {
-        class: `vxe-date-picker--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', quarterDatas.map(rows => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', rows.map(item => {
-          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
-          return (0,external_commonjs_vue_commonjs2_vue_root_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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(datePanelValue, item.date, matchFormat)
-            },
-            onClick: () => dateSelectEvent(item),
-            onMouseenter: () => dateMouseenterEvent(item)
-          }, renderDateLabel(item, i18n_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {
-        class: `vxe-date-picker--date-${datePanelType}-view`,
-        cellspacing: 0,
-        cellpadding: 0,
-        border: 0
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', yearDatas.map(rows => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', rows.map(item => {
-          const isSelected = multiple ? dateListValue.some(val => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(val, item.date, matchFormat)) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isDateSame(dateValue, item.date, matchFormat);
-          return (0,external_commonjs_vue_commonjs2_vue_root_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 && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--date-picker-header'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--date-picker-type-wrapper'
-      }, [datePanelType === 'year' ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-date-picker--date-picker-label'
-      }, selectDatePanelObj.y) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-date-picker--date-picker-btns'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-date-picker--date-picker-btn',
-        onClick: dateToggleYearTypeEvent
-      }, selectDatePanelObj.y), selectDatePanelObj.m ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-date-picker--date-picker-btn',
-        onClick: dateToggleMonthTypeEvent
-      }, selectDatePanelObj.m) : renderEmptyElement($xeDatePicker)])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--date-picker-btn-wrapper'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: ['vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-prev-btn', {
-          'is--disabled': isDisabledPrevDateBtn
-        }],
-        onClick: datePrevEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: 'vxe-icon-caret-left'
-      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-current-btn',
-        onClick: dateTodayMonthEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: 'vxe-icon-dot'
-      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: ['vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-next-btn', {
-          'is--disabled': isDisabledNextDateBtn
-        }],
-        onClick: dateNextEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: 'vxe-icon-caret-right'
-      })]), multiple && supportMultiples ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-        class: 'vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-confirm-btn'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
-        class: 'vxe-date-picker--date-picker-confirm',
-        type: 'button',
-        onClick: dateConfirmEvent
-      }, i18n_getI18n('vxe.button.confirm'))]) : null])]), (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--time-picker-header'
-      }, [hasTimeMinute ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--time-picker-title'
-      }, dateTimeLabel) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--time-picker-btn'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
-        class: 'vxe-date-picker--time-picker-confirm',
-        type: 'button',
-        onClick: dateConfirmEvent
-      }, i18n_getI18n('vxe.button.confirm'))])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refInputTimeBody,
-        class: 'vxe-date-picker--time-picker-body'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
-        class: 'vxe-date-picker--time-picker-hour-list'
-      }, hourList.map((item, index) => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
-          key: index,
-          class: {
-            'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
-          },
-          onClick: evnt => dateHourEvent(evnt, item)
-        }, item.label);
-      })), hasTimeMinute ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
-        class: 'vxe-date-picker--time-picker-minute-list'
-      }, minuteList.map((item, index) => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
-          key: index,
-          class: {
-            'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
-          },
-          onClick: evnt => dateMinuteEvent(evnt, item)
-        }, item.label);
-      })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), hasTimeMinute && hasTimeSecond ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('ul', {
-        class: 'vxe-date-picker--time-picker-second-list'
-      }, secondList.map((item, index) => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('li', {
-          key: index,
-          class: {
-            'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
-          },
-          onClick: evnt => dateSecondEvent(evnt, item)
-        }, item.label);
-      })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()])];
-    };
+    Object.assign($xeDateRangePicker, dateRangePickerMethods);
     const renderShortcutBtn = (pos, isVertical) => {
       const shortcutOpts = computeShortcutOpts.value;
       const {
-        options,
         position,
         align,
         mode
       } = shortcutOpts;
-      if (isEnableConf(shortcutOpts) && options && options.length && (position || 'left') === pos) {
+      const shortcutList = computeShortcutList.value;
+      if (isEnableConf(shortcutOpts) && shortcutList.length && (position || 'left') === pos) {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: `vxe-date-picker--panel-${pos}-wrapper`
+          class: `vxe-date-range-picker--layout-${pos}-wrapper`
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(button_group, {
-          options,
+          options: shortcutList,
           mode,
           align,
           vertical: isVertical,
           onClick: handleShortcutEvent
         })]);
       }
-      return renderEmptyElement($xeDatePicker);
-    };
-    const renderPickerPanel = () => {
-      const {
-        type
-      } = props;
-      if (type === 'datetime') {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          key: type,
-          ref: refPanelWrapper,
-          class: 'vxe-date-picker--panel-datetime-layout-wrapper'
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-date-picker--panel-datetime-left-wrapper'
-        }, renderDatePanel()), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          class: 'vxe-date-picker--panel-datetime-right-wrapper'
-        }, renderTimePanel())]);
-      } else if (type === 'time') {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          key: type,
-          ref: refPanelWrapper,
-          class: 'vxe-date-picker--panel-wrapper'
-        }, renderTimePanel());
-      }
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: type || 'default',
-        ref: refPanelWrapper,
-        class: 'vxe-date-picker--panel-wrapper'
-      }, renderDatePanel());
+      return renderEmptyElement($xeDateRangePicker);
     };
     const renderPanel = () => {
       const {
-        type
+        type,
+        separator,
+        autoClose,
+        showConfirmButton,
+        showClearButton
       } = props;
       const {
         initialized,
         isAniVisible,
         visiblePanel,
         panelPlacement,
-        panelStyle
+        panelStyle,
+        startValue,
+        endValue
       } = reactData;
       const vSize = computeSize.value;
       const btnTransfer = computeBtnTransfer.value;
       const shortcutOpts = computeShortcutOpts.value;
+      const isClearable = computeIsClearable.value;
+      const panelLabelObj = computePanelLabelObj.value;
+      const shortcutList = computeShortcutList.value;
+      const isDateTimeType = computeIsDateTimeType.value;
+      const {
+        startLabel,
+        endLabel
+      } = panelLabelObj;
       const {
-        options,
         position
       } = shortcutOpts;
       const headerSlot = slots.header;
@@ -16628,13 +18239,15 @@ const Countdown = VxeCountdown;
       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 || !autoClose : showConfirmButton;
+      const showClearBtn = showClearButton === null ? isClearable : showClearButton;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.Teleport, {
         to: 'body',
         disabled: btnTransfer ? !initialized : true
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refInputPanel,
-        class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
+        class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', `type--${type}`, {
           [`size--${vSize}`]: vSize,
           'is--transfer': btnTransfer,
           'ani--leave': isAniVisible,
@@ -16647,25 +18260,74 @@ const Countdown = VxeCountdown;
         placement: panelPlacement,
         style: panelStyle
       }, initialized && (visiblePanel || isAniVisible) ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-layout-wrapper'
+        ref: refPanelWrapper,
+        class: ['vxe-date-range-picker--layout-all-wrapper', `type--${type}`, {
+          [`size--${vSize}`]: vSize
+        }]
       }, [topSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-top-wrapper'
+        class: 'vxe-date-range-picker--layout-top-wrapper'
       }, topSlot({})) : renderShortcutBtn('top'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-body-layout-wrapper'
+        class: 'vxe-date-range-picker--layout-body-layout-wrapper'
       }, [leftSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-left-wrapper'
+        class: 'vxe-date-range-picker--layout-left-wrapper'
       }, leftSlot({})) : renderShortcutBtn('left', true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-body-content-wrapper'
+        class: 'vxe-date-range-picker--layout-body-content-wrapper'
       }, [headerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-header-wrapper'
+        class: 'vxe-date-range-picker--layout-header-wrapper'
       }, headerSlot({})) : renderShortcutBtn('header'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-body-wrapper'
-      }, [renderPickerPanel()]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-footer-wrapper'
-      }, footerSlot({})) : renderShortcutBtn('footer')]), rightSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-right-wrapper'
+        class: 'vxe-date-range-picker--layout-body-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(date_panel, {
+        ref: refStartDatePanel,
+        modelValue: startValue,
+        type: props.type,
+        className: props.className,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        startDay: props.startDay,
+        endDate: endValue,
+        labelFormat: props.labelFormat,
+        valueFormat: props.valueFormat,
+        festivalMethod: props.festivalMethod,
+        disabledMethod: props.disabledMethod,
+        selectDay: props.selectDay,
+        onChange: startPanelChangeEvent
+      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(date_panel, {
+        ref: refEndDatePanel,
+        modelValue: endValue,
+        type: props.type,
+        className: props.className,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        startDay: props.startDay,
+        startDate: startValue,
+        labelFormat: props.labelFormat,
+        valueFormat: props.valueFormat,
+        festivalMethod: props.festivalMethod,
+        disabledMethod: props.disabledMethod,
+        selectDay: props.selectDay,
+        onChange: endPanelChangeEvent
+      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-label'
+      }, startLabel || endLabel ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', startLabel), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', `${separator || ''}`), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', endLabel)] : []), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-custom'
+      }, footerSlot ? footerSlot({}) : [renderShortcutBtn('footer')]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-range-picker--layout-footer-btns'
+      }, [showClearBtn ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_button, {
+        size: 'mini',
+        disabled: !(startValue || endValue),
+        content: i18n_getI18n('vxe.button.clear'),
+        onClick: clearValueEvent
+      }) : renderEmptyElement($xeDateRangePicker), showConfirmBtn ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_button, {
+        size: 'mini',
+        status: 'primary',
+        content: i18n_getI18n('vxe.button.confirm'),
+        onClick: confirmEvent
+      }) : renderEmptyElement($xeDateRangePicker)])])]), rightSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-range-picker--layout-right-wrapper'
       }, rightSlot({})) : renderShortcutBtn('right', true)]), bottomSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--panel-bottom-wrapper'
+        class: 'vxe-date-range-picker--layout-bottom-wrapper'
       }, bottomSlot({})) : renderShortcutBtn('bottom')])] : [])]);
     };
     const renderPrefixIcon = () => {
@@ -16674,10 +18336,10 @@ const Countdown = VxeCountdown;
       } = props;
       const prefixSlot = slots.prefix;
       return prefixSlot || prefixIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--prefix',
+        class: 'vxe-date-range-picker--prefix',
         onClick: clickPrefixEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--prefix-icon'
+        class: 'vxe-date-range-picker--prefix-icon'
       }, prefixSlot ? getSlotVNs(prefixSlot({})) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: prefixIcon
       })])]) : null;
@@ -16687,158 +18349,141 @@ const Countdown = VxeCountdown;
         suffixIcon
       } = props;
       const {
-        inputValue
+        startValue,
+        endValue
       } = reactData;
       const suffixSlot = slots.suffix;
       const isDisabled = computeIsDisabled.value;
       const isClearable = computeIsClearable.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: ['vxe-date-picker--suffix', {
-          'is--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+        class: ['vxe-date-range-picker--suffix', {
+          'is--clear': isClearable && !isDisabled && (startValue || endValue)
         }]
       }, [isClearable ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--clear-icon',
+        class: 'vxe-date-range-picker--clear-icon',
         onClick: clearValueEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: getIcon().INPUT_CLEAR
-      })]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), renderExtraSuffixIcon(), suffixSlot || suffixIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--suffix-icon',
+      })]) : renderEmptyElement($xeDateRangePicker), renderExtraSuffixIcon(), suffixSlot || suffixIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-range-picker--suffix-icon',
         onClick: clickSuffixEvent
       }, suffixSlot ? getSlotVNs(suffixSlot({})) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: suffixIcon
-      })]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()]);
+      })]) : renderEmptyElement($xeDateRangePicker)]);
     };
     const renderExtraSuffixIcon = () => {
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--control-icon',
-        onClick: datePickerOpenEvent
+        class: 'vxe-date-range-picker--control-icon',
+        onClick: dateRangePickerOpenEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-        class: ['vxe-date-picker--date-picker-icon', getIcon().DATE_PICKER_DATE]
+        class: ['vxe-date-range-picker--date-picker-icon', getIcon().DATE_PICKER_DATE]
       })]);
     };
     const renderVN = () => {
       const {
         className,
         type,
-        align,
         name,
-        autocomplete,
         autoComplete
       } = props;
       const {
-        inputValue,
+        startValue,
+        endValue,
         visiblePanel,
         isActivated
       } = reactData;
       const vSize = computeSize.value;
       const isDisabled = computeIsDisabled.value;
       const formReadonly = computeFormReadonly.value;
+      const inputLabel = computeInputLabel.value;
       if (formReadonly) {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           ref: refElem,
-          class: ['vxe-date-picker--readonly', `type--${type}`, className]
-        }, inputValue);
+          class: ['vxe-date-range-picker--readonly', `type--${type}`, className]
+        }, inputLabel);
       }
-      const inputReadonly = computeInputReadonly.value;
-      const inputType = computeDatePickerType.value;
       const inpPlaceholder = computeInpPlaceholder.value;
       const isClearable = computeIsClearable.value;
       const prefix = renderPrefixIcon();
       const suffix = renderSuffixIcon();
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-date-picker', `type--${type}`, className, {
+        class: ['vxe-date-range-picker', `type--${type}`, className, {
           [`size--${vSize}`]: vSize,
-          [`is--${align}`]: align,
           'is--prefix': !!prefix,
           'is--suffix': !!suffix,
           'is--visible': visiblePanel,
           'is--disabled': isDisabled,
           'is--active': isActivated,
-          'show--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+          'show--clear': isClearable && !isDisabled && (startValue || endValue)
         }],
         spellcheck: false
-      }, [prefix || (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-date-picker--wrapper'
+      }, [prefix || renderEmptyElement($xeDateRangePicker), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-date-range-picker--wrapper'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
         ref: refInputTarget,
-        class: 'vxe-date-picker--inner',
-        value: inputValue,
+        class: 'vxe-date-range-picker--inner',
+        value: inputLabel,
         name,
-        type: inputType,
+        type: 'text',
         placeholder: inpPlaceholder,
-        readonly: inputReadonly,
+        readonly: true,
         disabled: isDisabled,
-        autocomplete: autoComplete || autocomplete,
+        autocomplete: autoComplete,
         onKeydown: keydownEvent,
         onKeyup: keyupEvent,
         onClick: clickEvent,
-        onInput: inputEvent,
         onChange: changeEvent,
         onFocus: focusEvent,
         onBlur: blurEvent
-      })]), suffix || (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(),
+      })]), suffix || renderEmptyElement($xeDateRangePicker),
       // 下拉面板
       renderPanel()]);
     };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
-      updateModelValue(val);
-      changeValue();
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.type, () => {
-      // 切换类型是重置内置变量
-      Object.assign(reactData, {
-        inputValue: '',
-        datetimePanelValue: null,
-        datePanelValue: null,
-        datePanelLabel: '',
-        datePanelType: 'day',
-        selectMonth: null,
-        currentDate: null
-      });
-      initValue();
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
+      updateModelValue(true);
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDateLabelFormat, () => {
-      const isDatePickerType = computeIsDatePickerType.value;
-      if (isDatePickerType) {
-        dateParseValue(reactData.datePanelValue);
-        reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
-      }
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeMVal, () => {
+      updateModelValue(false);
     });
+    updateModelValue(true);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-      globalEvents.on($xeDatePicker, 'mousewheel', handleGlobalMousewheelEvent);
-      globalEvents.on($xeDatePicker, 'mousedown', handleGlobalMousedownEvent);
-      globalEvents.on($xeDatePicker, 'keydown', handleGlobalKeydownEvent);
-      globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
+      globalEvents.on($xeDateRangePicker, 'mousewheel', handleGlobalMousewheelEvent);
+      globalEvents.on($xeDateRangePicker, 'mousedown', handleGlobalMousedownEvent);
+      globalEvents.on($xeDateRangePicker, 'blur', handleGlobalBlurEvent);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onDeactivated)(() => {
+      checkValue();
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
-      globalEvents.off($xeDatePicker, 'mousewheel');
-      globalEvents.off($xeDatePicker, 'mousedown');
-      globalEvents.off($xeDatePicker, 'keydown');
-      globalEvents.off($xeDatePicker, 'blur');
+      globalEvents.off($xeDateRangePicker, 'mousewheel');
+      globalEvents.off($xeDateRangePicker, 'mousedown');
+      globalEvents.off($xeDateRangePicker, 'blur');
     });
-    initValue();
-    $xeDatePicker.renderVN = renderVN;
-    return $xeDatePicker;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      checkValue();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeDateRangePicker', $xeDateRangePicker);
+    $xeDateRangePicker.renderVN = renderVN;
+    return $xeDateRangePicker;
   },
   render() {
     return this.renderVN();
   }
 }));
-;// CONCATENATED MODULE: ./packages/date-picker/index.ts
+;// CONCATENATED MODULE: ./packages/date-range-picker/index.ts
 
 
 
-const VxeDatePicker = Object.assign({}, date_picker, {
+const VxeDateRangePicker = Object.assign({}, date_range_picker, {
   install(app) {
-    app.component(date_picker.name, date_picker);
-    app.component('VxeDateInput', date_picker);
+    app.component(date_range_picker.name, date_range_picker);
   }
 });
-dynamicApp.use(VxeDatePicker);
-index_esm_VxeUI.component(date_picker);
-const DatePicker = VxeDatePicker;
-/* harmony default export */ var packages_date_picker = (VxeDatePicker);
+dynamicApp.use(VxeDateRangePicker);
+index_esm_VxeUI.component(date_range_picker);
+const DateRangePicker = VxeDateRangePicker;
+/* harmony default export */ var packages_date_range_picker = (VxeDateRangePicker);
 ;// CONCATENATED MODULE: ./packages/loading/index.ts
 
 
@@ -19297,12 +20942,15 @@ function renderNativeOptgroup(renderOpts, params, renderOptionsMethods) {
   } = renderOpts;
   const groupOptions = optionGroupProps.options || 'options';
   const groupLabel = optionGroupProps.label || 'label';
-  return optionGroups.map((group, gIndex) => {
-    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('optgroup', {
-      key: gIndex,
-      label: group[groupLabel]
-    }, renderOptionsMethods(group[groupOptions], renderOpts, params));
-  });
+  if (optionGroups) {
+    return optionGroups.map((group, gIndex) => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('optgroup', {
+        key: gIndex,
+        label: group[groupLabel]
+      }, renderOptionsMethods(group[groupOptions], renderOpts, params));
+    });
+  }
+  return [];
 }
 /**
  * 渲染表单-项
@@ -19383,15 +21031,18 @@ function renderNativeFormOptions(options, renderOpts, params) {
   const valueProp = optionProps.value || 'value';
   const disabledProp = optionProps.disabled || 'disabled';
   const cellValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(data, field);
-  return options.map((item, oIndex) => {
-    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('option', {
-      key: oIndex,
-      value: item[valueProp],
-      disabled: item[disabledProp],
-      /* eslint-disable eqeqeq */
-      selected: item[valueProp] == cellValue
-    }, item[labelProp]);
-  });
+  if (options) {
+    return options.map((item, oIndex) => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('option', {
+        key: oIndex,
+        value: item[valueProp],
+        disabled: item[disabledProp],
+        /* eslint-disable eqeqeq */
+        selected: item[valueProp] == cellValue
+      }, item[labelProp]);
+    });
+  }
+  return [];
 }
 /**
  * 渲染表单-项
@@ -44278,6 +45929,7 @@ const PasswordInput = VxePasswordInput;
 
 
 
+
 const browseObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
 // 打印
 let printFrame;
@@ -44312,12 +45964,54 @@ function getExportBlobByString(str, type) {
     type: `text/${type};charset=utf-8;`
   });
 }
-const printMargin = 80;
+const defaultPrintMargin = 50;
+function parseMargin(val) {
+  let mVal = defaultPrintMargin;
+  let top = mVal;
+  let bottom = mVal;
+  let left = mVal;
+  let right = mVal;
+  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(val) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(val)) {
+    mVal = val;
+    top = mVal;
+    bottom = mVal;
+    left = mVal;
+    right = mVal;
+  } else if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isPlainObject(val)) {
+    if (val.margin) {
+      mVal = val.margin;
+      top = mVal;
+      bottom = mVal;
+      left = mVal;
+      right = mVal;
+    }
+    if (val.marginTop) {
+      top = val.marginTop;
+    }
+    if (val.marginBottom) {
+      bottom = val.marginBottom;
+    }
+    if (val.marginLeft) {
+      left = val.marginLeft;
+    }
+    if (val.marginRight) {
+      right = val.marginRight;
+    }
+  }
+  return {
+    top: toCssUnit(top),
+    bottom: toCssUnit(bottom),
+    left: toCssUnit(left),
+    right: toCssUnit(right)
+  };
+}
 function createHtmlPage(opts, printHtml) {
   const {
+    pageStyle,
     customStyle
   } = opts;
-  return ['<!DOCTYPE html><html>', '<head>', '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">', `<title>${opts.title || ''}</title>`, opts._pageBreaks || opts.pageBreaks && opts.pageBreaks.length ? '<style media="print">@page {size: auto;margin: 0mm;}</style>' : '', `<style>.vxe-print-slots{display: none;}.vxe-print-page-break.align--center{text-align:center;}.vxe-print-page-break.align--left{text-align:left;}.vxe-print-page-break.align--right{text-align:right;}.vxe-print-page-break--header-title{font-size:1.8em;text-align:center;line-height:${printMargin}px;}.vxe-print-page-break{page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow: hidden;}.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;width:${printMargin}px;height:100%;}.vxe-print-page-break--header,.vxe-print-page-break--footer{flex-shrink:0;height:${printMargin}px;width:100%;}.vxe-print-page-break--content{flex-grow: 1;overflow: hidden;}.vxe-print-page-break--footer-page-number{line-height:${printMargin}px;text-align:center;}</style>`, '<style>.vxe-table{white-space:pre;}</style>', `<style>${defaultHtmlStyle}</style>`, customStyle ? `<style>${customStyle}</style>` : '', '</head>', '<body>', `${printHtml}`, '</body>', '</html>'].join('');
+  const marginObj = parseMargin(pageStyle);
+  return ['<!DOCTYPE html><html>', '<head>', '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">', `<title>${opts.title || ''}</title>`, opts._pageBreaks || opts.pageBreaks && opts.pageBreaks.length ? '<style media="print">@page {size: auto;margin: 0mm;}</style>' : '', `<style>.vxe-print-slots{display: none;}.vxe-print-page-break.align--center{text-align:center;}.vxe-print-page-break.align--left{text-align:left;}.vxe-print-page-break.align--right{text-align:right;}.vxe-print-page-break--header-title{font-size:1.8em;line-height:${marginObj.top || 'normal'};text-align:center;}.vxe-print-page-break{page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow: hidden;}.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;height:100%;}.vxe-print-page-break--left{width:${marginObj.left};}.vxe-print-page-break--right{width:${marginObj.right};}.vxe-print-page-break--header,.vxe-print-page-break--footer{flex-shrink:0;width:100%;}.vxe-print-page-break--header{height:${marginObj.top};}.vxe-print-page-break--footer{height:${marginObj.bottom};}.vxe-print-page-break--content{flex-grow: 1;overflow: hidden;}.vxe-print-page-break--footer-page-number{line-height:${marginObj.bottom || 'normal'};text-align:center;}</style>`, '<style>.vxe-table{white-space:pre;}</style>', `<style>${defaultHtmlStyle}</style>`, customStyle ? `<style>${customStyle}</style>` : '', '</head>', '<body>', `${printHtml}`, '</body>', '</html>'].join('');
 }
 function handlePrint(opts, printHtml = '') {
   const {
@@ -44547,6 +46241,10 @@ const PrintPageBreak = VxePrintPageBreak;
       type: Boolean,
       default: () => getConfig().print.showAllPageTitle
     },
+    pageStyle: {
+      type: Object,
+      default: () => getConfig().print.pageStyle
+    },
     customStyle: {
       type: String,
       default: () => getConfig().print.customStyle
@@ -47953,7 +49651,9 @@ const Watermark = VxeWatermark;
 
 
 
-const components_components = [packages_alert, packages_anchor, packages_anchor_link, packages_avatar, packages_badge, packages_breadcrumb, packages_breadcrumb_item, packages_button, packages_button_group, packages_calendar, packages_card, packages_carousel, packages_carousel_item, packages_checkbox, checkbox_group, packages_col, packages_collapse, packages_collapse_pane, packages_color_picker, packages_countdown, packages_date_picker, packages_drawer, packages_empty, packages_form, packages_form_design, form_gather, packages_form_group, packages_form_item, packages_form_view, packages_icon, packages_icon_picker, packages_image, image_group, image_preview, packages_input, packages_layout_aside, packages_layout_body, packages_layout_container, packages_layout_footer, packages_layout_header, packages_link, packages_list_design, packages_list_view, packages_list, loading, packages_menu, packages_modal, packages_notice_bar, packages_number_input, packages_optgroup, packages_option, packages_pager, packages_password_input, print_page_break, packages_print, packages_pulldown, packages_radio, radio_button, radio_group, packages_rate, packages_result, packages_row, packages_select, packages_split, packages_split_pane, packages_slider, packages_steps, packages_switch, packages_tab_pane, packages_table_select, packages_tabs, packages_tag, packages_text_ellipsis, packages_text, packages_textarea, packages_tip, packages_tooltip, packages_tree, packages_tree_select, packages_upload, packages_watermark];
+
+
+const components_components = [packages_alert, packages_anchor, packages_anchor_link, packages_avatar, packages_badge, packages_breadcrumb, packages_breadcrumb_item, packages_button, packages_button_group, packages_calendar, packages_card, packages_carousel, packages_carousel_item, packages_checkbox, checkbox_group, packages_col, packages_collapse, packages_collapse_pane, packages_color_picker, packages_countdown, packages_date_panel, packages_date_picker, packages_date_range_picker, packages_drawer, packages_empty, packages_form, packages_form_design, form_gather, packages_form_group, packages_form_item, packages_form_view, packages_icon, packages_icon_picker, packages_image, image_group, image_preview, packages_input, packages_layout_aside, packages_layout_body, packages_layout_container, packages_layout_footer, packages_layout_header, packages_link, packages_list_design, packages_list_view, packages_list, loading, packages_menu, packages_modal, packages_notice_bar, packages_number_input, packages_optgroup, packages_option, packages_pager, packages_password_input, print_page_break, packages_print, packages_pulldown, packages_radio, radio_button, radio_group, packages_rate, packages_result, packages_row, packages_select, packages_split, packages_split_pane, packages_slider, packages_steps, packages_switch, packages_tab_pane, packages_table_select, packages_tabs, packages_tag, packages_text_ellipsis, packages_text, packages_textarea, packages_tip, packages_tooltip, packages_tree, packages_tree_select, packages_upload, packages_watermark];
 function install(app, options) {
   setConfig(options);
   components_components.forEach(component => app.use(component));
@@ -48051,6 +49751,8 @@ const readFile = readLocalFile;
 
 
 
+
+