@wfrog/vc-ui 1.1.0 → 1.2.0

package/dist/es/components/daterange-picker/daterange-picker.mjs

@@ -1,27 +1,28 @@
-import { i as isArray, a as isEmpty, b as isDate, c as buildProps, d as definePropType, u as useNamespace, e as debugWarn, N as NOOP, f as isNumber, g as isUndefined, h as isString, j as isFunction } from '../../chunk/DRoyW749.mjs';
-import { E as ElInput } from '../../chunk/C7wQNvSS.mjs';
-import { E as ElScrollbar } from '../../chunk/axpwSky6.mjs';
-import { E as ElButton } from '../../chunk/D0LB3gF-.mjs';
-import { E as Ee, u as useTooltipContentProps, a as ElTooltip, c as castArray, e as extractFirst } from '../../chunk/CLMc8GzD.mjs';
+import { i as isArray, a as isEmpty, b as isDate, c as buildProps, d as definePropType, u as useNamespace, e as debugWarn, N as NOOP, f as isNumber, g as isUndefined, h as isString, j as isFunction } from '../../chunk/CcKUdl3e.mjs';
+import { E as ElInput } from '../../chunk/DgFT6snA.mjs';
+import { E as ElScrollbar } from '../../chunk/_8u_XVHh.mjs';
+import { E as ElButton } from '../../chunk/CKbkzlkO.mjs';
+import { E as Ee, u as useTooltipContentProps, a as ElTooltip, c as castArray, e as extractFirst } from '../../chunk/DMYHOxhk.mjs';
 import { ref, computed, defineComponent, reactive, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createElementVNode, mergeProps, useAttrs as useAttrs$1, inject, watch, nextTick, onBeforeUnmount, provide, createBlock, withCtx, withModifiers, createCommentVNode, resolveDynamicComponent, toDisplayString, onMounted, Fragment, renderList, createTextVNode, withDirectives, createVNode, Transition, withKeys, useSlots, toRef, vShow, getCurrentInstance, toRefs, isVNode, isRef } from 'vue';
 import { onClickOutside, unrefElement, useVModel } from '@vueuse/core';
-import { E as ElIcon } from '../../chunk/cPBw23yt.mjs';
+import { E as ElIcon } from '../../chunk/DEPZhJ0Z.mjs';
 import { CircleClose, Clock, Calendar, ArrowUp, ArrowDown, DArrowLeft, ArrowLeft, ArrowRight, DArrowRight } from '@element-plus/icons-vue';
-import { u as useLocale } from '../../chunk/Dk6Bx0KT.mjs';
-import { u as useAriaProps, f as flatten } from '../../chunk/BpqBBo4z.mjs';
-import { _ as _export_sfc, w as withInstall } from '../../chunk/DTLPXrjb.mjs';
-import { g as getStyle, h as hasClass } from '../../chunk/CizMbf5K.mjs';
-import { v as vRepeatClick } from '../../chunk/4eyJqDa9.mjs';
+import { u as useLocale } from '../../chunk/plK2vnjp.mjs';
+import { u as useAriaProps, f as flatten } from '../../chunk/BDyXj_90.mjs';
+import { _ as _export_sfc, w as withInstall } from '../../chunk/BTsEMnf_.mjs';
+import { g as getStyle, h as hasClass } from '../../chunk/Bl0WQiki.mjs';
+import { v as vRepeatClick } from '../../chunk/BoGGHTrJ.mjs';
 import { U as UPDATE_MODEL_EVENT, C as CHANGE_EVENT } from '../../chunk/Ct6q2FXg.mjs';
-import { d as debounce } from '../../chunk/Bp9jXKX0.mjs';
+import { d as debounce } from '../../chunk/BambM7zX.mjs';
 import { g as getEventCode, E as EVENT_CODE } from '../../chunk/BTpNRPQW.mjs';
-import { C as ClickOutside } from '../../chunk/DrgvuOYH.mjs';
-import { u as useFormItem, a as useFormItemInputId, b as useFormDisabled, c as useFormSize } from '../../chunk/DXPWe_a5.mjs';
-import { i as isEqual } from '../../chunk/BsLJxiSC.mjs';
-import { u as useSizeProp } from '../../chunk/BsGCX4td.mjs';
-import { u as useEmptyValuesProps, a as useEmptyValues } from '../../chunk/BcTuAX8r.mjs';
-import { u as useAttrs } from '../../chunk/BUEEWLrd.mjs';
-import { u as useFocusController } from '../../chunk/XwSiBVsA.mjs';
+import { C as ClickOutside } from '../../chunk/CL5WTCB3.mjs';
+import { u as useFormItem, a as useFormItemInputId, b as useFormDisabled, c as useFormSize } from '../../chunk/U13Qpiki.mjs';
+import { i as isEqual } from '../../chunk/Dw-yyl2m.mjs';
+import { o as omit } from '../../chunk/C7Dgjpd1.mjs';
+import { u as useSizeProp } from '../../chunk/BK4T_2ha.mjs';
+import { u as useEmptyValuesProps, a as useEmptyValues } from '../../chunk/Dsye5ZEp.mjs';
+import { u as useAttrs } from '../../chunk/ezK_XQQd.mjs';
+import { u as useFocusController } from '../../chunk/CM_I1FoA.mjs';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -193,7 +194,9 @@ const useCommonPicker = (props, emit) => {
     if (!valueEquals(props.modelValue, input)) {
       let formatted;
       if (isArray(input)) {
-        formatted = input.map((item) => formatter(item, props.valueFormat, lang.value));
+        formatted = input.map(
+          (item) => formatter(item, props.valueFormat, lang.value)
+        );
       } else if (input) {
         formatted = formatter(input, props.valueFormat, lang.value);
       }
@@ -210,13 +213,21 @@ const useCommonPicker = (props, emit) => {
       }
     } else {
       if (isArray(props.modelValue)) {
-        dayOrDays = props.modelValue.map((d) => parseDate(d, props.valueFormat, lang.value));
+        dayOrDays = props.modelValue.map(
+          (d) => parseDate(d, props.valueFormat, lang.value)
+        );
       } else {
-        dayOrDays = parseDate((_a = props.modelValue) != null ? _a : "", props.valueFormat, lang.value);
+        dayOrDays = parseDate(
+          (_a = props.modelValue) != null ? _a : "",
+          props.valueFormat,
+          lang.value
+        );
       }
     }
     if (pickerOptions.value.getRangeAvailableTime) {
-      const availableResult = pickerOptions.value.getRangeAvailableTime(dayOrDays);
+      const availableResult = pickerOptions.value.getRangeAvailableTime(
+        dayOrDays
+      );
       if (!isEqual(availableResult, dayOrDays)) {
         dayOrDays = availableResult;
         if (!valueIsEmpty.value) {
@@ -328,7 +339,10 @@ const timePickerDefaultProps = buildProps({
   },
   size: useSizeProp,
   readonly: Boolean,
-  disabled: Boolean,
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
   placeholder: {
     type: String,
     default: ""
@@ -415,12 +429,14 @@ const timePickerRangeTriggerProps = buildProps({
   disabled: Boolean
 });
 
-const __default__$3 = defineComponent({
-  name: "PickerRangeTrigger",
-  inheritAttrs: false
-});
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const _hoisted_1$8 = ["id", "name", "placeholder", "value", "disabled"];
+const _hoisted_2$8 = ["id", "name", "placeholder", "value", "disabled"];
+const _sfc_main$b = defineComponent({
+  ...{
+    name: "PickerRangeTrigger",
+    inheritAttrs: false
+  },
+  __name: "picker-range-trigger",
   props: timePickerRangeTriggerProps,
   emits: [
     "mouseenter",
@@ -434,15 +450,19 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     "startChange",
     "endChange"
   ],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { formItem } = useFormItem();
-    const { inputId } = useFormItemInputId(reactive({ id: computed(() => {
-      var _a;
-      return (_a = props.id) == null ? void 0 : _a[0];
-    }) }), {
-      formItemContext: formItem
-    });
+    const { inputId } = useFormItemInputId(
+      reactive({ id: computed(() => {
+        var _a;
+        return (_a = props.id) == null ? void 0 : _a[0];
+      }) }),
+      {
+        formItemContext: formItem
+      }
+    );
     const attrs = useAttrs();
     const nsDate = useNamespace("date");
     const nsRange = useNamespace("range");
@@ -484,59 +504,66 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       (_a = inputRef.value) == null ? void 0 : _a.blur();
       (_b = endInputRef.value) == null ? void 0 : _b.blur();
     };
-    expose({
+    __expose({
       focus,
       blur
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "wrapperRef",
-        ref: wrapperRef,
-        class: normalizeClass([unref(nsDate).is("active", unref(isFocused)), _ctx.$attrs.class]),
-        style: normalizeStyle(_ctx.$attrs.style),
-        onClick: handleClick,
-        onMouseenter: handleMouseEnter,
-        onMouseleave: handleMouseLeave,
-        onTouchstartPassive: handleTouchStart
-      }, [
-        renderSlot(_ctx.$slots, "prefix"),
-        createElementVNode("input", mergeProps(unref(attrs), {
-          id: unref(inputId),
-          ref_key: "inputRef",
-          ref: inputRef,
-          name: _ctx.name && _ctx.name[0],
-          placeholder: _ctx.startPlaceholder,
-          value: _ctx.modelValue && _ctx.modelValue[0],
-          class: unref(nsRange).b("input"),
-          disabled: _ctx.disabled,
-          onInput: handleStartInput,
-          onChange: handleStartChange
-        }), null, 16, ["id", "name", "placeholder", "value", "disabled"]),
-        renderSlot(_ctx.$slots, "range-separator"),
-        createElementVNode("input", mergeProps(unref(attrs), {
-          id: _ctx.id && _ctx.id[1],
-          ref_key: "endInputRef",
-          ref: endInputRef,
-          name: _ctx.name && _ctx.name[1],
-          placeholder: _ctx.endPlaceholder,
-          value: _ctx.modelValue && _ctx.modelValue[1],
-          class: unref(nsRange).b("input"),
-          disabled: _ctx.disabled,
-          onInput: handleEndInput,
-          onChange: handleEndChange
-        }), null, 16, ["id", "name", "placeholder", "value", "disabled"]),
-        renderSlot(_ctx.$slots, "suffix")
-      ], 38);
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref_key: "wrapperRef",
+          ref: wrapperRef,
+          class: normalizeClass([unref(nsDate).is("active", unref(isFocused)), _ctx.$attrs.class]),
+          style: normalizeStyle(
+            _ctx.$attrs.style
+          ),
+          onClick: handleClick,
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          onTouchstartPassive: handleTouchStart
+        },
+        [
+          renderSlot(_ctx.$slots, "prefix"),
+          createElementVNode("input", mergeProps(unref(attrs), {
+            id: unref(inputId),
+            ref_key: "inputRef",
+            ref: inputRef,
+            name: _ctx.name && _ctx.name[0],
+            placeholder: _ctx.startPlaceholder,
+            value: _ctx.modelValue && _ctx.modelValue[0],
+            class: unref(nsRange).b("input"),
+            disabled: _ctx.disabled,
+            onInput: handleStartInput,
+            onChange: handleStartChange
+          }), null, 16, _hoisted_1$8),
+          renderSlot(_ctx.$slots, "range-separator"),
+          createElementVNode("input", mergeProps(unref(attrs), {
+            id: _ctx.id && _ctx.id[1],
+            ref_key: "endInputRef",
+            ref: endInputRef,
+            name: _ctx.name && _ctx.name[1],
+            placeholder: _ctx.endPlaceholder,
+            value: _ctx.modelValue && _ctx.modelValue[1],
+            class: unref(nsRange).b("input"),
+            disabled: _ctx.disabled,
+            onInput: handleEndInput,
+            onChange: handleEndChange
+          }), null, 16, _hoisted_2$8),
+          renderSlot(_ctx.$slots, "suffix")
+        ],
+        38
+      );
     };
   }
 });
-var PickerRangeTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__file", "picker-range-trigger.vue"]]);
+var PickerRangeTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/common/picker-range-trigger.vue"]]);
 
-const __default__$2 = defineComponent({
-  name: "Picker"
-});
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+const _sfc_main$a = defineComponent({
+  ...{
+    name: "Picker"
+  },
+  __name: "picker",
   props: timePickerDefaultProps,
   emits: [
     UPDATE_MODEL_EVENT,
@@ -549,14 +576,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     "visible-change",
     "keydown"
   ],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const attrs = useAttrs$1();
     const nsDate = useNamespace("date");
     const nsInput = useNamespace("input");
     const nsRange = useNamespace("range");
     const { formItem } = useFormItem();
-    const elPopperOptions = inject(PICKER_POPPER_OPTIONS_INJECTION_KEY, {});
+    const elPopperOptions = inject(
+      PICKER_POPPER_OPTIONS_INJECTION_KEY,
+      {}
+    );
     const emptyValues = useEmptyValues(props, null);
     const refPopper = ref();
     const inputRef = ref();
@@ -640,7 +671,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
     const refInput = computed(() => {
       if (inputRef.value) {
-        return Array.from(inputRef.value.$el.querySelectorAll("input"));
+        return Array.from(
+          inputRef.value.$el.querySelectorAll("input")
+        );
       }
       return [];
     });
@@ -697,13 +730,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const isDatesPicker = computed(() => props.type === "dates");
     const isMonthsPicker = computed(() => props.type === "months");
     const isYearsPicker = computed(() => props.type === "years");
-    const triggerIcon = computed(() => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar));
-    const showClearBtn = computed(() => props.clearable && !pickerDisabled.value && !props.readonly && !valueIsEmpty.value && (hovering.value || isFocused.value));
-    const onClearIconClick = (event) => {
+    const triggerIcon = computed(
+      () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)
+    );
+    const showClearBtn = computed(
+      () => props.clearable && !pickerDisabled.value && !props.readonly && !valueIsEmpty.value && (hovering.value || isFocused.value)
+    );
+    const onClear = (event) => {
       if (props.readonly || pickerDisabled.value)
         return;
       if (showClearBtn.value) {
-        event.stopPropagation();
+        event == null ? void 0 : event.stopPropagation();
         if (pickerOptions.value.handleClear) {
           pickerOptions.value.handleClear();
         } else {
@@ -748,13 +785,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
     });
-    const stophandle = onClickOutside(inputRef, (e) => {
-      const unrefedPopperEl = unref(popperEl);
-      const inputEl = unrefElement(inputRef);
-      if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || inputEl && e.composedPath().includes(inputEl))
-        return;
-      pickerVisible.value = false;
-    });
+    const stophandle = onClickOutside(
+      inputRef,
+      (e) => {
+        const unrefedPopperEl = unref(popperEl);
+        const inputEl = unrefElement(inputRef);
+        if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || inputEl && e.composedPath().includes(inputEl))
+          return;
+        pickerVisible.value = false;
+      }
+    );
     onBeforeUnmount(() => {
       stophandle == null ? void 0 : stophandle();
     });
@@ -907,7 +947,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       emptyValues
     });
     provide(ROOT_COMMON_PICKER_INJECTION_KEY, commonPicker);
-    expose({
+    __expose({
       focus,
       blur,
       handleOpen,
@@ -940,13 +980,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         onHide
       }), {
         default: withCtx(() => [
-          !unref(isRangeInput) ? (openBlock(), createBlock(unref(ElInput), {
+          !isRangeInput.value ? (openBlock(), createBlock(unref(ElInput), {
             key: 0,
             id: _ctx.id,
             ref_key: "inputRef",
             ref: inputRef,
             "container-role": "combobox",
-            "model-value": unref(displayValue),
+            "model-value": displayValue.value,
             name: _ctx.name,
             size: unref(pickerSize),
             disabled: unref(pickerDisabled),
@@ -958,7 +998,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               _ctx.$attrs.class
             ]),
             style: normalizeStyle(_ctx.$attrs.style),
-            readonly: !_ctx.editable || _ctx.readonly || unref(isDatesPicker) || unref(isMonthsPicker) || unref(isYearsPicker) || _ctx.type === "week",
+            readonly: !_ctx.editable || _ctx.readonly || isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value || _ctx.type === "week",
             "aria-label": _ctx.ariaLabel,
             tabindex: _ctx.tabindex,
             "validate-event": false,
@@ -971,28 +1011,28 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             onMouseenter: onMouseEnter,
             onMouseleave: onMouseLeave,
             onTouchstartPassive: onTouchStartInput,
-            onClick: withModifiers(() => {
-            }, ["stop"])
+            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+            }, ["stop"]))
           }, {
             prefix: withCtx(() => [
-              unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
+              triggerIcon.value ? (openBlock(), createBlock(unref(ElIcon), {
                 key: 0,
                 class: normalizeClass(unref(nsInput).e("icon")),
                 onMousedown: withModifiers(onMouseDownInput, ["prevent"]),
                 onTouchstartPassive: onTouchStartInput
               }, {
                 default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
+                  (openBlock(), createBlock(resolveDynamicComponent(triggerIcon.value)))
                 ]),
                 _: 1
-              }, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
+              }, 8, ["class"])) : createCommentVNode("v-if", true)
             ]),
             suffix: withCtx(() => [
-              unref(showClearBtn) && _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
+              showClearBtn.value && _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
                 key: 0,
                 class: normalizeClass(`${unref(nsInput).e("icon")} clear-icon`),
                 onMousedown: withModifiers(unref(NOOP), ["prevent"]),
-                onClick: onClearIconClick
+                onClick: onClear
               }, {
                 default: withCtx(() => [
                   (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
@@ -1001,18 +1041,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               }, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true)
             ]),
             _: 1
-          }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onFocus", "onBlur", "onClick"])) : (openBlock(), createBlock(PickerRangeTrigger, {
+          }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onFocus", "onBlur"])) : (openBlock(), createBlock(PickerRangeTrigger, {
             key: 1,
             id: _ctx.id,
             ref_key: "inputRef",
             ref: inputRef,
-            "model-value": unref(displayValue),
+            "model-value": displayValue.value,
             name: _ctx.name,
             disabled: unref(pickerDisabled),
             readonly: !_ctx.editable || _ctx.readonly,
             "start-placeholder": _ctx.startPlaceholder,
             "end-placeholder": _ctx.endPlaceholder,
-            class: normalizeClass(unref(rangeInputKls)),
+            class: normalizeClass(rangeInputKls.value),
             style: normalizeStyle(_ctx.$attrs.style),
             "aria-label": _ctx.ariaLabel,
             tabindex: _ctx.tabindex,
@@ -1032,29 +1072,34 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             onKeydown: handleKeydownInput
           }, {
             prefix: withCtx(() => [
-              unref(triggerIcon) ? (openBlock(), createBlock(unref(ElIcon), {
+              triggerIcon.value ? (openBlock(), createBlock(unref(ElIcon), {
                 key: 0,
                 class: normalizeClass([unref(nsInput).e("icon"), unref(nsRange).e("icon")])
               }, {
                 default: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(unref(triggerIcon))))
+                  (openBlock(), createBlock(resolveDynamicComponent(triggerIcon.value)))
                 ]),
                 _: 1
               }, 8, ["class"])) : createCommentVNode("v-if", true)
             ]),
             "range-separator": withCtx(() => [
               renderSlot(_ctx.$slots, "range-separator", {}, () => [
-                createElementVNode("span", {
-                  class: normalizeClass(unref(nsRange).b("separator"))
-                }, toDisplayString(_ctx.rangeSeparator), 3)
+                createElementVNode(
+                  "span",
+                  {
+                    class: normalizeClass(unref(nsRange).b("separator"))
+                  },
+                  toDisplayString(_ctx.rangeSeparator),
+                  3
+                )
               ])
             ]),
             suffix: withCtx(() => [
               _ctx.clearIcon ? (openBlock(), createBlock(unref(ElIcon), {
                 key: 0,
-                class: normalizeClass(unref(clearIconKls)),
+                class: normalizeClass(clearIconKls.value),
                 onMousedown: withModifiers(unref(NOOP), ["prevent"]),
-                onClick: onClearIconClick
+                onClick: onClear
               }, {
                 default: withCtx(() => [
                   (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
@@ -1080,13 +1125,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             showConfirm: _ctx.showConfirm,
             showFooter: _ctx.showFooter,
             showWeekNumber: _ctx.showWeekNumber,
-            onPick: unref(onPick),
+            onPick: _cache[1] || (_cache[1] = (...args) => unref(onPick) && unref(onPick)(...args)),
             onSelectRange: setSelectionRange,
-            onSetPickerOption: unref(onSetPickerOption),
-            onCalendarChange: unref(onCalendarChange),
-            onPanelChange: unref(onPanelChange),
-            onMousedown: withModifiers(() => {
-            }, ["stop"])
+            onSetPickerOption: _cache[2] || (_cache[2] = (...args) => unref(onSetPickerOption) && unref(onSetPickerOption)(...args)),
+            onCalendarChange: _cache[3] || (_cache[3] = (...args) => unref(onCalendarChange) && unref(onCalendarChange)(...args)),
+            onClear,
+            onPanelChange: _cache[4] || (_cache[4] = (...args) => unref(onPanelChange) && unref(onPanelChange)(...args)),
+            onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {
+            }, ["stop"]))
           })
         ]),
         _: 3
@@ -1094,7 +1140,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__file", "picker.vue"]]);
+var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/common/picker.vue"]]);
 
 const panelTimePickerProps = buildProps({
   ...timePanelSharedProps,
@@ -1122,15 +1168,27 @@ const useTimePanel = ({
         const method = availableTimeGetters[type];
         switch (type) {
           case "minute": {
-            availableTimeSlots = method(result.hour(), role, compareDate);
+            availableTimeSlots = method(
+              result.hour(),
+              role,
+              compareDate
+            );
             break;
           }
           case "second": {
-            availableTimeSlots = method(result.hour(), result.minute(), role, compareDate);
+            availableTimeSlots = method(
+              result.hour(),
+              result.minute(),
+              role,
+              compareDate
+            );
             break;
           }
           default: {
-            availableTimeSlots = method(role, compareDate);
+            availableTimeSlots = method(
+              role,
+              compareDate
+            );
             break;
           }
         }
@@ -1163,10 +1221,16 @@ const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => {
     return makeList(24, disabledHours && (() => disabledHours == null ? void 0 : disabledHours(role, compare)));
   };
   const getMinutesList = (hour, role, compare) => {
-    return makeList(60, disabledMinutes && (() => disabledMinutes == null ? void 0 : disabledMinutes(hour, role, compare)));
+    return makeList(
+      60,
+      disabledMinutes && (() => disabledMinutes == null ? void 0 : disabledMinutes(hour, role, compare))
+    );
   };
   const getSecondsList = (hour, minute, role, compare) => {
-    return makeList(60, disabledSeconds && (() => disabledSeconds == null ? void 0 : disabledSeconds(hour, minute, role, compare)));
+    return makeList(
+      60,
+      disabledSeconds && (() => disabledSeconds == null ? void 0 : disabledSeconds(hour, minute, role, compare))
+    );
   };
   return {
     getHoursList,
@@ -1175,7 +1239,11 @@ const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => {
   };
 };
 const buildAvailableTimeSlotGetter = (disabledHours, disabledMinutes, disabledSeconds) => {
-  const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(disabledHours, disabledMinutes, disabledSeconds);
+  const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(
+    disabledHours,
+    disabledMinutes,
+    disabledSeconds
+  );
   const getAvailableHours = (role, compare) => {
     return makeAvailableArr(getHoursList(role, compare));
   };
@@ -1193,11 +1261,14 @@ const buildAvailableTimeSlotGetter = (disabledHours, disabledMinutes, disabledSe
 };
 const useOldValue = (props) => {
   const oldValue = ref(props.parsedValue);
-  watch(() => props.visible, (val) => {
-    if (!val) {
-      oldValue.value = props.parsedValue;
+  watch(
+    () => props.visible,
+    (val) => {
+      if (!val) {
+        oldValue.value = props.parsedValue;
+      }
     }
-  });
+  );
   return oldValue;
 };
 
@@ -1222,16 +1293,23 @@ const basicTimeSpinnerProps = buildProps({
   ...disabledTimeListsProps
 });
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = ["onClick"];
+const _hoisted_2$7 = ["onMouseenter"];
+const _sfc_main$9 = defineComponent({
   __name: "basic-time-spinner",
   props: basicTimeSpinnerProps,
   emits: [CHANGE_EVENT, "select-range", "set-option"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
     const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
     const { isRange, format } = pickerBase.props;
+    const emit = __emit;
     const ns = useNamespace("time");
-    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
+    const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(
+      props.disabledHours,
+      props.disabledMinutes,
+      props.disabledSeconds
+    );
     let isScrolling = false;
     const currentScrollbar = ref();
     const listHoursRef = ref();
@@ -1325,7 +1403,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         return;
       const scrollbar = unref(listRefsMap[type]);
       if (scrollbar && scrollbar.$el) {
-        getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type));
+        getScrollbarElement(scrollbar.$el).scrollTop = Math.max(
+          0,
+          value * typeItemHeight(type)
+        );
       }
     };
     const typeItemHeight = (type) => {
@@ -1395,7 +1476,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         return;
       isScrolling = true;
       debouncedResetScroll(type);
-      const value = Math.min(Math.round((getScrollbarElement(scrollbar.$el).scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), type === "hours" ? 23 : 59);
+      const value = Math.min(
+        Math.round(
+          (getScrollbarElement(scrollbar.$el).scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)
+        ),
+        type === "hours" ? 23 : 59
+      );
       modifyDateField(type, value);
     };
     const scrollBarHeight = (type) => {
@@ -1427,112 +1513,188 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
     emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
     emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]);
-    watch(() => props.spinnerDate, () => {
-      if (isScrolling)
-        return;
-      adjustSpinners();
-    });
+    watch(
+      () => props.spinnerDate,
+      () => {
+        if (isScrolling)
+          return;
+        adjustSpinners();
+      }
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }])
-      }, [
-        !_ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(spinnerItems), (item) => {
-          return openBlock(), createBlock(unref(ElScrollbar), {
-            key: item,
-            ref_for: true,
-            ref: (scrollbar) => setRef(scrollbar, item),
-            class: normalizeClass(unref(ns).be("spinner", "wrapper")),
-            "wrap-style": "max-height: inherit;",
-            "view-class": unref(ns).be("spinner", "list"),
-            noresize: "",
-            tag: "ul",
-            onMouseenter: ($event) => emitSelectRange(item),
-            onMousemove: ($event) => adjustCurrentSpinner(item)
-          }, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(timeList)[item], (disabled, key) => {
-                return openBlock(), createElementBlock("li", {
-                  key,
-                  class: normalizeClass([
-                    unref(ns).be("spinner", "item"),
-                    unref(ns).is("active", key === unref(timePartials)[item]),
-                    unref(ns).is("disabled", disabled)
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }])
+        },
+        [
+          !_ctx.arrowControl ? (openBlock(true), createElementBlock(
+            Fragment,
+            { key: 0 },
+            renderList(spinnerItems.value, (item) => {
+              return openBlock(), createBlock(unref(ElScrollbar), {
+                key: item,
+                ref_for: true,
+                ref: (scrollbar) => setRef(scrollbar, item),
+                class: normalizeClass(unref(ns).be("spinner", "wrapper")),
+                "wrap-style": "max-height: inherit;",
+                "view-class": unref(ns).be("spinner", "list"),
+                noresize: "",
+                tag: "ul",
+                onMouseenter: ($event) => emitSelectRange(item),
+                onMousemove: ($event) => adjustCurrentSpinner(item)
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(timeList.value[item], (disabled, key) => {
+                      return openBlock(), createElementBlock("li", {
+                        key,
+                        class: normalizeClass([
+                          unref(ns).be("spinner", "item"),
+                          unref(ns).is("active", key === timePartials.value[item]),
+                          unref(ns).is("disabled", disabled)
+                        ]),
+                        onClick: ($event) => handleClick(item, { value: key, disabled })
+                      }, [
+                        item === "hours" ? (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 0 },
+                          [
+                            createTextVNode(
+                              toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + toDisplayString(getAmPmFlag(key)),
+                              1
+                            )
+                          ],
+                          64
+                        )) : (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 1 },
+                          [
+                            createTextVNode(
+                              toDisplayString(("0" + key).slice(-2)),
+                              1
+                            )
+                          ],
+                          64
+                        ))
+                      ], 10, _hoisted_1$7);
+                    }),
+                    128
+                  ))
+                ]),
+                _: 2
+              }, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]);
+            }),
+            128
+          )) : createCommentVNode("v-if", true),
+          _ctx.arrowControl ? (openBlock(true), createElementBlock(
+            Fragment,
+            { key: 1 },
+            renderList(spinnerItems.value, (item) => {
+              return openBlock(), createElementBlock("div", {
+                key: item,
+                class: normalizeClass([unref(ns).be("spinner", "wrapper"), unref(ns).is("arrow")]),
+                onMouseenter: ($event) => emitSelectRange(item)
+              }, [
+                withDirectives((openBlock(), createBlock(unref(ElIcon), {
+                  class: normalizeClass(["arrow-up", unref(ns).be("spinner", "arrow")])
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(ArrowUp))
                   ]),
-                  onClick: ($event) => handleClick(item, { value: key, disabled })
-                }, [
-                  item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + toDisplayString(getAmPmFlag(key)), 1)
-                  ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    createTextVNode(toDisplayString(("0" + key).slice(-2)), 1)
-                  ], 64))
-                ], 10, ["onClick"]);
-              }), 128))
-            ]),
-            _: 2
-          }, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]);
-        }), 128)) : createCommentVNode("v-if", true),
-        _ctx.arrowControl ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(spinnerItems), (item) => {
-          return openBlock(), createElementBlock("div", {
-            key: item,
-            class: normalizeClass([unref(ns).be("spinner", "wrapper"), unref(ns).is("arrow")]),
-            onMouseenter: ($event) => emitSelectRange(item)
-          }, [
-            withDirectives((openBlock(), createBlock(unref(ElIcon), {
-              class: normalizeClass(["arrow-up", unref(ns).be("spinner", "arrow")])
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(ArrowUp))
-              ]),
-              _: 1
-            }, 8, ["class"])), [
-              [unref(vRepeatClick), onDecrement]
-            ]),
-            withDirectives((openBlock(), createBlock(unref(ElIcon), {
-              class: normalizeClass(["arrow-down", unref(ns).be("spinner", "arrow")])
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(ArrowDown))
-              ]),
-              _: 1
-            }, 8, ["class"])), [
-              [unref(vRepeatClick), onIncrement]
-            ]),
-            createElementVNode("ul", {
-              class: normalizeClass(unref(ns).be("spinner", "list"))
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(arrowControlTimeList)[item], (time, key) => {
-                return openBlock(), createElementBlock("li", {
-                  key,
-                  class: normalizeClass([
-                    unref(ns).be("spinner", "item"),
-                    unref(ns).is("active", time === unref(timePartials)[item]),
-                    unref(ns).is("disabled", unref(timeList)[item][time])
-                  ])
-                }, [
-                  unref(isNumber)(time) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    item === "hours" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createTextVNode(toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + toDisplayString(getAmPmFlag(time)), 1)
-                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                      createTextVNode(toDisplayString(("0" + time).slice(-2)), 1)
-                    ], 64))
-                  ], 64)) : createCommentVNode("v-if", true)
-                ], 2);
-              }), 128))
-            ], 2)
-          ], 42, ["onMouseenter"]);
-        }), 128)) : createCommentVNode("v-if", true)
-      ], 2);
+                  _: 1
+                }, 8, ["class"])), [
+                  [unref(vRepeatClick), onDecrement]
+                ]),
+                withDirectives((openBlock(), createBlock(unref(ElIcon), {
+                  class: normalizeClass(["arrow-down", unref(ns).be("spinner", "arrow")])
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(ArrowDown))
+                  ]),
+                  _: 1
+                }, 8, ["class"])), [
+                  [unref(vRepeatClick), onIncrement]
+                ]),
+                createElementVNode(
+                  "ul",
+                  {
+                    class: normalizeClass(unref(ns).be("spinner", "list"))
+                  },
+                  [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(arrowControlTimeList.value[item], (time, key) => {
+                        return openBlock(), createElementBlock(
+                          "li",
+                          {
+                            key,
+                            class: normalizeClass([
+                              unref(ns).be("spinner", "item"),
+                              unref(ns).is("active", time === timePartials.value[item]),
+                              unref(ns).is("disabled", timeList.value[item][time])
+                            ])
+                          },
+                          [
+                            unref(isNumber)(time) ? (openBlock(), createElementBlock(
+                              Fragment,
+                              { key: 0 },
+                              [
+                                item === "hours" ? (openBlock(), createElementBlock(
+                                  Fragment,
+                                  { key: 0 },
+                                  [
+                                    createTextVNode(
+                                      toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + toDisplayString(getAmPmFlag(time)),
+                                      1
+                                    )
+                                  ],
+                                  64
+                                )) : (openBlock(), createElementBlock(
+                                  Fragment,
+                                  { key: 1 },
+                                  [
+                                    createTextVNode(
+                                      toDisplayString(("0" + time).slice(-2)),
+                                      1
+                                    )
+                                  ],
+                                  64
+                                ))
+                              ],
+                              64
+                            )) : createCommentVNode("v-if", true)
+                          ],
+                          2
+                        );
+                      }),
+                      128
+                    ))
+                  ],
+                  2
+                )
+              ], 42, _hoisted_2$7);
+            }),
+            128
+          )) : createCommentVNode("v-if", true)
+        ],
+        2
+      );
     };
   }
 });
-var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "basic-time-spinner.vue"]]);
+var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue"]]);
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = defineComponent({
   __name: "panel-time-pick",
   props: panelTimePickerProps,
   emits: ["pick", "select-range", "set-picker-option"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
     const {
       arrowControl,
@@ -1648,52 +1810,77 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
     emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, { name: unref(transitionName) }, {
+      return openBlock(), createBlock(Transition, { name: transitionName.value }, {
         default: withCtx(() => [
-          _ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(unref(ns).b("panel"))
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass([unref(ns).be("panel", "content"), { "has-seconds": unref(showSeconds) }])
-            }, [
-              createVNode(TimeSpinner, {
-                ref: "spinner",
-                role: _ctx.datetimeRole || "start",
-                "arrow-control": unref(arrowControl),
-                "show-seconds": unref(showSeconds),
-                "am-pm-mode": unref(amPmMode),
-                "spinner-date": _ctx.parsedValue,
-                "disabled-hours": unref(disabledHours),
-                "disabled-minutes": unref(disabledMinutes),
-                "disabled-seconds": unref(disabledSeconds),
-                onChange: handleChange,
-                onSetOption: unref(onSetOption),
-                onSelectRange: setSelectionRange
-              }, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
-            ], 2),
-            createElementVNode("div", {
-              class: normalizeClass(unref(ns).be("panel", "footer"))
-            }, [
-              createElementVNode("button", {
-                type: "button",
-                class: normalizeClass([unref(ns).be("panel", "btn"), "cancel"]),
-                onClick: handleCancel
-              }, toDisplayString(unref(t)("el.datepicker.cancel")), 3),
-              createElementVNode("button", {
-                type: "button",
-                class: normalizeClass([unref(ns).be("panel", "btn"), "confirm"]),
-                onClick: ($event) => handleConfirm()
-              }, toDisplayString(unref(t)("el.datepicker.confirm")), 11, ["onClick"])
-            ], 2)
-          ], 2)) : createCommentVNode("v-if", true)
+          _ctx.actualVisible || _ctx.visible ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass(unref(ns).b("panel"))
+            },
+            [
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass([unref(ns).be("panel", "content"), { "has-seconds": showSeconds.value }])
+                },
+                [
+                  createVNode(TimeSpinner, {
+                    ref: "spinner",
+                    role: _ctx.datetimeRole || "start",
+                    "arrow-control": unref(arrowControl),
+                    "show-seconds": showSeconds.value,
+                    "am-pm-mode": amPmMode.value,
+                    "spinner-date": _ctx.parsedValue,
+                    "disabled-hours": unref(disabledHours),
+                    "disabled-minutes": unref(disabledMinutes),
+                    "disabled-seconds": unref(disabledSeconds),
+                    onChange: handleChange,
+                    onSetOption: unref(onSetOption),
+                    onSelectRange: setSelectionRange
+                  }, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
+                ],
+                2
+              ),
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(unref(ns).be("panel", "footer"))
+                },
+                [
+                  createElementVNode(
+                    "button",
+                    {
+                      type: "button",
+                      class: normalizeClass([unref(ns).be("panel", "btn"), "cancel"]),
+                      onClick: handleCancel
+                    },
+                    toDisplayString(unref(t)("el.datepicker.cancel")),
+                    3
+                  ),
+                  createElementVNode(
+                    "button",
+                    {
+                      type: "button",
+                      class: normalizeClass([unref(ns).be("panel", "btn"), "confirm"]),
+                      onClick: _cache[0] || (_cache[0] = ($event) => handleConfirm())
+                    },
+                    toDisplayString(unref(t)("el.datepicker.confirm")),
+                    3
+                  )
+                ],
+                2
+              )
+            ],
+            2
+          )) : createCommentVNode("v-if", true)
         ]),
         _: 1
       }, 8, ["name"]);
     };
   }
 });
-var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "panel-time-pick.vue"]]);
+var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue"]]);
 
 var advancedFormat$2 = {exports: {}};
 
@@ -1853,6 +2040,10 @@ const datePickerPanelProps = buildProps({
   border: {
     type: Boolean,
     default: true
+  },
+  editable: {
+    type: Boolean,
+    default: true
   }
 });
 
@@ -1917,7 +2108,11 @@ const panelSharedProps = buildProps({
   },
   showWeekNumber: Boolean,
   border: Boolean,
-  disabled: Boolean
+  disabled: Boolean,
+  editable: {
+    type: Boolean,
+    default: true
+  }
 });
 const panelRangeSharedProps = buildProps({
   unlinkPanels: Boolean,
@@ -2062,7 +2257,9 @@ const getValidDateOfYear = (value, lang, disabledDate) => {
 };
 const correctlyParseUserInput = (value, format, lang, defaultFormat) => {
   if (isArray(value)) {
-    return value.map((v) => correctlyParseUserInput(v, format, lang, defaultFormat));
+    return value.map(
+      (v) => correctlyParseUserInput(v, format, lang, defaultFormat)
+    );
   }
   if (isString(value)) {
     const dayjsValue = (defaultFormat == null ? void 0 : defaultFormat.value) ? dayjs(value) : dayjs(value, format);
@@ -2101,7 +2298,10 @@ const useBasicDateTable = (props, emit) => {
     return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
   });
   const WEEKS = computed(() => {
-    return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
+    return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(
+      firstDayOfWeek,
+      firstDayOfWeek + 7
+    );
   });
   const hasCurrent = computed(() => {
     return flatten(unref(rows)).some((row) => {
@@ -2199,13 +2399,16 @@ const useBasicDateTable = (props, emit) => {
     }
     return rows_;
   });
-  watch(() => props.date, async () => {
-    var _a;
-    if ((_a = unref(tbodyRef)) == null ? void 0 : _a.contains(document.activeElement)) {
-      await nextTick();
-      await focus();
+  watch(
+    () => props.date,
+    async () => {
+      var _a;
+      if ((_a = unref(tbodyRef)) == null ? void 0 : _a.contains(document.activeElement)) {
+        await nextTick();
+        await focus();
+      }
     }
-  });
+  );
   const focus = async () => {
     var _a;
     return (_a = unref(currentCellRef)) == null ? void 0 : _a.focus();
@@ -2292,7 +2495,9 @@ const useBasicDateTable = (props, emit) => {
     });
   };
   const handleDatesPick = (newDate, selected) => {
-    const newValue = selected ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()) : castArray(props.parsedValue).concat([newDate]);
+    const newValue = selected ? castArray(props.parsedValue).filter(
+      (d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()
+    ) : castArray(props.parsedValue).concat([newDate]);
     emit("pick", newValue);
   };
   const handlePickDate = (event, isKeyboardMovement = false) => {
@@ -2450,12 +2655,16 @@ var ElDatePickerCell = defineComponent({
   }
 });
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = ["aria-label"];
+const _hoisted_2$6 = ["aria-label"];
+const _hoisted_3$4 = ["aria-current", "aria-selected", "tabindex", "aria-disabled"];
+const _sfc_main$7 = defineComponent({
   __name: "basic-date-table",
   props: basicDateTableProps,
   emits: basicDateTableEmits,
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const {
       WEEKS,
       rows,
@@ -2479,7 +2688,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       isUnmounting = true;
     });
-    expose({
+    __expose({
       focus
     });
     return (_ctx, _cache) => {
@@ -2489,74 +2698,109 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         cellspacing: "0",
         cellpadding: "0",
         role: "grid",
-        onClick: unref(handlePickDate),
-        onMousemove: unref(handleMouseMove),
-        onMousedown: unref(handleMouseDown),
-        onMouseup: unref(handleMouseUp)
+        onClick: _cache[1] || (_cache[1] = (...args) => unref(handlePickDate) && unref(handlePickDate)(...args)),
+        onMousemove: _cache[2] || (_cache[2] = (...args) => unref(handleMouseMove) && unref(handleMouseMove)(...args)),
+        onMousedown: _cache[3] || (_cache[3] = (...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args)),
+        onMouseup: _cache[4] || (_cache[4] = (...args) => unref(handleMouseUp) && unref(handleMouseUp)(...args))
       }, [
-        createElementVNode("tbody", {
-          ref_key: "tbodyRef",
-          ref: tbodyRef
-        }, [
-          createElementVNode("tr", null, [
-            _ctx.showWeekNumber ? (openBlock(), createElementBlock("th", {
-              key: 0,
-              scope: "col",
-              class: normalizeClass(unref(weekHeaderClass))
-            }, null, 2)) : createCommentVNode("v-if", true),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(WEEKS), (week, key) => {
-              return openBlock(), createElementBlock("th", {
-                key,
-                "aria-label": unref(t)("el.datepicker.weeksFull." + week),
-                scope: "col"
-              }, toDisplayString(unref(t)("el.datepicker.weeks." + week)), 9, ["aria-label"]);
-            }), 128))
-          ]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
-            return openBlock(), createElementBlock("tr", {
-              key: rowKey,
-              class: normalizeClass(unref(getRowKls)(_ctx.showWeekNumber ? row[2] : row[1]))
-            }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, columnKey) => {
-                return openBlock(), createElementBlock("td", {
-                  key: `${rowKey}.${columnKey}`,
-                  ref_for: true,
-                  ref: (el) => !unref(isUnmounting) && unref(isSelectedCell)(cell) && (currentCellRef.value = el),
-                  class: normalizeClass(unref(getCellClasses)(cell)),
-                  "aria-current": cell.isCurrent ? "date" : void 0,
-                  "aria-selected": cell.isCurrent,
-                  tabindex: _ctx.disabled ? void 0 : unref(isSelectedCell)(cell) ? 0 : -1,
-                  "aria-disabled": _ctx.disabled,
-                  onFocus: unref(handleFocus)
-                }, [
-                  createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
-                ], 42, ["aria-current", "aria-selected", "tabindex", "aria-disabled", "onFocus"]);
-              }), 128))
-            ], 2);
-          }), 128))
-        ], 512)
-      ], 42, ["aria-label", "onClick", "onMousemove", "onMousedown", "onMouseup"]);
+        createElementVNode(
+          "tbody",
+          {
+            ref_key: "tbodyRef",
+            ref: tbodyRef
+          },
+          [
+            createElementVNode("tr", null, [
+              _ctx.showWeekNumber ? (openBlock(), createElementBlock(
+                "th",
+                {
+                  key: 0,
+                  scope: "col",
+                  class: normalizeClass(unref(weekHeaderClass))
+                },
+                null,
+                2
+              )) : createCommentVNode("v-if", true),
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(unref(WEEKS), (week, key) => {
+                  return openBlock(), createElementBlock("th", {
+                    key,
+                    "aria-label": unref(t)("el.datepicker.weeksFull." + week),
+                    scope: "col"
+                  }, toDisplayString(unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_2$6);
+                }),
+                128
+              ))
+            ]),
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(unref(rows), (row, rowKey) => {
+                return openBlock(), createElementBlock(
+                  "tr",
+                  {
+                    key: rowKey,
+                    class: normalizeClass(unref(getRowKls)(_ctx.showWeekNumber ? row[2] : row[1]))
+                  },
+                  [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(row, (cell, columnKey) => {
+                        return openBlock(), createElementBlock("td", {
+                          key: `${rowKey}.${columnKey}`,
+                          ref_for: true,
+                          ref: (el) => !unref(isUnmounting) && unref(isSelectedCell)(cell) && (currentCellRef.value = el),
+                          class: normalizeClass(unref(getCellClasses)(cell)),
+                          "aria-current": cell.isCurrent ? "date" : void 0,
+                          "aria-selected": cell.isCurrent,
+                          tabindex: _ctx.disabled ? void 0 : unref(isSelectedCell)(cell) ? 0 : -1,
+                          "aria-disabled": _ctx.disabled,
+                          onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args))
+                        }, [
+                          createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
+                        ], 42, _hoisted_3$4);
+                      }),
+                      128
+                    ))
+                  ],
+                  2
+                );
+              }),
+              128
+            ))
+          ],
+          512
+        )
+      ], 42, _hoisted_1$6);
     };
   }
 });
-var DateTable = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "basic-date-table.vue"]]);
+var DateTable = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue"]]);
 
 const basicMonthTableProps = buildProps({
   ...datePickerSharedProps,
   selectionMode: selectionModeWithDefault("month")
 });
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = ["aria-label"];
+const _hoisted_2$5 = ["aria-selected", "aria-label", "tabindex", "onKeydown"];
+const _sfc_main$6 = defineComponent({
   __name: "basic-month-table",
   props: basicMonthTableProps,
   emits: ["changerange", "pick", "select"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const ns = useNamespace("month-table");
     const { t, lang } = useLocale();
     const tbodyRef = ref();
     const currentCellRef = ref();
-    const months = ref(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase()));
+    const months = ref(
+      props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase())
+    );
     const tableRows = ref([[], [], []]);
     const lastRow = ref();
     const lastColumn = ref();
@@ -2622,8 +2866,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       const year = props.date.year();
       const today = /* @__PURE__ */ new Date();
       const month = cell.text;
-      style.disabled = props.disabled || (props.disabledDate ? datesInMonth(props.date, year, month, lang.value).every(props.disabledDate) : false);
-      style.current = castArray(props.parsedValue).some((date) => dayjs.isDayjs(date) && date.year() === year && date.month() === month);
+      style.disabled = props.disabled || (props.disabledDate ? datesInMonth(props.date, year, month, lang.value).every(
+        props.disabledDate
+      ) : false);
+      style.current = castArray(props.parsedValue).some(
+        (date) => dayjs.isDayjs(date) && date.year() === year && date.month() === month
+      );
       style.today = today.getFullYear() === year && today.getMonth() === month;
       if (cell.customClass) {
         style[cell.customClass] = true;
@@ -2642,7 +2890,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const isSelectedCell = (cell) => {
       const year = props.date.year();
       const month = cell.text;
-      return castArray(props.date).some((date) => date.year() === year && date.month() === month);
+      return castArray(props.date).some(
+        (date) => date.year() === year && date.month() === month
+      );
     };
     const handleMouseMove = (event) => {
       var _a;
@@ -2674,7 +2924,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       var _a;
       if (props.disabled)
         return;
-      const target = (_a = event.target) == null ? void 0 : _a.closest("td");
+      const target = (_a = event.target) == null ? void 0 : _a.closest(
+        "td"
+      );
       if ((target == null ? void 0 : target.tagName) !== "TD")
         return;
       if (hasClass(target, "disabled"))
@@ -2688,8 +2940,16 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           emit("pick", castArray(props.parsedValue), false);
           return;
         }
-        const newMonth = getValidDateOfMonth(props.date, props.date.year(), month, lang.value, props.disabledDate);
-        const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.year()) !== newMonth.year() || (d == null ? void 0 : d.month()) !== newMonth.month()) : castArray(props.parsedValue).concat([dayjs(newMonth)]);
+        const newMonth = getValidDateOfMonth(
+          props.date,
+          props.date.year(),
+          month,
+          lang.value,
+          props.disabledDate
+        );
+        const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter(
+          (d) => (d == null ? void 0 : d.year()) !== newMonth.year() || (d == null ? void 0 : d.month()) !== newMonth.month()
+        ) : castArray(props.parsedValue).concat([dayjs(newMonth)]);
         emit("pick", newValue);
       } else if (props.selectionMode === "range") {
         if (!props.rangeState.selecting) {
@@ -2707,14 +2967,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         emit("pick", month);
       }
     };
-    watch(() => props.date, async () => {
-      var _a, _b;
-      if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
-        await nextTick();
-        (_b = currentCellRef.value) == null ? void 0 : _b.focus();
+    watch(
+      () => props.date,
+      async () => {
+        var _a, _b;
+        if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
+          await nextTick();
+          (_b = currentCellRef.value) == null ? void 0 : _b.focus();
+        }
       }
-    });
-    expose({
+    );
+    __expose({
       focus
     });
     return (_ctx, _cache) => {
@@ -2725,60 +2988,78 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         onClick: handleMonthTableClick,
         onMousemove: handleMouseMove
       }, [
-        createElementVNode("tbody", {
-          ref_key: "tbodyRef",
-          ref: tbodyRef
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, key) => {
-            return openBlock(), createElementBlock("tr", { key }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, key_) => {
-                return openBlock(), createElementBlock("td", {
-                  key: key_,
-                  ref_for: true,
-                  ref: (el) => cell.isSelected && (currentCellRef.value = el),
-                  class: normalizeClass(getCellStyle(cell)),
-                  "aria-selected": !!cell.isSelected,
-                  "aria-label": unref(t)(`el.datepicker.month${+cell.text + 1}`),
-                  tabindex: cell.isSelected ? 0 : -1,
-                  onKeydown: [
-                    withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["space"]),
-                    withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["enter"])
-                  ]
-                }, [
-                  createVNode(unref(ElDatePickerCell), {
-                    cell: {
-                      ...cell,
-                      renderText: unref(t)("el.datepicker.months." + months.value[cell.text])
-                    }
-                  }, null, 8, ["cell"])
-                ], 42, ["aria-selected", "aria-label", "tabindex", "onKeydown"]);
-              }), 128))
-            ]);
-          }), 128))
-        ], 512)
-      ], 42, ["aria-label"]);
+        createElementVNode(
+          "tbody",
+          {
+            ref_key: "tbodyRef",
+            ref: tbodyRef
+          },
+          [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(rows.value, (row, key) => {
+                return openBlock(), createElementBlock("tr", { key }, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(row, (cell, key_) => {
+                      return openBlock(), createElementBlock("td", {
+                        key: key_,
+                        ref_for: true,
+                        ref: (el) => cell.isSelected && (currentCellRef.value = el),
+                        class: normalizeClass(getCellStyle(cell)),
+                        "aria-selected": !!cell.isSelected,
+                        "aria-label": unref(t)(`el.datepicker.month${+cell.text + 1}`),
+                        tabindex: cell.isSelected ? 0 : -1,
+                        onKeydown: [
+                          withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["space"]),
+                          withKeys(withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["enter"])
+                        ]
+                      }, [
+                        createVNode(unref(ElDatePickerCell), {
+                          cell: {
+                            ...cell,
+                            renderText: unref(t)("el.datepicker.months." + months.value[cell.text])
+                          }
+                        }, null, 8, ["cell"])
+                      ], 42, _hoisted_2$5);
+                    }),
+                    128
+                  ))
+                ]);
+              }),
+              128
+            ))
+          ],
+          512
+        )
+      ], 42, _hoisted_1$5);
     };
   }
 });
-var MonthTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "basic-month-table.vue"]]);
+var MonthTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker-panel/src/date-picker-com/basic-month-table.vue"]]);
 
 const basicYearTableProps = buildProps({
   ...datePickerSharedProps,
   selectionMode: selectionModeWithDefault("year")
 });
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["aria-label"];
+const _hoisted_2$4 = ["aria-selected", "aria-label", "tabindex", "onKeydown"];
+const _sfc_main$5 = defineComponent({
   __name: "basic-year-table",
   props: basicYearTableProps,
   emits: ["changerange", "pick", "select"],
-  setup(__props, { expose, emit }) {
-    const props = __props;
+  setup(__props, { expose: __expose, emit: __emit }) {
     const datesInYear = (year, lang2) => {
       const firstDay = dayjs(String(year)).locale(lang2).startOf("year");
       const lastDay = firstDay.endOf("year");
       const numOfDays = lastDay.dayOfYear();
       return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
     };
+    const props = __props;
+    const emit = __emit;
     const ns = useNamespace("year-table");
     const { t, lang } = useLocale();
     const tbodyRef = ref();
@@ -2882,7 +3163,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       var _a;
       if (props.disabled)
         return;
-      const target = (_a = event.target) == null ? void 0 : _a.closest("td");
+      const target = (_a = event.target) == null ? void 0 : _a.closest(
+        "td"
+      );
       if (!target || !target.textContent || hasClass(target, "disabled"))
         return;
       const column = target.cellIndex;
@@ -2906,7 +3189,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           emit("pick", castArray(props.parsedValue), false);
           return;
         }
-        const vaildYear = getValidDateOfYear(newDate.startOf("year"), lang.value, props.disabledDate);
+        const vaildYear = getValidDateOfYear(
+          newDate.startOf("year"),
+          lang.value,
+          props.disabledDate
+        );
         const newValue = hasClass(target, "current") ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.year()) !== selectedYear) : castArray(props.parsedValue).concat([vaildYear]);
         emit("pick", newValue);
       } else {
@@ -2917,7 +3204,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       var _a;
       if (!props.rangeState.selecting)
         return;
-      const target = (_a = event.target) == null ? void 0 : _a.closest("td");
+      const target = (_a = event.target) == null ? void 0 : _a.closest(
+        "td"
+      );
       if (!target)
         return;
       const row = target.parentNode.rowIndex;
@@ -2933,14 +3222,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         });
       }
     };
-    watch(() => props.date, async () => {
-      var _a, _b;
-      if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
-        await nextTick();
-        (_b = currentCellRef.value) == null ? void 0 : _b.focus();
+    watch(
+      () => props.date,
+      async () => {
+        var _a, _b;
+        if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
+          await nextTick();
+          (_b = currentCellRef.value) == null ? void 0 : _b.focus();
+        }
       }
-    });
-    expose({
+    );
+    __expose({
       focus
     });
     return (_ctx, _cache) => {
@@ -2951,52 +3243,78 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         onClick: handleYearTableClick,
         onMousemove: handleMouseMove
       }, [
-        createElementVNode("tbody", {
-          ref_key: "tbodyRef",
-          ref: tbodyRef
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
-            return openBlock(), createElementBlock("tr", { key: rowKey }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, cellKey) => {
-                return openBlock(), createElementBlock("td", {
-                  key: `${rowKey}_${cellKey}`,
-                  ref_for: true,
-                  ref: (el) => cell.isSelected && (currentCellRef.value = el),
-                  class: normalizeClass(["available", getCellKls(cell)]),
-                  "aria-selected": cell.isSelected,
-                  "aria-label": String(cell.text),
-                  tabindex: cell.isSelected ? 0 : -1,
-                  onKeydown: [
-                    withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
-                    withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
-                  ]
-                }, [
-                  createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
-                ], 42, ["aria-selected", "aria-label", "tabindex", "onKeydown"]);
-              }), 128))
-            ]);
-          }), 128))
-        ], 512)
-      ], 42, ["aria-label"]);
+        createElementVNode(
+          "tbody",
+          {
+            ref_key: "tbodyRef",
+            ref: tbodyRef
+          },
+          [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(rows.value, (row, rowKey) => {
+                return openBlock(), createElementBlock("tr", { key: rowKey }, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(row, (cell, cellKey) => {
+                      return openBlock(), createElementBlock("td", {
+                        key: `${rowKey}_${cellKey}`,
+                        ref_for: true,
+                        ref: (el) => cell.isSelected && (currentCellRef.value = el),
+                        class: normalizeClass(["available", getCellKls(cell)]),
+                        "aria-selected": cell.isSelected,
+                        "aria-label": String(cell.text),
+                        tabindex: cell.isSelected ? 0 : -1,
+                        onKeydown: [
+                          withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
+                          withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
+                        ]
+                      }, [
+                        createVNode(unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
+                      ], 42, _hoisted_2$4);
+                    }),
+                    128
+                  ))
+                ]);
+              }),
+              128
+            ))
+          ],
+          512
+        )
+      ], 42, _hoisted_1$4);
     };
   }
 });
-var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "basic-year-table.vue"]]);
+var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker-panel/src/date-picker-com/basic-year-table.vue"]]);
 
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = ["disabled", "onClick"];
+const _hoisted_2$3 = ["aria-label", "disabled"];
+const _hoisted_3$3 = ["aria-label", "disabled"];
+const _hoisted_4$3 = ["tabindex", "aria-disabled"];
+const _hoisted_5$3 = ["tabindex", "aria-disabled"];
+const _hoisted_6$1 = ["aria-label", "disabled"];
+const _hoisted_7$1 = ["aria-label", "disabled"];
+const _sfc_main$4 = defineComponent({
   __name: "panel-date-pick",
   props: panelDatePickProps,
   emits: ["pick", "set-picker-option", "panel-change"],
-  setup(__props, { emit: contextEmit }) {
-    const props = __props;
+  setup(__props, { emit: __emit }) {
     const timeWithinRange = (_, __, ___) => true;
+    const props = __props;
+    const contextEmit = __emit;
     const ppNs = useNamespace("picker-panel");
     const dpNs = useNamespace("date-picker");
     const attrs = useAttrs$1();
     const slots = useSlots();
     const { t, lang } = useLocale();
     const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
-    const isDefaultFormat = inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, void 0);
+    const isDefaultFormat = inject(
+      ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,
+      void 0
+    );
     const { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props;
     const defaultValue = toRef(pickerBase.props, "defaultValue");
     const currentViewRef = ref();
@@ -3106,12 +3424,24 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const hasShortcuts = computed(() => !!shortcuts.length);
     const handleMonthPick = async (month2, keepOpen) => {
       if (selectionMode.value === "month") {
-        innerDate.value = getValidDateOfMonth(innerDate.value, innerDate.value.year(), month2, lang.value, disabledDate);
+        innerDate.value = getValidDateOfMonth(
+          innerDate.value,
+          innerDate.value.year(),
+          month2,
+          lang.value,
+          disabledDate
+        );
         emit(innerDate.value, false);
       } else if (selectionMode.value === "months") {
         emit(month2, keepOpen != null ? keepOpen : true);
       } else {
-        innerDate.value = getValidDateOfMonth(innerDate.value, innerDate.value.year(), month2, lang.value, disabledDate);
+        innerDate.value = getValidDateOfMonth(
+          innerDate.value,
+          innerDate.value.year(),
+          month2,
+          lang.value,
+          disabledDate
+        );
         currentView.value = "date";
         if (["month", "year", "date", "week"].includes(selectionMode.value)) {
           emit(innerDate.value, true);
@@ -3148,7 +3478,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       await nextTick();
       handleFocusPicker();
     };
-    const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
+    const showTime = computed(
+      () => props.type === "datetime" || props.type === "datetimerange"
+    );
     const footerVisible = computed(() => {
       const showDateFooter = showTime.value || selectionMode.value === "dates";
       const showYearFooter = selectionMode.value === "years";
@@ -3158,7 +3490,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const isMonthView = currentView.value === "month";
       return showDateFooter && isDateView || showYearFooter && isYearView || showMonthFooter && isMonthView;
     });
-    const footerFilled = computed(() => !isMultipleType.value && props.showNow || props.showConfirm);
+    const footerFilled = computed(
+      () => !isMultipleType.value && props.showNow || props.showConfirm
+    );
     const disabledConfirm = computed(() => {
       if (!disabledDate)
         return false;
@@ -3257,7 +3591,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     };
     const handleVisibleDateChange = (value) => {
-      const newDate = correctlyParseUserInput(value, dateFormat.value, lang.value, isDefaultFormat);
+      const newDate = correctlyParseUserInput(
+        value,
+        dateFormat.value,
+        lang.value,
+        isDefaultFormat
+      );
       if (newDate.isValid()) {
         if (disabledDate && disabledDate(newDate.toDate())) {
           return;
@@ -3272,7 +3611,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return dayjs.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true);
     };
     const parseUserInput = (value) => {
-      return correctlyParseUserInput(value, props.format, lang.value, isDefaultFormat);
+      return correctlyParseUserInput(
+        value,
+        props.format,
+        lang.value,
+        isDefaultFormat
+      );
     };
     const getDefaultValue = () => {
       const parseDate = dayjs(defaultValue.value).locale(lang.value);
@@ -3311,7 +3655,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         event.stopPropagation();
         event.preventDefault();
       }
-      if ([EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(code) && userInputDate.value === null && userInputTime.value === null) {
+      if ([EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(
+        code
+      ) && userInputDate.value === null && userInputTime.value === null) {
         event.preventDefault();
         emit(innerDate.value, false);
       }
@@ -3358,7 +3704,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         const map = mapping[keyboardMode.value];
         if (!map)
           return;
-        map.offset(newDate, isFunction(map[code]) ? map[code](newDate) : (_a = map[code]) != null ? _a : 0);
+        map.offset(
+          newDate,
+          isFunction(map[code]) ? map[code](newDate) : (_a = map[code]) != null ? _a : 0
+        );
         if (disabledDate && disabledDate(newDate)) {
           break;
         }
@@ -3371,303 +3720,388 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const handlePanelChange = (mode) => {
       contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
     };
-    watch(() => selectionMode.value, (val) => {
-      if (["month", "year"].includes(val)) {
-        currentView.value = val;
-        return;
-      } else if (val === "years") {
-        currentView.value = "year";
-        return;
-      } else if (val === "months") {
-        currentView.value = "month";
-        return;
-      }
-      currentView.value = "date";
-    }, { immediate: true });
-    watch(() => defaultValue.value, (val) => {
-      if (val) {
-        innerDate.value = getDefaultValue();
-      }
-    }, { immediate: true });
-    watch(() => props.parsedValue, (val) => {
-      if (val) {
-        if (isMultipleType.value)
+    watch(
+      () => selectionMode.value,
+      (val) => {
+        if (["month", "year"].includes(val)) {
+          currentView.value = val;
           return;
-        if (isArray(val))
+        } else if (val === "years") {
+          currentView.value = "year";
           return;
-        innerDate.value = val;
-      } else {
-        innerDate.value = getDefaultValue();
-      }
-    }, { immediate: true });
+        } else if (val === "months") {
+          currentView.value = "month";
+          return;
+        }
+        currentView.value = "date";
+      },
+      { immediate: true }
+    );
+    watch(
+      () => defaultValue.value,
+      (val) => {
+        if (val) {
+          innerDate.value = getDefaultValue();
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.parsedValue,
+      (val) => {
+        if (val) {
+          if (isMultipleType.value)
+            return;
+          if (isArray(val))
+            return;
+          innerDate.value = val;
+        } else {
+          innerDate.value = getDefaultValue();
+        }
+      },
+      { immediate: true }
+    );
     contextEmit("set-picker-option", ["isValidValue", isValidValue]);
     contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
     contextEmit("set-picker-option", ["handleFocusPicker", _handleFocusPicker]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          unref(ppNs).b(),
-          unref(dpNs).b(),
-          unref(ppNs).is("border", _ctx.border),
-          unref(ppNs).is("disabled", unref(dateDisabled)),
-          {
-            "has-sidebar": _ctx.$slots.sidebar || unref(hasShortcuts),
-            "has-time": unref(showTime)
-          }
-        ])
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(ppNs).e("body-wrapper"))
-        }, [
-          renderSlot(_ctx.$slots, "sidebar", {
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }),
-          unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
-              return openBlock(), createElementBlock("button", {
-                key,
-                type: "button",
-                disabled: unref(dateDisabled),
-                class: normalizeClass(unref(ppNs).e("shortcut")),
-                onClick: ($event) => handleShortcutClick(shortcut)
-              }, toDisplayString(shortcut.text), 11, ["disabled", "onClick"]);
-            }), 128))
-          ], 2)) : createCommentVNode("v-if", true),
-          createElementVNode("div", {
-            class: normalizeClass(unref(ppNs).e("body"))
-          }, [
-            unref(showTime) ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(unref(dpNs).e("time-header"))
-            }, [
-              createElementVNode("span", {
-                class: normalizeClass(unref(dpNs).e("editor-wrap"))
-              }, [
-                createVNode(unref(ElInput), {
-                  placeholder: unref(t)("el.datepicker.selectDate"),
-                  "model-value": unref(visibleDate),
-                  size: "small",
-                  "validate-event": false,
-                  disabled: unref(dateDisabled),
-                  onInput: (val) => userInputDate.value = val,
-                  onChange: handleVisibleDateChange
-                }, null, 8, ["placeholder", "model-value", "disabled", "onInput"])
-              ], 2),
-              withDirectives((openBlock(), createElementBlock("span", {
-                class: normalizeClass(unref(dpNs).e("editor-wrap"))
-              }, [
-                createVNode(unref(ElInput), {
-                  placeholder: unref(t)("el.datepicker.selectTime"),
-                  "model-value": unref(visibleTime),
-                  size: "small",
-                  "validate-event": false,
-                  disabled: unref(dateDisabled),
-                  onFocus: onTimePickerInputFocus,
-                  onInput: (val) => userInputTime.value = val,
-                  onChange: handleVisibleTimeChange
-                }, null, 8, ["placeholder", "model-value", "disabled", "onInput"]),
-                createVNode(unref(TimePickPanel), {
-                  visible: timePickerVisible.value,
-                  format: unref(timeFormat),
-                  "parsed-value": innerDate.value,
-                  onPick: handleTimePick
-                }, null, 8, ["visible", "format", "parsed-value"])
-              ], 2)), [
-                [unref(ClickOutside), handleTimePickClose]
-              ])
-            ], 2)) : createCommentVNode("v-if", true),
-            withDirectives(createElementVNode("div", {
-              class: normalizeClass([
-                unref(dpNs).e("header"),
-                (currentView.value === "year" || currentView.value === "month") && unref(dpNs).em("header", "bordered")
-              ])
-            }, [
-              createElementVNode("span", {
-                class: normalizeClass(unref(dpNs).e("prev-btn"))
-              }, [
-                createElementVNode("button", {
-                  type: "button",
-                  "aria-label": unref(t)(`el.datepicker.prevYear`),
-                  class: normalizeClass(["d-arrow-left", unref(ppNs).e("icon-btn")]),
-                  disabled: unref(dateDisabled),
-                  onClick: ($event) => moveByYear(false)
-                }, [
-                  renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["aria-label", "disabled", "onClick"]),
-                withDirectives(createElementVNode("button", {
-                  type: "button",
-                  "aria-label": unref(t)(`el.datepicker.prevMonth`),
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
-                  disabled: unref(dateDisabled),
-                  onClick: ($event) => moveByMonth(false)
-                }, [
-                  renderSlot(_ctx.$slots, "prev-month", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(ArrowLeft))
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([
+            unref(ppNs).b(),
+            unref(dpNs).b(),
+            unref(ppNs).is("border", _ctx.border),
+            unref(ppNs).is("disabled", unref(dateDisabled)),
+            {
+              "has-sidebar": _ctx.$slots.sidebar || hasShortcuts.value,
+              "has-time": showTime.value
+            }
+          ])
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(ppNs).e("body-wrapper"))
+            },
+            [
+              renderSlot(_ctx.$slots, "sidebar", {
+                class: normalizeClass(unref(ppNs).e("sidebar"))
+              }),
+              hasShortcuts.value ? (openBlock(), createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: normalizeClass(unref(ppNs).e("sidebar"))
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(unref(shortcuts), (shortcut, key) => {
+                      return openBlock(), createElementBlock("button", {
+                        key,
+                        type: "button",
+                        disabled: unref(dateDisabled),
+                        class: normalizeClass(unref(ppNs).e("shortcut")),
+                        onClick: ($event) => handleShortcutClick(shortcut)
+                      }, toDisplayString(shortcut.text), 11, _hoisted_1$3);
+                    }),
+                    128
+                  ))
+                ],
+                2
+              )) : createCommentVNode("v-if", true),
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(unref(ppNs).e("body"))
+                },
+                [
+                  showTime.value ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: normalizeClass(unref(dpNs).e("time-header"))
+                    },
+                    [
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass(unref(dpNs).e("editor-wrap"))
+                        },
+                        [
+                          createVNode(unref(ElInput), {
+                            placeholder: unref(t)("el.datepicker.selectDate"),
+                            "model-value": visibleDate.value,
+                            size: "small",
+                            "validate-event": false,
+                            disabled: unref(dateDisabled),
+                            readonly: !_ctx.editable,
+                            onInput: _cache[0] || (_cache[0] = (val) => userInputDate.value = val),
+                            onChange: handleVisibleDateChange
+                          }, null, 8, ["placeholder", "model-value", "disabled", "readonly"])
+                        ],
+                        2
+                      ),
+                      withDirectives((openBlock(), createElementBlock(
+                        "span",
+                        {
+                          class: normalizeClass(unref(dpNs).e("editor-wrap"))
+                        },
+                        [
+                          createVNode(unref(ElInput), {
+                            placeholder: unref(t)("el.datepicker.selectTime"),
+                            "model-value": visibleTime.value,
+                            size: "small",
+                            "validate-event": false,
+                            disabled: unref(dateDisabled),
+                            readonly: !_ctx.editable,
+                            onFocus: onTimePickerInputFocus,
+                            onInput: _cache[1] || (_cache[1] = (val) => userInputTime.value = val),
+                            onChange: handleVisibleTimeChange
+                          }, null, 8, ["placeholder", "model-value", "disabled", "readonly"]),
+                          createVNode(unref(TimePickPanel), {
+                            visible: timePickerVisible.value,
+                            format: timeFormat.value,
+                            "parsed-value": innerDate.value,
+                            onPick: handleTimePick
+                          }, null, 8, ["visible", "format", "parsed-value"])
+                        ],
+                        2
+                      )), [
+                        [unref(ClickOutside), handleTimePickClose]
+                      ])
+                    ],
+                    2
+                  )) : createCommentVNode("v-if", true),
+                  withDirectives(createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass([
+                        unref(dpNs).e("header"),
+                        (currentView.value === "year" || currentView.value === "month") && unref(dpNs).em("header", "bordered")
+                      ])
+                    },
+                    [
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass(unref(dpNs).e("prev-btn"))
+                        },
+                        [
+                          createElementVNode("button", {
+                            type: "button",
+                            "aria-label": unref(t)(`el.datepicker.prevYear`),
+                            class: normalizeClass(["d-arrow-left", unref(ppNs).e("icon-btn")]),
+                            disabled: unref(dateDisabled),
+                            onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false))
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_2$3),
+                          withDirectives(createElementVNode("button", {
+                            type: "button",
+                            "aria-label": unref(t)(`el.datepicker.prevMonth`),
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
+                            disabled: unref(dateDisabled),
+                            onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false))
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-month", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_3$3), [
+                            [vShow, currentView.value === "date"]
+                          ])
+                        ],
+                        2
+                      ),
+                      createElementVNode("span", {
+                        role: "button",
+                        class: normalizeClass(unref(dpNs).e("header-label")),
+                        "aria-live": "polite",
+                        tabindex: _ctx.disabled ? void 0 : 0,
+                        "aria-disabled": _ctx.disabled,
+                        onKeydown: _cache[4] || (_cache[4] = withKeys(($event) => showPicker("year"), ["enter"])),
+                        onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year"))
+                      }, toDisplayString(yearLabel.value), 43, _hoisted_4$3),
+                      withDirectives(createElementVNode("span", {
+                        role: "button",
+                        "aria-live": "polite",
+                        tabindex: _ctx.disabled ? void 0 : 0,
+                        "aria-disabled": _ctx.disabled,
+                        class: normalizeClass([
+                          unref(dpNs).e("header-label"),
+                          { active: currentView.value === "month" }
+                        ]),
+                        onKeydown: _cache[6] || (_cache[6] = withKeys(($event) => showPicker("month"), ["enter"])),
+                        onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month"))
+                      }, toDisplayString(unref(t)(`el.datepicker.month${month.value + 1}`)), 43, _hoisted_5$3), [
+                        [vShow, currentView.value === "date"]
                       ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["aria-label", "disabled", "onClick"]), [
-                  [vShow, currentView.value === "date"]
-                ])
-              ], 2),
-              createElementVNode("span", {
-                role: "button",
-                class: normalizeClass(unref(dpNs).e("header-label")),
-                "aria-live": "polite",
-                tabindex: _ctx.disabled ? void 0 : 0,
-                "aria-disabled": _ctx.disabled,
-                onKeydown: withKeys(($event) => showPicker("year"), ["enter"]),
-                onClick: ($event) => showPicker("year")
-              }, toDisplayString(unref(yearLabel)), 43, ["tabindex", "aria-disabled", "onKeydown", "onClick"]),
-              withDirectives(createElementVNode("span", {
-                role: "button",
-                "aria-live": "polite",
-                tabindex: _ctx.disabled ? void 0 : 0,
-                "aria-disabled": _ctx.disabled,
-                class: normalizeClass([
-                  unref(dpNs).e("header-label"),
-                  { active: currentView.value === "month" }
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass(unref(dpNs).e("next-btn"))
+                        },
+                        [
+                          withDirectives(createElementVNode("button", {
+                            type: "button",
+                            "aria-label": unref(t)(`el.datepicker.nextMonth`),
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
+                            disabled: unref(dateDisabled),
+                            onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true))
+                          }, [
+                            renderSlot(_ctx.$slots, "next-month", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_6$1), [
+                            [vShow, currentView.value === "date"]
+                          ]),
+                          createElementVNode("button", {
+                            type: "button",
+                            "aria-label": unref(t)(`el.datepicker.nextYear`),
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
+                            disabled: unref(dateDisabled),
+                            onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true))
+                          }, [
+                            renderSlot(_ctx.$slots, "next-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_7$1)
+                        ],
+                        2
+                      )
+                    ],
+                    2
+                  ), [
+                    [vShow, currentView.value !== "time"]
+                  ]),
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass(unref(ppNs).e("content")),
+                      onKeydown: handleKeydownTable
+                    },
+                    [
+                      currentView.value === "date" ? (openBlock(), createBlock(DateTable, {
+                        key: 0,
+                        ref_key: "currentViewRef",
+                        ref: currentViewRef,
+                        "selection-mode": selectionMode.value,
+                        date: innerDate.value,
+                        "parsed-value": _ctx.parsedValue,
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(dateDisabled),
+                        "cell-class-name": unref(cellClassName),
+                        "show-week-number": _ctx.showWeekNumber,
+                        onPick: handleDatePick
+                      }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name", "show-week-number"])) : createCommentVNode("v-if", true),
+                      currentView.value === "year" ? (openBlock(), createBlock(YearTable, {
+                        key: 1,
+                        ref_key: "currentViewRef",
+                        ref: currentViewRef,
+                        "selection-mode": selectionMode.value,
+                        date: innerDate.value,
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(dateDisabled),
+                        "parsed-value": _ctx.parsedValue,
+                        "cell-class-name": unref(cellClassName),
+                        onPick: handleYearPick
+                      }, null, 8, ["selection-mode", "date", "disabled-date", "disabled", "parsed-value", "cell-class-name"])) : createCommentVNode("v-if", true),
+                      currentView.value === "month" ? (openBlock(), createBlock(MonthTable, {
+                        key: 2,
+                        ref_key: "currentViewRef",
+                        ref: currentViewRef,
+                        "selection-mode": selectionMode.value,
+                        date: innerDate.value,
+                        "parsed-value": _ctx.parsedValue,
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(dateDisabled),
+                        "cell-class-name": unref(cellClassName),
+                        onPick: handleMonthPick
+                      }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name"])) : createCommentVNode("v-if", true)
+                    ],
+                    34
+                  )
+                ],
+                2
+              )
+            ],
+            2
+          ),
+          _ctx.showFooter && footerVisible.value && footerFilled.value ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass(unref(ppNs).e("footer"))
+            },
+            [
+              withDirectives(createVNode(unref(ElButton), {
+                text: "",
+                size: "small",
+                class: normalizeClass(unref(ppNs).e("link-btn")),
+                disabled: disabledNow.value,
+                onClick: changeToNow
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString(unref(t)("el.datepicker.now")),
+                    1
+                  )
                 ]),
-                onKeydown: withKeys(($event) => showPicker("month"), ["enter"]),
-                onClick: ($event) => showPicker("month")
-              }, toDisplayString(unref(t)(`el.datepicker.month${unref(month) + 1}`)), 43, ["tabindex", "aria-disabled", "onKeydown", "onClick"]), [
-                [vShow, currentView.value === "date"]
+                _: 1
+              }, 8, ["class", "disabled"]), [
+                [vShow, !isMultipleType.value && _ctx.showNow]
               ]),
-              createElementVNode("span", {
-                class: normalizeClass(unref(dpNs).e("next-btn"))
-              }, [
-                withDirectives(createElementVNode("button", {
-                  type: "button",
-                  "aria-label": unref(t)(`el.datepicker.nextMonth`),
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
-                  disabled: unref(dateDisabled),
-                  onClick: ($event) => moveByMonth(true)
-                }, [
-                  renderSlot(_ctx.$slots, "next-month", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(ArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["aria-label", "disabled", "onClick"]), [
-                  [vShow, currentView.value === "date"]
-                ]),
-                createElementVNode("button", {
-                  type: "button",
-                  "aria-label": unref(t)(`el.datepicker.nextYear`),
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
-                  disabled: unref(dateDisabled),
-                  onClick: ($event) => moveByYear(true)
-                }, [
-                  renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["aria-label", "disabled", "onClick"])
-              ], 2)
-            ], 2), [
-              [vShow, currentView.value !== "time"]
-            ]),
-            createElementVNode("div", {
-              class: normalizeClass(unref(ppNs).e("content")),
-              onKeydown: handleKeydownTable
-            }, [
-              currentView.value === "date" ? (openBlock(), createBlock(DateTable, {
+              _ctx.showConfirm ? (openBlock(), createBlock(unref(ElButton), {
                 key: 0,
-                ref_key: "currentViewRef",
-                ref: currentViewRef,
-                "selection-mode": unref(selectionMode),
-                date: innerDate.value,
-                "parsed-value": _ctx.parsedValue,
-                "disabled-date": unref(disabledDate),
-                disabled: unref(dateDisabled),
-                "cell-class-name": unref(cellClassName),
-                "show-week-number": _ctx.showWeekNumber,
-                onPick: handleDatePick
-              }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name", "show-week-number"])) : createCommentVNode("v-if", true),
-              currentView.value === "year" ? (openBlock(), createBlock(YearTable, {
-                key: 1,
-                ref_key: "currentViewRef",
-                ref: currentViewRef,
-                "selection-mode": unref(selectionMode),
-                date: innerDate.value,
-                "disabled-date": unref(disabledDate),
-                disabled: unref(dateDisabled),
-                "parsed-value": _ctx.parsedValue,
-                "cell-class-name": unref(cellClassName),
-                onPick: handleYearPick
-              }, null, 8, ["selection-mode", "date", "disabled-date", "disabled", "parsed-value", "cell-class-name"])) : createCommentVNode("v-if", true),
-              currentView.value === "month" ? (openBlock(), createBlock(MonthTable, {
-                key: 2,
-                ref_key: "currentViewRef",
-                ref: currentViewRef,
-                "selection-mode": unref(selectionMode),
-                date: innerDate.value,
-                "parsed-value": _ctx.parsedValue,
-                "disabled-date": unref(disabledDate),
-                disabled: unref(dateDisabled),
-                "cell-class-name": unref(cellClassName),
-                onPick: handleMonthPick
-              }, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "disabled", "cell-class-name"])) : createCommentVNode("v-if", true)
-            ], 34)
-          ], 2)
-        ], 2),
-        _ctx.showFooter && unref(footerVisible) && unref(footerFilled) ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(unref(ppNs).e("footer"))
-        }, [
-          withDirectives(createVNode(unref(ElButton), {
-            text: "",
-            size: "small",
-            class: normalizeClass(unref(ppNs).e("link-btn")),
-            disabled: unref(disabledNow),
-            onClick: changeToNow
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("el.datepicker.now")), 1)
-            ]),
-            _: 1
-          }, 8, ["class", "disabled"]), [
-            [vShow, !unref(isMultipleType) && _ctx.showNow]
-          ]),
-          _ctx.showConfirm ? (openBlock(), createBlock(unref(ElButton), {
-            key: 0,
-            plain: "",
-            size: "small",
-            class: normalizeClass(unref(ppNs).e("link-btn")),
-            disabled: unref(disabledConfirm),
-            onClick: onConfirm
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
-            ]),
-            _: 1
-          }, 8, ["class", "disabled"])) : createCommentVNode("v-if", true)
-        ], 2)) : createCommentVNode("v-if", true)
-      ], 2);
+                plain: "",
+                size: "small",
+                class: normalizeClass(unref(ppNs).e("link-btn")),
+                disabled: disabledConfirm.value,
+                onClick: onConfirm
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString(unref(t)("el.datepicker.confirm")),
+                    1
+                  )
+                ]),
+                _: 1
+              }, 8, ["class", "disabled"])) : createCommentVNode("v-if", true)
+            ],
+            2
+          )) : createCommentVNode("v-if", true)
+        ],
+        2
+      );
     };
   }
 });
-var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "panel-date-pick.vue"]]);
+var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue"]]);
 
 const panelDateRangeProps = buildProps({
   ...panelSharedProps,
@@ -3776,23 +4210,35 @@ const useRangePicker = (props, {
     leftDate.value = start;
     rightDate.value = end;
   };
-  watch(defaultValue, (val) => {
-    if (val) {
-      restoreDefault();
-    }
-  }, { immediate: true });
-  watch(() => props.parsedValue, (parsedValue) => {
-    if (!(parsedValue == null ? void 0 : parsedValue.length) || !isEqual(parsedValue, [minDate.value, maxDate.value])) {
-      parseValue(parsedValue);
-    }
-  }, {
-    immediate: true
-  });
-  watch(() => props.visible, () => {
-    if (props.visible) {
-      parseValue(props.parsedValue);
+  watch(
+    defaultValue,
+    (val) => {
+      if (val) {
+        restoreDefault();
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.parsedValue,
+    (parsedValue) => {
+      if (!(parsedValue == null ? void 0 : parsedValue.length) || !isEqual(parsedValue, [minDate.value, maxDate.value])) {
+        parseValue(parsedValue);
+      }
+    },
+    {
+      immediate: true
     }
-  }, { immediate: true });
+  );
+  watch(
+    () => props.visible,
+    () => {
+      if (props.visible) {
+        parseValue(props.parsedValue);
+      }
+    },
+    { immediate: true }
+  );
   return {
     minDate,
     maxDate,
@@ -3862,7 +4308,13 @@ const usePanelDateRange = (props, emit, leftDate, rightDate) => {
       startDate.value = getValidDateOfYear(data, lang.value, disabledDate);
     }
     if (mode === "month") {
-      startDate.value = getValidDateOfMonth(startDate.value, startDate.value.year(), value, lang.value, disabledDate);
+      startDate.value = getValidDateOfMonth(
+        startDate.value,
+        startDate.value.year(),
+        value,
+        lang.value,
+        disabledDate
+      );
     }
     if (!props.unlinkPanels) {
       endDate.value = pickerType === "left" ? startDate.value.add(1, "month") : startDate.value.subtract(1, "month");
@@ -3873,7 +4325,11 @@ const usePanelDateRange = (props, emit, leftDate, rightDate) => {
     handlePanelChange(mode);
   }
   function handlePanelChange(mode) {
-    emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
+    emit(
+      "panel-change",
+      [leftDate.value.toDate(), rightDate.value.toDate()],
+      mode
+    );
   }
   function adjustDateByView(currentView, date, forward) {
     const action = forward ? "add" : "subtract";
@@ -3889,7 +4345,9 @@ const usePanelDateRange = (props, emit, leftDate, rightDate) => {
     leftMonth,
     rightMonth,
     leftYearLabel: computed(() => computedYearLabel(leftCurrentView, leftYear)),
-    rightYearLabel: computed(() => computedYearLabel(rightCurrentView, rightYear)),
+    rightYearLabel: computed(
+      () => computedYearLabel(rightCurrentView, rightYear)
+    ),
     showLeftPicker: (view) => showPicker("left", view),
     showRightPicker: (view) => showPicker("right", view),
     handleLeftYearPick: (year) => handlePick("year", "left", year),
@@ -3901,20 +4359,38 @@ const usePanelDateRange = (props, emit, leftDate, rightDate) => {
   };
 };
 
+const _hoisted_1$2 = ["disabled", "onClick"];
+const _hoisted_2$2 = ["aria-label", "disabled"];
+const _hoisted_3$2 = ["aria-label", "disabled"];
+const _hoisted_4$2 = ["disabled", "aria-label"];
+const _hoisted_5$2 = ["disabled", "aria-label"];
+const _hoisted_6 = ["tabindex", "aria-disabled"];
+const _hoisted_7 = ["tabindex", "aria-disabled"];
+const _hoisted_8 = ["disabled", "aria-label"];
+const _hoisted_9 = ["disabled", "aria-label"];
+const _hoisted_10 = ["aria-label", "disabled"];
+const _hoisted_11 = ["disabled", "aria-label"];
+const _hoisted_12 = ["tabindex", "aria-disabled"];
+const _hoisted_13 = ["tabindex", "aria-disabled"];
 const unit$2 = "month";
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = defineComponent({
   __name: "panel-date-range",
   props: panelDateRangeProps,
   emits: [
     "pick",
     "set-picker-option",
     "calendar-change",
-    "panel-change"
+    "panel-change",
+    "clear"
   ],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
-    const isDefaultFormat = inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, void 0);
+    const isDefaultFormat = inject(
+      ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,
+      void 0
+    );
     const { disabledDate, cellClassName, defaultTime, clearable } = pickerBase.props;
     const format = toRef(pickerBase.props, "format");
     const shortcuts = toRef(pickerBase.props, "shortcuts");
@@ -3942,12 +4418,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       unit: unit$2,
       sortDates
     });
-    watch(() => props.visible, (visible) => {
-      if (!visible && rangeState.value.selecting) {
-        parseValue(props.parsedValue);
-        onSelect(false);
+    watch(
+      () => props.visible,
+      (visible) => {
+        if (!visible && rangeState.value.selecting) {
+          parseValue(props.parsedValue);
+          onSelect(false);
+        }
       }
-    });
+    );
     const dateUserInput = ref({
       min: null,
       max: null
@@ -4015,7 +4494,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
     };
     const leftPrevYear = () => {
-      leftDate.value = adjustDateByView(leftCurrentView.value, leftDate.value, false);
+      leftDate.value = adjustDateByView(
+        leftCurrentView.value,
+        leftDate.value,
+        false
+      );
       if (!props.unlinkPanels) {
         rightDate.value = leftDate.value.add(1, "month");
       }
@@ -4030,10 +4513,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     const rightNextYear = () => {
       if (!props.unlinkPanels) {
-        leftDate.value = adjustDateByView(rightCurrentView.value, leftDate.value, true);
+        leftDate.value = adjustDateByView(
+          rightCurrentView.value,
+          leftDate.value,
+          true
+        );
         rightDate.value = leftDate.value.add(1, "month");
       } else {
-        rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, true);
+        rightDate.value = adjustDateByView(
+          rightCurrentView.value,
+          rightDate.value,
+          true
+        );
       }
       handlePanelChange("year");
     };
@@ -4055,7 +4546,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       handlePanelChange("month");
     };
     const rightPrevYear = () => {
-      rightDate.value = adjustDateByView(rightCurrentView.value, rightDate.value, false);
+      rightDate.value = adjustDateByView(
+        rightCurrentView.value,
+        rightDate.value,
+        false
+      );
       handlePanelChange("year");
     };
     const rightPrevMonth = () => {
@@ -4074,12 +4569,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const btnDisabled = computed(() => {
       return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value]) && !dateRangeDisabled.value);
     });
-    const showTime = computed(() => props.type === "datetime" || props.type === "datetimerange");
+    const showTime = computed(
+      () => props.type === "datetime" || props.type === "datetimerange"
+    );
     const formatEmit = (emitDayjs, index) => {
       if (!emitDayjs)
         return;
       if (defaultTime) {
-        const defaultTimeD = dayjs(defaultTime[index] || defaultTime).locale(lang.value);
+        const defaultTimeD = dayjs(
+          defaultTime[index] || defaultTime
+        ).locale(lang.value);
         return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
       }
       return emitDayjs;
@@ -4173,7 +4672,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       if (timeUserInput.value.min)
         return;
       if (value) {
-        leftDate.value = value;
         minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
       }
       if (!first) {
@@ -4192,7 +4690,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       if (timeUserInput.value.max)
         return;
       if (value) {
-        rightDate.value = value;
         maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
       }
       if (!first) {
@@ -4203,6 +4700,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
       handleRangeConfirm(true);
     };
+    const onClear = () => {
+      handleClear();
+      emit("clear");
+    };
     const handleClear = () => {
       let valueOnClear = null;
       if (pickerBase == null ? void 0 : pickerBase.emptyValues) {
@@ -4220,7 +4721,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       emit("pick", valueOnClear);
     };
     const parseUserInput = (value) => {
-      return correctlyParseUserInput(value, format.value || "", lang.value, isDefaultFormat);
+      return correctlyParseUserInput(
+        value,
+        format.value || "",
+        lang.value,
+        isDefaultFormat
+      );
     };
     function sortDates(minDate2, maxDate2) {
       if (props.unlinkPanels && maxDate2) {
@@ -4240,466 +4746,556 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     emit("set-picker-option", ["parseUserInput", parseUserInput]);
     emit("set-picker-option", ["handleClear", handleClear]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          unref(ppNs).b(),
-          unref(drpNs).b(),
-          unref(ppNs).is("border", _ctx.border),
-          unref(ppNs).is("disabled", unref(dateRangeDisabled)),
-          {
-            "has-sidebar": _ctx.$slots.sidebar || unref(hasShortcuts),
-            "has-time": unref(showTime)
-          }
-        ])
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(ppNs).e("body-wrapper"))
-        }, [
-          renderSlot(_ctx.$slots, "sidebar", {
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }),
-          unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
-              return openBlock(), createElementBlock("button", {
-                key,
-                type: "button",
-                disabled: unref(dateRangeDisabled),
-                class: normalizeClass(unref(ppNs).e("shortcut")),
-                onClick: ($event) => unref(handleShortcutClick)(shortcut)
-              }, toDisplayString(shortcut.text), 11, ["disabled", "onClick"]);
-            }), 128))
-          ], 2)) : createCommentVNode("v-if", true),
-          createElementVNode("div", {
-            class: normalizeClass(unref(ppNs).e("body"))
-          }, [
-            unref(showTime) ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(unref(drpNs).e("time-header"))
-            }, [
-              createElementVNode("span", {
-                class: normalizeClass(unref(drpNs).e("editors-wrap"))
-              }, [
-                createElementVNode("span", {
-                  class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
-                }, [
-                  createVNode(unref(ElInput), {
-                    size: "small",
-                    disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
-                    placeholder: unref(t)("el.datepicker.startDate"),
-                    class: normalizeClass(unref(drpNs).e("editor")),
-                    "model-value": unref(minVisibleDate),
-                    "validate-event": false,
-                    onInput: (val) => handleDateInput(val, "min"),
-                    onChange: (val) => handleDateChange(val, "min")
-                  }, null, 8, ["disabled", "placeholder", "class", "model-value", "onInput", "onChange"])
-                ], 2),
-                withDirectives((openBlock(), createElementBlock("span", {
-                  class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
-                }, [
-                  createVNode(unref(ElInput), {
-                    size: "small",
-                    class: normalizeClass(unref(drpNs).e("editor")),
-                    disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
-                    placeholder: unref(t)("el.datepicker.startTime"),
-                    "model-value": unref(minVisibleTime),
-                    "validate-event": false,
-                    onFocus: ($event) => minTimePickerVisible.value = true,
-                    onInput: (val) => handleTimeInput(val, "min"),
-                    onChange: (val) => handleTimeChange(val, "min")
-                  }, null, 8, ["class", "disabled", "placeholder", "model-value", "onFocus", "onInput", "onChange"]),
-                  createVNode(unref(TimePickPanel), {
-                    visible: minTimePickerVisible.value,
-                    format: unref(timeFormat),
-                    "datetime-role": "start",
-                    "parsed-value": leftDate.value,
-                    onPick: handleMinTimePick
-                  }, null, 8, ["visible", "format", "parsed-value"])
-                ], 2)), [
-                  [unref(ClickOutside), handleMinTimeClose]
-                ])
-              ], 2),
-              createElementVNode("span", null, [
-                createVNode(unref(ElIcon), null, {
-                  default: withCtx(() => [
-                    createVNode(unref(ArrowRight))
-                  ]),
-                  _: 1
-                })
-              ]),
-              createElementVNode("span", {
-                class: normalizeClass([unref(drpNs).e("editors-wrap"), "is-right"])
-              }, [
-                createElementVNode("span", {
-                  class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
-                }, [
-                  createVNode(unref(ElInput), {
-                    size: "small",
-                    class: normalizeClass(unref(drpNs).e("editor")),
-                    disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
-                    placeholder: unref(t)("el.datepicker.endDate"),
-                    "model-value": unref(maxVisibleDate),
-                    readonly: !unref(minDate),
-                    "validate-event": false,
-                    onInput: (val) => handleDateInput(val, "max"),
-                    onChange: (val) => handleDateChange(val, "max")
-                  }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly", "onInput", "onChange"])
-                ], 2),
-                withDirectives((openBlock(), createElementBlock("span", {
-                  class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
-                }, [
-                  createVNode(unref(ElInput), {
-                    size: "small",
-                    class: normalizeClass(unref(drpNs).e("editor")),
-                    disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
-                    placeholder: unref(t)("el.datepicker.endTime"),
-                    "model-value": unref(maxVisibleTime),
-                    readonly: !unref(minDate),
-                    "validate-event": false,
-                    onFocus: ($event) => unref(minDate) && (maxTimePickerVisible.value = true),
-                    onInput: (val) => handleTimeInput(val, "max"),
-                    onChange: (val) => handleTimeChange(val, "max")
-                  }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly", "onFocus", "onInput", "onChange"]),
-                  createVNode(unref(TimePickPanel), {
-                    "datetime-role": "end",
-                    visible: maxTimePickerVisible.value,
-                    format: unref(timeFormat),
-                    "parsed-value": rightDate.value,
-                    onPick: handleMaxTimePick
-                  }, null, 8, ["visible", "format", "parsed-value"])
-                ], 2)), [
-                  [unref(ClickOutside), handleMaxTimeClose]
-                ])
-              ], 2)
-            ], 2)) : createCommentVNode("v-if", true),
-            createElementVNode("div", {
-              class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
-            }, [
-              createElementVNode("div", {
-                class: normalizeClass(unref(drpNs).e("header"))
-              }, [
-                createElementVNode("button", {
-                  type: "button",
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
-                  "aria-label": unref(t)(`el.datepicker.prevYear`),
-                  disabled: unref(dateRangeDisabled),
-                  onClick: leftPrevYear
-                }, [
-                  renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["aria-label", "disabled"]),
-                withDirectives(createElementVNode("button", {
-                  type: "button",
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
-                  "aria-label": unref(t)(`el.datepicker.prevMonth`),
-                  disabled: unref(dateRangeDisabled),
-                  onClick: leftPrevMonth
-                }, [
-                  renderSlot(_ctx.$slots, "prev-month", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(ArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["aria-label", "disabled"]), [
-                  [vShow, unref(leftCurrentView) === "date"]
-                ]),
-                _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([
+            unref(ppNs).b(),
+            unref(drpNs).b(),
+            unref(ppNs).is("border", _ctx.border),
+            unref(ppNs).is("disabled", unref(dateRangeDisabled)),
+            {
+              "has-sidebar": _ctx.$slots.sidebar || hasShortcuts.value,
+              "has-time": showTime.value
+            }
+          ])
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(ppNs).e("body-wrapper"))
+            },
+            [
+              renderSlot(_ctx.$slots, "sidebar", {
+                class: normalizeClass(unref(ppNs).e("sidebar"))
+              }),
+              hasShortcuts.value ? (openBlock(), createElementBlock(
+                "div",
+                {
                   key: 0,
-                  type: "button",
-                  disabled: !unref(enableYearArrow) || unref(dateRangeDisabled),
-                  class: normalizeClass([[
-                    unref(ppNs).e("icon-btn"),
-                    unref(ppNs).is("disabled", !unref(enableYearArrow) || unref(dateRangeDisabled))
-                  ], "d-arrow-right"]),
-                  "aria-label": unref(t)(`el.datepicker.nextYear`),
-                  onClick: leftNextYear
-                }, [
-                  renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowRight))
+                  class: normalizeClass(unref(ppNs).e("sidebar"))
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(shortcuts.value, (shortcut, key) => {
+                      return openBlock(), createElementBlock("button", {
+                        key,
+                        type: "button",
+                        disabled: unref(dateRangeDisabled),
+                        class: normalizeClass(unref(ppNs).e("shortcut")),
+                        onClick: ($event) => unref(handleShortcutClick)(shortcut)
+                      }, toDisplayString(shortcut.text), 11, _hoisted_1$2);
+                    }),
+                    128
+                  ))
+                ],
+                2
+              )) : createCommentVNode("v-if", true),
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(unref(ppNs).e("body"))
+                },
+                [
+                  showTime.value ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: normalizeClass(unref(drpNs).e("time-header"))
+                    },
+                    [
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass(unref(drpNs).e("editors-wrap"))
+                        },
+                        [
+                          createElementVNode(
+                            "span",
+                            {
+                              class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
+                            },
+                            [
+                              createVNode(unref(ElInput), {
+                                size: "small",
+                                disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
+                                placeholder: unref(t)("el.datepicker.startDate"),
+                                class: normalizeClass(unref(drpNs).e("editor")),
+                                "model-value": minVisibleDate.value,
+                                "validate-event": false,
+                                readonly: !_ctx.editable,
+                                onInput: _cache[0] || (_cache[0] = (val) => handleDateInput(val, "min")),
+                                onChange: _cache[1] || (_cache[1] = (val) => handleDateChange(val, "min"))
+                              }, null, 8, ["disabled", "placeholder", "class", "model-value", "readonly"])
+                            ],
+                            2
+                          ),
+                          withDirectives((openBlock(), createElementBlock(
+                            "span",
+                            {
+                              class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
+                            },
+                            [
+                              createVNode(unref(ElInput), {
+                                size: "small",
+                                class: normalizeClass(unref(drpNs).e("editor")),
+                                disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
+                                placeholder: unref(t)("el.datepicker.startTime"),
+                                "model-value": minVisibleTime.value,
+                                "validate-event": false,
+                                readonly: !_ctx.editable,
+                                onFocus: _cache[2] || (_cache[2] = ($event) => minTimePickerVisible.value = true),
+                                onInput: _cache[3] || (_cache[3] = (val) => handleTimeInput(val, "min")),
+                                onChange: _cache[4] || (_cache[4] = (val) => handleTimeChange(val, "min"))
+                              }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]),
+                              createVNode(unref(TimePickPanel), {
+                                visible: minTimePickerVisible.value,
+                                format: timeFormat.value,
+                                "datetime-role": "start",
+                                "parsed-value": unref(minDate) || leftDate.value,
+                                onPick: handleMinTimePick
+                              }, null, 8, ["visible", "format", "parsed-value"])
+                            ],
+                            2
+                          )), [
+                            [unref(ClickOutside), handleMinTimeClose]
+                          ])
+                        ],
+                        2
+                      ),
+                      createElementVNode("span", null, [
+                        createVNode(unref(ElIcon), null, {
+                          default: withCtx(() => [
+                            createVNode(unref(ArrowRight))
+                          ]),
+                          _: 1
+                        })
                       ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
-                _ctx.unlinkPanels && unref(leftCurrentView) === "date" ? (openBlock(), createElementBlock("button", {
-                  key: 1,
-                  type: "button",
-                  disabled: !unref(enableMonthArrow) || unref(dateRangeDisabled),
-                  class: normalizeClass([[
-                    unref(ppNs).e("icon-btn"),
-                    unref(ppNs).is("disabled", !unref(enableMonthArrow) || unref(dateRangeDisabled))
-                  ], "arrow-right"]),
-                  "aria-label": unref(t)(`el.datepicker.nextMonth`),
-                  onClick: leftNextMonth
-                }, [
-                  renderSlot(_ctx.$slots, "next-month", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(ArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
-                createElementVNode("div", null, [
-                  createElementVNode("span", {
-                    role: "button",
-                    class: normalizeClass(unref(drpNs).e("header-label")),
-                    "aria-live": "polite",
-                    tabindex: _ctx.disabled ? void 0 : 0,
-                    "aria-disabled": _ctx.disabled,
-                    onKeydown: withKeys(($event) => unref(showLeftPicker)("year"), ["enter"]),
-                    onClick: ($event) => unref(showLeftPicker)("year")
-                  }, toDisplayString(unref(leftYearLabel)), 43, ["tabindex", "aria-disabled", "onKeydown", "onClick"]),
-                  withDirectives(createElementVNode("span", {
-                    role: "button",
-                    "aria-live": "polite",
-                    tabindex: _ctx.disabled ? void 0 : 0,
-                    "aria-disabled": _ctx.disabled,
-                    class: normalizeClass([
-                      unref(drpNs).e("header-label"),
-                      { active: unref(leftCurrentView) === "month" }
-                    ]),
-                    onKeydown: withKeys(($event) => unref(showLeftPicker)("month"), ["enter"]),
-                    onClick: ($event) => unref(showLeftPicker)("month")
-                  }, toDisplayString(unref(t)(`el.datepicker.month${leftDate.value.month() + 1}`)), 43, ["tabindex", "aria-disabled", "onKeydown", "onClick"]), [
-                    [vShow, unref(leftCurrentView) === "date"]
-                  ])
-                ])
-              ], 2),
-              unref(leftCurrentView) === "date" ? (openBlock(), createBlock(DateTable, {
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass([unref(drpNs).e("editors-wrap"), "is-right"])
+                        },
+                        [
+                          createElementVNode(
+                            "span",
+                            {
+                              class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
+                            },
+                            [
+                              createVNode(unref(ElInput), {
+                                size: "small",
+                                class: normalizeClass(unref(drpNs).e("editor")),
+                                disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
+                                placeholder: unref(t)("el.datepicker.endDate"),
+                                "model-value": maxVisibleDate.value,
+                                readonly: !unref(minDate) || !_ctx.editable,
+                                "validate-event": false,
+                                onInput: _cache[5] || (_cache[5] = (val) => handleDateInput(val, "max")),
+                                onChange: _cache[6] || (_cache[6] = (val) => handleDateChange(val, "max"))
+                              }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"])
+                            ],
+                            2
+                          ),
+                          withDirectives((openBlock(), createElementBlock(
+                            "span",
+                            {
+                              class: normalizeClass(unref(drpNs).e("time-picker-wrap"))
+                            },
+                            [
+                              createVNode(unref(ElInput), {
+                                size: "small",
+                                class: normalizeClass(unref(drpNs).e("editor")),
+                                disabled: unref(rangeState).selecting || unref(dateRangeDisabled),
+                                placeholder: unref(t)("el.datepicker.endTime"),
+                                "model-value": maxVisibleTime.value,
+                                readonly: !unref(minDate) || !_ctx.editable,
+                                "validate-event": false,
+                                onFocus: _cache[7] || (_cache[7] = ($event) => unref(minDate) && (maxTimePickerVisible.value = true)),
+                                onInput: _cache[8] || (_cache[8] = (val) => handleTimeInput(val, "max")),
+                                onChange: _cache[9] || (_cache[9] = (val) => handleTimeChange(val, "max"))
+                              }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]),
+                              createVNode(unref(TimePickPanel), {
+                                "datetime-role": "end",
+                                visible: maxTimePickerVisible.value,
+                                format: timeFormat.value,
+                                "parsed-value": unref(maxDate) || rightDate.value,
+                                onPick: handleMaxTimePick
+                              }, null, 8, ["visible", "format", "parsed-value"])
+                            ],
+                            2
+                          )), [
+                            [unref(ClickOutside), handleMaxTimeClose]
+                          ])
+                        ],
+                        2
+                      )
+                    ],
+                    2
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
+                    },
+                    [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(drpNs).e("header"))
+                        },
+                        [
+                          createElementVNode("button", {
+                            type: "button",
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
+                            "aria-label": unref(t)(`el.datepicker.prevYear`),
+                            disabled: unref(dateRangeDisabled),
+                            onClick: leftPrevYear
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_2$2),
+                          withDirectives(createElementVNode("button", {
+                            type: "button",
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
+                            "aria-label": unref(t)(`el.datepicker.prevMonth`),
+                            disabled: unref(dateRangeDisabled),
+                            onClick: leftPrevMonth
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-month", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_3$2), [
+                            [vShow, unref(leftCurrentView) === "date"]
+                          ]),
+                          _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            type: "button",
+                            disabled: !enableYearArrow.value || unref(dateRangeDisabled),
+                            class: normalizeClass([[
+                              unref(ppNs).e("icon-btn"),
+                              unref(ppNs).is("disabled", !enableYearArrow.value || unref(dateRangeDisabled))
+                            ], "d-arrow-right"]),
+                            "aria-label": unref(t)(`el.datepicker.nextYear`),
+                            onClick: leftNextYear
+                          }, [
+                            renderSlot(_ctx.$slots, "next-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_4$2)) : createCommentVNode("v-if", true),
+                          _ctx.unlinkPanels && unref(leftCurrentView) === "date" ? (openBlock(), createElementBlock("button", {
+                            key: 1,
+                            type: "button",
+                            disabled: !enableMonthArrow.value || unref(dateRangeDisabled),
+                            class: normalizeClass([[
+                              unref(ppNs).e("icon-btn"),
+                              unref(ppNs).is("disabled", !enableMonthArrow.value || unref(dateRangeDisabled))
+                            ], "arrow-right"]),
+                            "aria-label": unref(t)(`el.datepicker.nextMonth`),
+                            onClick: leftNextMonth
+                          }, [
+                            renderSlot(_ctx.$slots, "next-month", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_5$2)) : createCommentVNode("v-if", true),
+                          createElementVNode("div", null, [
+                            createElementVNode("span", {
+                              role: "button",
+                              class: normalizeClass(unref(drpNs).e("header-label")),
+                              "aria-live": "polite",
+                              tabindex: _ctx.disabled ? void 0 : 0,
+                              "aria-disabled": _ctx.disabled,
+                              onKeydown: _cache[10] || (_cache[10] = withKeys(($event) => unref(showLeftPicker)("year"), ["enter"])),
+                              onClick: _cache[11] || (_cache[11] = ($event) => unref(showLeftPicker)("year"))
+                            }, toDisplayString(unref(leftYearLabel)), 43, _hoisted_6),
+                            withDirectives(createElementVNode("span", {
+                              role: "button",
+                              "aria-live": "polite",
+                              tabindex: _ctx.disabled ? void 0 : 0,
+                              "aria-disabled": _ctx.disabled,
+                              class: normalizeClass([
+                                unref(drpNs).e("header-label"),
+                                { active: unref(leftCurrentView) === "month" }
+                              ]),
+                              onKeydown: _cache[12] || (_cache[12] = withKeys(($event) => unref(showLeftPicker)("month"), ["enter"])),
+                              onClick: _cache[13] || (_cache[13] = ($event) => unref(showLeftPicker)("month"))
+                            }, toDisplayString(unref(t)(`el.datepicker.month${leftDate.value.month() + 1}`)), 43, _hoisted_7), [
+                              [vShow, unref(leftCurrentView) === "date"]
+                            ])
+                          ])
+                        ],
+                        2
+                      ),
+                      unref(leftCurrentView) === "date" ? (openBlock(), createBlock(DateTable, {
+                        key: 0,
+                        ref_key: "leftCurrentViewRef",
+                        ref: leftCurrentViewRef,
+                        "selection-mode": "range",
+                        date: leftDate.value,
+                        "min-date": unref(minDate),
+                        "max-date": unref(maxDate),
+                        "range-state": unref(rangeState),
+                        "disabled-date": unref(disabledDate),
+                        "cell-class-name": unref(cellClassName),
+                        "show-week-number": _ctx.showWeekNumber,
+                        disabled: unref(dateRangeDisabled),
+                        onChangerange: unref(handleChangeRange),
+                        onPick: handleRangePick,
+                        onSelect: unref(onSelect)
+                      }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "show-week-number", "disabled", "onChangerange", "onSelect"])) : createCommentVNode("v-if", true),
+                      unref(leftCurrentView) === "year" ? (openBlock(), createBlock(YearTable, {
+                        key: 1,
+                        ref_key: "leftCurrentViewRef",
+                        ref: leftCurrentViewRef,
+                        "selection-mode": "year",
+                        date: leftDate.value,
+                        "disabled-date": unref(disabledDate),
+                        "parsed-value": _ctx.parsedValue,
+                        disabled: unref(dateRangeDisabled),
+                        onPick: unref(handleLeftYearPick)
+                      }, null, 8, ["date", "disabled-date", "parsed-value", "disabled", "onPick"])) : createCommentVNode("v-if", true),
+                      unref(leftCurrentView) === "month" ? (openBlock(), createBlock(MonthTable, {
+                        key: 2,
+                        ref_key: "leftCurrentViewRef",
+                        ref: leftCurrentViewRef,
+                        "selection-mode": "month",
+                        date: leftDate.value,
+                        "parsed-value": _ctx.parsedValue,
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(dateRangeDisabled),
+                        onPick: unref(handleLeftMonthPick)
+                      }, null, 8, ["date", "parsed-value", "disabled-date", "disabled", "onPick"])) : createCommentVNode("v-if", true)
+                    ],
+                    2
+                  ),
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
+                    },
+                    [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(drpNs).e("header"))
+                        },
+                        [
+                          _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            type: "button",
+                            disabled: !enableYearArrow.value || unref(dateRangeDisabled),
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
+                            "aria-label": unref(t)(`el.datepicker.prevYear`),
+                            onClick: rightPrevYear
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_8)) : createCommentVNode("v-if", true),
+                          _ctx.unlinkPanels && unref(rightCurrentView) === "date" ? (openBlock(), createElementBlock("button", {
+                            key: 1,
+                            type: "button",
+                            disabled: !enableMonthArrow.value || unref(dateRangeDisabled),
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
+                            "aria-label": unref(t)(`el.datepicker.prevMonth`),
+                            onClick: rightPrevMonth
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-month", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_9)) : createCommentVNode("v-if", true),
+                          createElementVNode("button", {
+                            type: "button",
+                            "aria-label": unref(t)(`el.datepicker.nextYear`),
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
+                            disabled: unref(dateRangeDisabled),
+                            onClick: rightNextYear
+                          }, [
+                            renderSlot(_ctx.$slots, "next-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_10),
+                          withDirectives(createElementVNode("button", {
+                            type: "button",
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
+                            disabled: unref(dateRangeDisabled),
+                            "aria-label": unref(t)(`el.datepicker.nextMonth`),
+                            onClick: rightNextMonth
+                          }, [
+                            renderSlot(_ctx.$slots, "next-month", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_11), [
+                            [vShow, unref(rightCurrentView) === "date"]
+                          ]),
+                          createElementVNode("div", null, [
+                            createElementVNode("span", {
+                              role: "button",
+                              class: normalizeClass(unref(drpNs).e("header-label")),
+                              "aria-live": "polite",
+                              tabindex: _ctx.disabled ? void 0 : 0,
+                              "aria-disabled": _ctx.disabled,
+                              onKeydown: _cache[14] || (_cache[14] = withKeys(($event) => unref(showRightPicker)("year"), ["enter"])),
+                              onClick: _cache[15] || (_cache[15] = ($event) => unref(showRightPicker)("year"))
+                            }, toDisplayString(unref(rightYearLabel)), 43, _hoisted_12),
+                            withDirectives(createElementVNode("span", {
+                              role: "button",
+                              "aria-live": "polite",
+                              tabindex: _ctx.disabled ? void 0 : 0,
+                              "aria-disabled": _ctx.disabled,
+                              class: normalizeClass([
+                                unref(drpNs).e("header-label"),
+                                { active: unref(rightCurrentView) === "month" }
+                              ]),
+                              onKeydown: _cache[16] || (_cache[16] = withKeys(($event) => unref(showRightPicker)("month"), ["enter"])),
+                              onClick: _cache[17] || (_cache[17] = ($event) => unref(showRightPicker)("month"))
+                            }, toDisplayString(unref(t)(`el.datepicker.month${rightDate.value.month() + 1}`)), 43, _hoisted_13), [
+                              [vShow, unref(rightCurrentView) === "date"]
+                            ])
+                          ])
+                        ],
+                        2
+                      ),
+                      unref(rightCurrentView) === "date" ? (openBlock(), createBlock(DateTable, {
+                        key: 0,
+                        ref_key: "rightCurrentViewRef",
+                        ref: rightCurrentViewRef,
+                        "selection-mode": "range",
+                        date: rightDate.value,
+                        "min-date": unref(minDate),
+                        "max-date": unref(maxDate),
+                        "range-state": unref(rangeState),
+                        "disabled-date": unref(disabledDate),
+                        "cell-class-name": unref(cellClassName),
+                        "show-week-number": _ctx.showWeekNumber,
+                        disabled: unref(dateRangeDisabled),
+                        onChangerange: unref(handleChangeRange),
+                        onPick: handleRangePick,
+                        onSelect: unref(onSelect)
+                      }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "show-week-number", "disabled", "onChangerange", "onSelect"])) : createCommentVNode("v-if", true),
+                      unref(rightCurrentView) === "year" ? (openBlock(), createBlock(YearTable, {
+                        key: 1,
+                        ref_key: "rightCurrentViewRef",
+                        ref: rightCurrentViewRef,
+                        "selection-mode": "year",
+                        date: rightDate.value,
+                        "disabled-date": unref(disabledDate),
+                        "parsed-value": _ctx.parsedValue,
+                        disabled: unref(dateRangeDisabled),
+                        onPick: unref(handleRightYearPick)
+                      }, null, 8, ["date", "disabled-date", "parsed-value", "disabled", "onPick"])) : createCommentVNode("v-if", true),
+                      unref(rightCurrentView) === "month" ? (openBlock(), createBlock(MonthTable, {
+                        key: 2,
+                        ref_key: "rightCurrentViewRef",
+                        ref: rightCurrentViewRef,
+                        "selection-mode": "month",
+                        date: rightDate.value,
+                        "parsed-value": _ctx.parsedValue,
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(dateRangeDisabled),
+                        onPick: unref(handleRightMonthPick)
+                      }, null, 8, ["date", "parsed-value", "disabled-date", "disabled", "onPick"])) : createCommentVNode("v-if", true)
+                    ],
+                    2
+                  )
+                ],
+                2
+              )
+            ],
+            2
+          ),
+          _ctx.showFooter && showTime.value && (_ctx.showConfirm || unref(clearable)) ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass(unref(ppNs).e("footer"))
+            },
+            [
+              unref(clearable) ? (openBlock(), createBlock(unref(ElButton), {
                 key: 0,
-                ref_key: "leftCurrentViewRef",
-                ref: leftCurrentViewRef,
-                "selection-mode": "range",
-                date: leftDate.value,
-                "min-date": unref(minDate),
-                "max-date": unref(maxDate),
-                "range-state": unref(rangeState),
-                "disabled-date": unref(disabledDate),
-                "cell-class-name": unref(cellClassName),
-                "show-week-number": _ctx.showWeekNumber,
-                disabled: unref(dateRangeDisabled),
-                onChangerange: unref(handleChangeRange),
-                onPick: handleRangePick,
-                onSelect: unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "show-week-number", "disabled", "onChangerange", "onSelect"])) : createCommentVNode("v-if", true),
-              unref(leftCurrentView) === "year" ? (openBlock(), createBlock(YearTable, {
-                key: 1,
-                ref_key: "leftCurrentViewRef",
-                ref: leftCurrentViewRef,
-                "selection-mode": "year",
-                date: leftDate.value,
-                "disabled-date": unref(disabledDate),
-                "parsed-value": _ctx.parsedValue,
-                disabled: unref(dateRangeDisabled),
-                onPick: unref(handleLeftYearPick)
-              }, null, 8, ["date", "disabled-date", "parsed-value", "disabled", "onPick"])) : createCommentVNode("v-if", true),
-              unref(leftCurrentView) === "month" ? (openBlock(), createBlock(MonthTable, {
-                key: 2,
-                ref_key: "leftCurrentViewRef",
-                ref: leftCurrentViewRef,
-                "selection-mode": "month",
-                date: leftDate.value,
-                "parsed-value": _ctx.parsedValue,
-                "disabled-date": unref(disabledDate),
-                disabled: unref(dateRangeDisabled),
-                onPick: unref(handleLeftMonthPick)
-              }, null, 8, ["date", "parsed-value", "disabled-date", "disabled", "onPick"])) : createCommentVNode("v-if", true)
-            ], 2),
-            createElementVNode("div", {
-              class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
-            }, [
-              createElementVNode("div", {
-                class: normalizeClass([
-                  unref(drpNs).e("header"),
-                  unref(ppNs).is("disabled", !unref(enableYearArrow) || unref(dateRangeDisabled))
-                ])
-              }, [
-                _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
-                  key: 0,
-                  type: "button",
-                  disabled: !unref(enableYearArrow) || unref(dateRangeDisabled),
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
-                  "aria-label": unref(t)(`el.datepicker.prevYear`),
-                  onClick: rightPrevYear
-                }, [
-                  renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
-                _ctx.unlinkPanels && unref(rightCurrentView) === "date" ? (openBlock(), createElementBlock("button", {
-                  key: 1,
-                  type: "button",
-                  disabled: !unref(enableMonthArrow) || unref(dateRangeDisabled),
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-left"]),
-                  "aria-label": unref(t)(`el.datepicker.prevMonth`),
-                  onClick: rightPrevMonth
-                }, [
-                  renderSlot(_ctx.$slots, "prev-month", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(ArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "aria-label"])) : createCommentVNode("v-if", true),
-                createElementVNode("button", {
-                  type: "button",
-                  "aria-label": unref(t)(`el.datepicker.nextYear`),
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
-                  disabled: unref(dateRangeDisabled),
-                  onClick: rightNextYear
-                }, [
-                  renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["aria-label", "disabled"]),
-                withDirectives(createElementVNode("button", {
-                  type: "button",
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "arrow-right"]),
-                  disabled: unref(dateRangeDisabled),
-                  "aria-label": unref(t)(`el.datepicker.nextMonth`),
-                  onClick: rightNextMonth
-                }, [
-                  renderSlot(_ctx.$slots, "next-month", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(ArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "aria-label"]), [
-                  [vShow, unref(rightCurrentView) === "date"]
+                text: "",
+                size: "small",
+                class: normalizeClass(unref(ppNs).e("link-btn")),
+                onClick: onClear
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString(unref(t)("el.datepicker.clear")),
+                    1
+                  )
                 ]),
-                createElementVNode("div", null, [
-                  createElementVNode("span", {
-                    role: "button",
-                    class: normalizeClass(unref(drpNs).e("header-label")),
-                    "aria-live": "polite",
-                    tabindex: _ctx.disabled ? void 0 : 0,
-                    "aria-disabled": _ctx.disabled,
-                    onKeydown: withKeys(($event) => unref(showRightPicker)("year"), ["enter"]),
-                    onClick: ($event) => unref(showRightPicker)("year")
-                  }, toDisplayString(unref(rightYearLabel)), 43, ["tabindex", "aria-disabled", "onKeydown", "onClick"]),
-                  withDirectives(createElementVNode("span", {
-                    role: "button",
-                    "aria-live": "polite",
-                    tabindex: _ctx.disabled ? void 0 : 0,
-                    "aria-disabled": _ctx.disabled,
-                    class: normalizeClass([
-                      unref(drpNs).e("header-label"),
-                      { active: unref(rightCurrentView) === "month" }
-                    ]),
-                    onKeydown: withKeys(($event) => unref(showRightPicker)("month"), ["enter"]),
-                    onClick: ($event) => unref(showRightPicker)("month")
-                  }, toDisplayString(unref(t)(`el.datepicker.month${rightDate.value.month() + 1}`)), 43, ["tabindex", "aria-disabled", "onKeydown", "onClick"]), [
-                    [vShow, unref(rightCurrentView) === "date"]
-                  ])
-                ])
-              ], 2),
-              unref(rightCurrentView) === "date" ? (openBlock(), createBlock(DateTable, {
-                key: 0,
-                ref_key: "rightCurrentViewRef",
-                ref: rightCurrentViewRef,
-                "selection-mode": "range",
-                date: rightDate.value,
-                "min-date": unref(minDate),
-                "max-date": unref(maxDate),
-                "range-state": unref(rangeState),
-                "disabled-date": unref(disabledDate),
-                "cell-class-name": unref(cellClassName),
-                "show-week-number": _ctx.showWeekNumber,
-                disabled: unref(dateRangeDisabled),
-                onChangerange: unref(handleChangeRange),
-                onPick: handleRangePick,
-                onSelect: unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "show-week-number", "disabled", "onChangerange", "onSelect"])) : createCommentVNode("v-if", true),
-              unref(rightCurrentView) === "year" ? (openBlock(), createBlock(YearTable, {
+                _: 1
+              }, 8, ["class"])) : createCommentVNode("v-if", true),
+              _ctx.showConfirm ? (openBlock(), createBlock(unref(ElButton), {
                 key: 1,
-                ref_key: "rightCurrentViewRef",
-                ref: rightCurrentViewRef,
-                "selection-mode": "year",
-                date: rightDate.value,
-                "disabled-date": unref(disabledDate),
-                "parsed-value": _ctx.parsedValue,
-                disabled: unref(dateRangeDisabled),
-                onPick: unref(handleRightYearPick)
-              }, null, 8, ["date", "disabled-date", "parsed-value", "disabled", "onPick"])) : createCommentVNode("v-if", true),
-              unref(rightCurrentView) === "month" ? (openBlock(), createBlock(MonthTable, {
-                key: 2,
-                ref_key: "rightCurrentViewRef",
-                ref: rightCurrentViewRef,
-                "selection-mode": "month",
-                date: rightDate.value,
-                "parsed-value": _ctx.parsedValue,
-                "disabled-date": unref(disabledDate),
-                disabled: unref(dateRangeDisabled),
-                onPick: unref(handleRightMonthPick)
-              }, null, 8, ["date", "parsed-value", "disabled-date", "disabled", "onPick"])) : createCommentVNode("v-if", true)
-            ], 2)
-          ], 2)
-        ], 2),
-        _ctx.showFooter && unref(showTime) && (_ctx.showConfirm || unref(clearable)) ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(unref(ppNs).e("footer"))
-        }, [
-          unref(clearable) ? (openBlock(), createBlock(unref(ElButton), {
-            key: 0,
-            text: "",
-            size: "small",
-            class: normalizeClass(unref(ppNs).e("link-btn")),
-            onClick: handleClear
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("el.datepicker.clear")), 1)
-            ]),
-            _: 1
-          }, 8, ["class"])) : createCommentVNode("v-if", true),
-          _ctx.showConfirm ? (openBlock(), createBlock(unref(ElButton), {
-            key: 1,
-            plain: "",
-            size: "small",
-            class: normalizeClass(unref(ppNs).e("link-btn")),
-            disabled: unref(btnDisabled),
-            onClick: ($event) => unref(handleRangeConfirm)(false)
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("el.datepicker.confirm")), 1)
-            ]),
-            _: 1
-          }, 8, ["class", "disabled", "onClick"])) : createCommentVNode("v-if", true)
-        ], 2)) : createCommentVNode("v-if", true)
-      ], 2);
+                plain: "",
+                size: "small",
+                class: normalizeClass(unref(ppNs).e("link-btn")),
+                disabled: btnDisabled.value,
+                onClick: _cache[18] || (_cache[18] = ($event) => unref(handleRangeConfirm)(false))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(
+                    toDisplayString(unref(t)("el.datepicker.confirm")),
+                    1
+                  )
+                ]),
+                _: 1
+              }, 8, ["class", "disabled"])) : createCommentVNode("v-if", true)
+            ],
+            2
+          )) : createCommentVNode("v-if", true)
+        ],
+        2
+      );
     };
   }
 });
-var DateRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "panel-date-range.vue"]]);
+var DateRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue"]]);
 
 const panelMonthRangeProps = buildProps({
   ...panelRangeSharedProps
@@ -4758,19 +5354,28 @@ const useMonthRangeHeader = ({
   };
 };
 
+const _hoisted_1$1 = ["disabled", "onClick"];
+const _hoisted_2$1 = ["disabled"];
+const _hoisted_3$1 = ["disabled"];
+const _hoisted_4$1 = ["disabled"];
+const _hoisted_5$1 = ["disabled"];
 const unit$1 = "year";
-const __default__$1 = defineComponent({
-  name: "DatePickerMonthRange"
-});
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _sfc_main$2 = defineComponent({
+  ...{
+    name: "DatePickerMonthRange"
+  },
+  __name: "panel-month-range",
   props: panelMonthRangeProps,
   emits: panelMonthRangeEmits,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { lang } = useLocale();
     const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
-    const isDefaultFormat = inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, void 0);
+    const isDefaultFormat = inject(
+      ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,
+      void 0
+    );
     const { shortcuts, disabledDate, cellClassName } = pickerBase.props;
     const format = toRef(pickerBase.props, "format");
     const defaultValue = toRef(pickerBase.props, "defaultValue");
@@ -4839,7 +5444,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       emit("pick", valueOnClear);
     };
     const parseUserInput = (value) => {
-      return correctlyParseUserInput(value, format.value, lang.value, isDefaultFormat);
+      return correctlyParseUserInput(
+        value,
+        format.value,
+        lang.value,
+        isDefaultFormat
+      );
     };
     function sortDates(minDate2, maxDate2) {
       if (props.unlinkPanels && maxDate2) {
@@ -4851,169 +5461,227 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     }
     const monthRangeDisabled = useFormDisabled();
-    watch(() => props.visible, (visible) => {
-      if (!visible && rangeState.value.selecting) {
-        parseValue(props.parsedValue);
-        onSelect(false);
+    watch(
+      () => props.visible,
+      (visible) => {
+        if (!visible && rangeState.value.selecting) {
+          parseValue(props.parsedValue);
+          onSelect(false);
+        }
       }
-    });
+    );
     emit("set-picker-option", ["isValidValue", isValidRange]);
     emit("set-picker-option", ["parseUserInput", parseUserInput]);
     emit("set-picker-option", ["handleClear", handleClear]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          unref(ppNs).b(),
-          unref(drpNs).b(),
-          unref(ppNs).is("border", _ctx.border),
-          unref(ppNs).is("disabled", unref(monthRangeDisabled)),
-          {
-            "has-sidebar": Boolean(_ctx.$slots.sidebar) || unref(hasShortcuts)
-          }
-        ])
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(ppNs).e("body-wrapper"))
-        }, [
-          renderSlot(_ctx.$slots, "sidebar", {
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }),
-          unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
-              return openBlock(), createElementBlock("button", {
-                key,
-                type: "button",
-                class: normalizeClass(unref(ppNs).e("shortcut")),
-                disabled: unref(monthRangeDisabled),
-                onClick: ($event) => unref(handleShortcutClick)(shortcut)
-              }, toDisplayString(shortcut.text), 11, ["disabled", "onClick"]);
-            }), 128))
-          ], 2)) : createCommentVNode("v-if", true),
-          createElementVNode("div", {
-            class: normalizeClass(unref(ppNs).e("body"))
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
-            }, [
-              createElementVNode("div", {
-                class: normalizeClass(unref(drpNs).e("header"))
-              }, [
-                createElementVNode("button", {
-                  type: "button",
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
-                  disabled: unref(monthRangeDisabled),
-                  onClick: unref(leftPrevYear)
-                }, [
-                  renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"]),
-                _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
-                  key: 0,
-                  type: "button",
-                  disabled: !unref(enableYearArrow) || unref(monthRangeDisabled),
-                  class: normalizeClass([[
-                    unref(ppNs).e("icon-btn"),
-                    unref(ppNs).is("disabled", !unref(enableYearArrow) || unref(monthRangeDisabled))
-                  ], "d-arrow-right"]),
-                  onClick: unref(leftNextYear)
-                }, [
-                  renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
-                createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
-              ], 2),
-              createVNode(MonthTable, {
-                "selection-mode": "range",
-                date: leftDate.value,
-                "min-date": unref(minDate),
-                "max-date": unref(maxDate),
-                "range-state": unref(rangeState),
-                "disabled-date": unref(disabledDate),
-                disabled: unref(monthRangeDisabled),
-                "cell-class-name": unref(cellClassName),
-                onChangerange: unref(handleChangeRange),
-                onPick: handleRangePick,
-                onSelect: unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
-            ], 2),
-            createElementVNode("div", {
-              class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
-            }, [
-              createElementVNode("div", {
-                class: normalizeClass(unref(drpNs).e("header"))
-              }, [
-                _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([
+            unref(ppNs).b(),
+            unref(drpNs).b(),
+            unref(ppNs).is("border", _ctx.border),
+            unref(ppNs).is("disabled", unref(monthRangeDisabled)),
+            {
+              "has-sidebar": Boolean(_ctx.$slots.sidebar) || hasShortcuts.value
+            }
+          ])
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(ppNs).e("body-wrapper"))
+            },
+            [
+              renderSlot(_ctx.$slots, "sidebar", {
+                class: normalizeClass(unref(ppNs).e("sidebar"))
+              }),
+              hasShortcuts.value ? (openBlock(), createElementBlock(
+                "div",
+                {
                   key: 0,
-                  type: "button",
-                  disabled: !unref(enableYearArrow) || unref(monthRangeDisabled),
-                  class: normalizeClass([[
-                    unref(ppNs).e("icon-btn"),
-                    unref(ppNs).is("disabled", !unref(enableYearArrow) || unref(monthRangeDisabled))
-                  ], "d-arrow-left"]),
-                  onClick: unref(rightPrevYear)
-                }, [
-                  renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
-                createElementVNode("button", {
-                  type: "button",
-                  class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
-                  disabled: unref(monthRangeDisabled),
-                  onClick: unref(rightNextYear)
-                }, [
-                  renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"]),
-                createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
-              ], 2),
-              createVNode(MonthTable, {
-                "selection-mode": "range",
-                date: rightDate.value,
-                "min-date": unref(minDate),
-                "max-date": unref(maxDate),
-                "range-state": unref(rangeState),
-                "disabled-date": unref(disabledDate),
-                disabled: unref(monthRangeDisabled),
-                "cell-class-name": unref(cellClassName),
-                onChangerange: unref(handleChangeRange),
-                onPick: handleRangePick,
-                onSelect: unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
-            ], 2)
-          ], 2)
-        ], 2)
-      ], 2);
+                  class: normalizeClass(unref(ppNs).e("sidebar"))
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(unref(shortcuts), (shortcut, key) => {
+                      return openBlock(), createElementBlock("button", {
+                        key,
+                        type: "button",
+                        class: normalizeClass(unref(ppNs).e("shortcut")),
+                        disabled: unref(monthRangeDisabled),
+                        onClick: ($event) => unref(handleShortcutClick)(shortcut)
+                      }, toDisplayString(shortcut.text), 11, _hoisted_1$1);
+                    }),
+                    128
+                  ))
+                ],
+                2
+              )) : createCommentVNode("v-if", true),
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(unref(ppNs).e("body"))
+                },
+                [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
+                    },
+                    [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(drpNs).e("header"))
+                        },
+                        [
+                          createElementVNode("button", {
+                            type: "button",
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
+                            disabled: unref(monthRangeDisabled),
+                            onClick: _cache[0] || (_cache[0] = (...args) => unref(leftPrevYear) && unref(leftPrevYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_2$1),
+                          _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            type: "button",
+                            disabled: !enableYearArrow.value || unref(monthRangeDisabled),
+                            class: normalizeClass([[
+                              unref(ppNs).e("icon-btn"),
+                              unref(ppNs).is("disabled", !enableYearArrow.value || unref(monthRangeDisabled))
+                            ], "d-arrow-right"]),
+                            onClick: _cache[1] || (_cache[1] = (...args) => unref(leftNextYear) && unref(leftNextYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "next-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_3$1)) : createCommentVNode("v-if", true),
+                          createElementVNode(
+                            "div",
+                            null,
+                            toDisplayString(unref(leftLabel)),
+                            1
+                          )
+                        ],
+                        2
+                      ),
+                      createVNode(MonthTable, {
+                        "selection-mode": "range",
+                        date: leftDate.value,
+                        "min-date": unref(minDate),
+                        "max-date": unref(maxDate),
+                        "range-state": unref(rangeState),
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(monthRangeDisabled),
+                        "cell-class-name": unref(cellClassName),
+                        onChangerange: unref(handleChangeRange),
+                        onPick: handleRangePick,
+                        onSelect: unref(onSelect)
+                      }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
+                    ],
+                    2
+                  ),
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
+                    },
+                    [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(drpNs).e("header"))
+                        },
+                        [
+                          _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            type: "button",
+                            disabled: !enableYearArrow.value || unref(monthRangeDisabled),
+                            class: normalizeClass([[
+                              unref(ppNs).e("icon-btn"),
+                              unref(ppNs).is("disabled", !enableYearArrow.value || unref(monthRangeDisabled))
+                            ], "d-arrow-left"]),
+                            onClick: _cache[2] || (_cache[2] = (...args) => unref(rightPrevYear) && unref(rightPrevYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_4$1)) : createCommentVNode("v-if", true),
+                          createElementVNode("button", {
+                            type: "button",
+                            class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
+                            disabled: unref(monthRangeDisabled),
+                            onClick: _cache[3] || (_cache[3] = (...args) => unref(rightNextYear) && unref(rightNextYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "next-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_5$1),
+                          createElementVNode(
+                            "div",
+                            null,
+                            toDisplayString(unref(rightLabel)),
+                            1
+                          )
+                        ],
+                        2
+                      ),
+                      createVNode(MonthTable, {
+                        "selection-mode": "range",
+                        date: rightDate.value,
+                        "min-date": unref(minDate),
+                        "max-date": unref(maxDate),
+                        "range-state": unref(rangeState),
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(monthRangeDisabled),
+                        "cell-class-name": unref(cellClassName),
+                        onChangerange: unref(handleChangeRange),
+                        onPick: handleRangePick,
+                        onSelect: unref(onSelect)
+                      }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
+                    ],
+                    2
+                  )
+                ],
+                2
+              )
+            ],
+            2
+          )
+        ],
+        2
+      );
     };
   }
 });
-var MonthRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "panel-month-range.vue"]]);
+var MonthRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue"]]);
 
 const panelYearRangeProps = buildProps({
   ...panelRangeSharedProps
@@ -5075,21 +5743,30 @@ const useYearRangeHeader = ({
   };
 };
 
+const _hoisted_1 = ["disabled", "onClick"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = ["disabled"];
 const step = 10;
 const unit = "year";
-const __default__ = defineComponent({
-  name: "DatePickerYearRange"
-});
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const _sfc_main$1 = defineComponent({
+  ...{
+    name: "DatePickerYearRange"
+  },
+  __name: "panel-year-range",
   props: panelYearRangeProps,
   emits: panelYearRangeEmits,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { lang } = useLocale();
     const leftDate = ref(dayjs().locale(lang.value));
     const rightDate = ref(dayjs().locale(lang.value).add(step, unit));
-    const isDefaultFormat = inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, void 0);
+    const isDefaultFormat = inject(
+      ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,
+      void 0
+    );
     const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
     const { shortcuts, disabledDate, cellClassName } = pickerBase.props;
     const format = toRef(pickerBase.props, "format");
@@ -5177,7 +5854,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       handleRangeConfirm();
     };
     const parseUserInput = (value) => {
-      return correctlyParseUserInput(value, format.value, lang.value, isDefaultFormat);
+      return correctlyParseUserInput(
+        value,
+        format.value,
+        lang.value,
+        isDefaultFormat
+      );
     };
     const isValidValue = (date) => {
       return isValidRange(date) && (disabledDate ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate()) : true);
@@ -5206,155 +5888,213 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         rightDate.value = leftDate.value.add(step, unit);
       }
     }
-    watch(() => props.visible, (visible) => {
-      if (!visible && rangeState.value.selecting) {
-        parseValue(props.parsedValue);
-        onSelect(false);
+    watch(
+      () => props.visible,
+      (visible) => {
+        if (!visible && rangeState.value.selecting) {
+          parseValue(props.parsedValue);
+          onSelect(false);
+        }
       }
-    });
+    );
     emit("set-picker-option", ["isValidValue", isValidValue]);
     emit("set-picker-option", ["parseUserInput", parseUserInput]);
     emit("set-picker-option", ["handleClear", handleClear]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(panelKls))
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(ppNs).e("body-wrapper"))
-        }, [
-          renderSlot(_ctx.$slots, "sidebar", {
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }),
-          unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(unref(ppNs).e("sidebar"))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
-              return openBlock(), createElementBlock("button", {
-                key,
-                type: "button",
-                class: normalizeClass(unref(ppNs).e("shortcut")),
-                disabled: unref(yearRangeDisabled),
-                onClick: ($event) => unref(handleShortcutClick)(shortcut)
-              }, toDisplayString(shortcut.text), 11, ["disabled", "onClick"]);
-            }), 128))
-          ], 2)) : createCommentVNode("v-if", true),
-          createElementVNode("div", {
-            class: normalizeClass(unref(ppNs).e("body"))
-          }, [
-            createElementVNode("div", {
-              class: normalizeClass(unref(leftPanelKls).content)
-            }, [
-              createElementVNode("div", {
-                class: normalizeClass(unref(drpNs).e("header"))
-              }, [
-                createElementVNode("button", {
-                  type: "button",
-                  class: normalizeClass(unref(leftPanelKls).arrowLeftBtn),
-                  disabled: unref(yearRangeDisabled),
-                  onClick: unref(leftPrevYear)
-                }, [
-                  renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"]),
-                _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
-                  key: 0,
-                  type: "button",
-                  disabled: !unref(enableYearArrow) || unref(yearRangeDisabled),
-                  class: normalizeClass(unref(leftPanelKls).arrowRightBtn),
-                  onClick: unref(leftNextYear)
-                }, [
-                  renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
-                createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
-              ], 2),
-              createVNode(YearTable, {
-                "selection-mode": "range",
-                date: leftDate.value,
-                "min-date": unref(minDate),
-                "max-date": unref(maxDate),
-                "range-state": unref(rangeState),
-                "disabled-date": unref(disabledDate),
-                disabled: unref(yearRangeDisabled),
-                "cell-class-name": unref(cellClassName),
-                onChangerange: unref(handleChangeRange),
-                onPick: handleRangePick,
-                onSelect: unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
-            ], 2),
-            createElementVNode("div", {
-              class: normalizeClass(unref(rightPanelKls).content)
-            }, [
-              createElementVNode("div", {
-                class: normalizeClass(unref(drpNs).e("header"))
-              }, [
-                _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(panelKls.value)
+        },
+        [
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass(unref(ppNs).e("body-wrapper"))
+            },
+            [
+              renderSlot(_ctx.$slots, "sidebar", {
+                class: normalizeClass(unref(ppNs).e("sidebar"))
+              }),
+              hasShortcuts.value ? (openBlock(), createElementBlock(
+                "div",
+                {
                   key: 0,
-                  type: "button",
-                  disabled: !unref(enableYearArrow) || unref(yearRangeDisabled),
-                  class: normalizeClass(unref(rightPanelKls).arrowLeftBtn),
-                  onClick: unref(rightPrevYear)
-                }, [
-                  renderSlot(_ctx.$slots, "prev-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowLeft))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
-                createElementVNode("button", {
-                  type: "button",
-                  class: normalizeClass(unref(rightPanelKls).arrowRightBtn),
-                  disabled: unref(yearRangeDisabled),
-                  onClick: unref(rightNextYear)
-                }, [
-                  renderSlot(_ctx.$slots, "next-year", {}, () => [
-                    createVNode(unref(ElIcon), null, {
-                      default: withCtx(() => [
-                        createVNode(unref(DArrowRight))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ], 10, ["disabled", "onClick"]),
-                createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
-              ], 2),
-              createVNode(YearTable, {
-                "selection-mode": "range",
-                date: rightDate.value,
-                "min-date": unref(minDate),
-                "max-date": unref(maxDate),
-                "range-state": unref(rangeState),
-                "disabled-date": unref(disabledDate),
-                disabled: unref(yearRangeDisabled),
-                "cell-class-name": unref(cellClassName),
-                onChangerange: unref(handleChangeRange),
-                onPick: handleRangePick,
-                onSelect: unref(onSelect)
-              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
-            ], 2)
-          ], 2)
-        ], 2)
-      ], 2);
+                  class: normalizeClass(unref(ppNs).e("sidebar"))
+                },
+                [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(unref(shortcuts), (shortcut, key) => {
+                      return openBlock(), createElementBlock("button", {
+                        key,
+                        type: "button",
+                        class: normalizeClass(unref(ppNs).e("shortcut")),
+                        disabled: unref(yearRangeDisabled),
+                        onClick: ($event) => unref(handleShortcutClick)(shortcut)
+                      }, toDisplayString(shortcut.text), 11, _hoisted_1);
+                    }),
+                    128
+                  ))
+                ],
+                2
+              )) : createCommentVNode("v-if", true),
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(unref(ppNs).e("body"))
+                },
+                [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass(leftPanelKls.value.content)
+                    },
+                    [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(drpNs).e("header"))
+                        },
+                        [
+                          createElementVNode("button", {
+                            type: "button",
+                            class: normalizeClass(leftPanelKls.value.arrowLeftBtn),
+                            disabled: unref(yearRangeDisabled),
+                            onClick: _cache[0] || (_cache[0] = (...args) => unref(leftPrevYear) && unref(leftPrevYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_2),
+                          _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            type: "button",
+                            disabled: !enableYearArrow.value || unref(yearRangeDisabled),
+                            class: normalizeClass(leftPanelKls.value.arrowRightBtn),
+                            onClick: _cache[1] || (_cache[1] = (...args) => unref(leftNextYear) && unref(leftNextYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "next-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_3)) : createCommentVNode("v-if", true),
+                          createElementVNode(
+                            "div",
+                            null,
+                            toDisplayString(unref(leftLabel)),
+                            1
+                          )
+                        ],
+                        2
+                      ),
+                      createVNode(YearTable, {
+                        "selection-mode": "range",
+                        date: leftDate.value,
+                        "min-date": unref(minDate),
+                        "max-date": unref(maxDate),
+                        "range-state": unref(rangeState),
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(yearRangeDisabled),
+                        "cell-class-name": unref(cellClassName),
+                        onChangerange: unref(handleChangeRange),
+                        onPick: handleRangePick,
+                        onSelect: unref(onSelect)
+                      }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
+                    ],
+                    2
+                  ),
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass(rightPanelKls.value.content)
+                    },
+                    [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(drpNs).e("header"))
+                        },
+                        [
+                          _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
+                            key: 0,
+                            type: "button",
+                            disabled: !enableYearArrow.value || unref(yearRangeDisabled),
+                            class: normalizeClass(rightPanelKls.value.arrowLeftBtn),
+                            onClick: _cache[2] || (_cache[2] = (...args) => unref(rightPrevYear) && unref(rightPrevYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "prev-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowLeft))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_4)) : createCommentVNode("v-if", true),
+                          createElementVNode("button", {
+                            type: "button",
+                            class: normalizeClass(rightPanelKls.value.arrowRightBtn),
+                            disabled: unref(yearRangeDisabled),
+                            onClick: _cache[3] || (_cache[3] = (...args) => unref(rightNextYear) && unref(rightNextYear)(...args))
+                          }, [
+                            renderSlot(_ctx.$slots, "next-year", {}, () => [
+                              createVNode(unref(ElIcon), null, {
+                                default: withCtx(() => [
+                                  createVNode(unref(DArrowRight))
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ], 10, _hoisted_5),
+                          createElementVNode(
+                            "div",
+                            null,
+                            toDisplayString(unref(rightLabel)),
+                            1
+                          )
+                        ],
+                        2
+                      ),
+                      createVNode(YearTable, {
+                        "selection-mode": "range",
+                        date: rightDate.value,
+                        "min-date": unref(minDate),
+                        "max-date": unref(maxDate),
+                        "range-state": unref(rangeState),
+                        "disabled-date": unref(disabledDate),
+                        disabled: unref(yearRangeDisabled),
+                        "cell-class-name": unref(cellClassName),
+                        onChangerange: unref(handleChangeRange),
+                        onPick: handleRangePick,
+                        onSelect: unref(onSelect)
+                      }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
+                    ],
+                    2
+                  )
+                ],
+                2
+              )
+            ],
+            2
+          )
+        ],
+        2
+      );
     };
   }
 });
-var YearRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "panel-year-range.vue"]]);
+var YearRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue"]]);
 
 const getPanel = function(type) {
   switch (type) {
@@ -5388,11 +6128,13 @@ dayjs.extend(isSameOrBefore);
 var DatePickerPanel = defineComponent({
   name: "ElDatePickerPanel",
   install: null,
+  inheritAttrs: false,
   props: datePickerPanelProps,
-  emits: [UPDATE_MODEL_EVENT, "calendar-change", "panel-change", "visible-change", "pick"],
+  emits: [UPDATE_MODEL_EVENT, "calendar-change", "panel-change", "visible-change", "clear"],
   setup(props, {
     slots,
-    emit
+    emit,
+    attrs
   }) {
     const ns = useNamespace("picker-panel");
     const pickerInjection = inject(PICKER_BASE_INJECTION_KEY, void 0);
@@ -5417,11 +6159,12 @@ var DatePickerPanel = defineComponent({
     } = inject(ROOT_COMMON_PICKER_INJECTION_KEY, () => useCommonPicker(props, emit), true);
     return () => {
       const Component = getPanel(props.type);
-      return createVNode(Component, mergeProps(props, {
+      return createVNode(Component, mergeProps(omit(attrs, "onPick"), props, {
         "parsedValue": parsedValue.value,
         "onSet-picker-option": onSetPickerOption,
         "onCalendar-change": onCalendarChange,
         "onPanel-change": onPanelChange,
+        "onClear": () => emit("clear"),
         "onPick": onPick
       }), _isSlot$1(slots) ? slots : {
         default: () => [slots]
@@ -5491,6 +6234,8 @@ var DatePicker = defineComponent({
         "onUpdate:modelValue": onModelValueUpdated
       }), {
         default: (scopedProps) => createVNode(ElDatePickerPanel, mergeProps({
+          "disabled": props.disabled,
+          "editable": props.editable,
           "border": false
         }, scopedProps), _isSlot(slots) ? slots : {
           default: () => [slots]