naive-ui 2.23.2 → 2.24.3

package/lib/date-picker/src/panel/daterange.d.ts

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     shortcuts: import("vue").ComputedRef<import("../interface").Shortcuts | undefined>;
+    startCalendarDateTime: import("vue").Ref<number>;
+    endCalendarDateTime: import("vue").Ref<number>;
+    onUpdateStartCalendarValue: (value: number) => void;
+    onUpdateEndCalendarValue: (value: number) => void;
     isDateDisabled: import("vue").Ref<import("../interface").IsDateDisabled | undefined>;
     isStartHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
     isEndHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
@@ -1104,6 +1108,8 @@ declare const _default: import("vue").DefineComponent<{
     restorePendingValue: () => void;
     getShortcutValue: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => number | [number, number];
     handleShortcutMouseleave: () => void;
+    showMonthYearPanel: import("vue").Ref<boolean>;
+    handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
@@ -1130,32 +1136,31 @@ declare const _default: import("vue").DefineComponent<{
     endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
     handleRangeShortcutClick: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly actions?: unknown;
-    readonly active?: unknown;
-    readonly dateFormat?: unknown;
-    readonly timeFormat?: unknown;
-    readonly value?: unknown;
-    readonly shortcuts?: unknown;
-    readonly defaultTime?: unknown;
-    readonly onConfirm?: unknown;
-    readonly onClose?: unknown;
-    readonly onTabOut?: unknown;
-    readonly onUpdateValue?: unknown;
-} & {
-    value: import("../interface").Value | null;
-    active: boolean;
-    onUpdateValue: import("../interface").OnPanelUpdateValue;
-    actions: unknown[];
-} & {
-    dateFormat?: string | undefined;
-    onTabOut?: Function | undefined;
-    onClose?: import("../interface").OnClose | undefined;
-    onConfirm?: Function | undefined;
-    defaultTime?: import("../interface").DefaultTime | undefined;
-    timeFormat?: string | undefined;
-    shortcuts?: import("../interface").Shortcuts | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly actions: {
+        readonly type: ArrayConstructor;
+        readonly default: () => string[];
+    };
+    readonly active: BooleanConstructor;
+    readonly dateFormat: StringConstructor;
+    readonly timeFormat: {
+        readonly type: StringConstructor;
+        readonly value: "HH:mm:ss";
+    };
+    readonly value: {
+        readonly type: import("vue").PropType<import("../interface").Value | null>;
+        readonly default: null;
+    };
+    readonly shortcuts: import("vue").PropType<import("../interface").Shortcuts>;
+    readonly defaultTime: import("vue").PropType<import("../interface").DefaultTime>;
+    readonly onConfirm: FunctionConstructor;
+    readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly onTabOut: FunctionConstructor;
+    readonly onUpdateValue: {
+        readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
+        readonly required: true;
+    };
+}>>, {
     value: import("../interface").Value | null;
     active: boolean;
     actions: unknown[];

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

@@ -1,11 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const button_1 = require("../../../button");
 const icons_1 = require("../../../_internal/icons");
 const _internal_1 = require("../../../_internal");
-const use_dual_calendar_1 = require("./use-dual-calendar");
 const _utils_1 = require("../../../_utils");
+const panelHeader_1 = __importDefault(require("./panelHeader"));
+const use_dual_calendar_1 = require("./use-dual-calendar");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DateRangePanel',
     props: use_dual_calendar_1.useDualCalendarProps,
@@ -30,9 +34,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)(icons_1.FastBackwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.startCalendarPrevMonth },
                         (0, vue_1.h)(icons_1.BackwardIcon, null)),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.startCalendarMonth} ${this.startCalendarYear}`
-                        : `${this.startCalendarYear} ${this.startCalendarMonth}`),
+                    (0, vue_1.h)(panelHeader_1.default, { monthBeforeYear: this.locale.monthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.startCalendarNextMonth },
                         (0, vue_1.h)(icons_1.ForwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.startCalendarNextYear },
@@ -60,9 +62,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)(icons_1.FastBackwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.endCalendarPrevMonth },
                         (0, vue_1.h)(icons_1.BackwardIcon, null)),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.endCalendarMonth} ${this.endCalendarYear}`
-                        : `${this.endCalendarYear} ${this.endCalendarMonth}`),
+                    (0, vue_1.h)(panelHeader_1.default, { monthBeforeYear: this.locale.monthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.endCalendarNextMonth },
                         (0, vue_1.h)(icons_1.ForwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.endCalendarNextYear },
@@ -83,7 +83,7 @@ exports.default = (0, vue_1.defineComponent)({
                     ], onClick: () => this.handleDateClick(dateItem), onMouseenter: () => this.handleDateMouseEnter(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, (0, vue_1.renderSlot)(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {

package/lib/date-picker/src/panel/datetime.d.ts

@@ -37,11 +37,14 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     monthScrollRef: import("vue").Ref<{
-        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     yearScrollRef: import("vue").Ref<{
         listElRef: HTMLElement;
@@ -49,12 +52,19 @@ declare const _default: import("vue").DefineComponent<{
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
     scrollbarInstRef: import("vue").Ref<{
-        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
+    handleQuickMonthClick: (dateItem: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, updatePanelValue: (value: number) => void) => void;
+    scrollPickerColumns: (value?: number | undefined) => void;
+    calendarValue: import("vue").Ref<number>;
+    onUpdateCalendarValue: (value: number) => void;
     mergedTheme: import("vue").Ref<{
         common: {
             baseColor: string;
@@ -1107,6 +1117,8 @@ declare const _default: import("vue").DefineComponent<{
     restorePendingValue: () => void;
     getShortcutValue: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => number | [number, number];
     handleShortcutMouseleave: () => void;
+    showMonthYearPanel: import("vue").Ref<boolean>;
+    handleOpenQuickSelectMonthPanel: () => void;
     isValueInvalid: import("vue").ComputedRef<boolean>;
     isDateDisabled: import("vue").Ref<import("../interface").IsDateDisabled | undefined>;
     isDateInvalid: import("vue").ComputedRef<boolean>;
@@ -1131,32 +1143,31 @@ declare const _default: import("vue").DefineComponent<{
     handleConfirmClick: () => void;
     handleSingleShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
     handleSingleShortcutClick: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly actions?: unknown;
-    readonly active?: unknown;
-    readonly dateFormat?: unknown;
-    readonly timeFormat?: unknown;
-    readonly value?: unknown;
-    readonly shortcuts?: unknown;
-    readonly defaultTime?: unknown;
-    readonly onConfirm?: unknown;
-    readonly onClose?: unknown;
-    readonly onTabOut?: unknown;
-    readonly onUpdateValue?: unknown;
-} & {
-    value: import("../interface").Value | null;
-    active: boolean;
-    onUpdateValue: import("../interface").OnPanelUpdateValue;
-    actions: string[];
-} & {
-    dateFormat?: string | undefined;
-    onTabOut?: Function | undefined;
-    onClose?: import("../interface").OnClose | undefined;
-    onConfirm?: Function | undefined;
-    defaultTime?: import("../interface").DefaultTime | undefined;
-    timeFormat?: string | undefined;
-    shortcuts?: import("../interface").Shortcuts | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly actions: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: () => string[];
+    };
+    readonly active: BooleanConstructor;
+    readonly dateFormat: StringConstructor;
+    readonly timeFormat: {
+        readonly type: StringConstructor;
+        readonly value: "HH:mm:ss";
+    };
+    readonly value: {
+        readonly type: import("vue").PropType<import("../interface").Value | null>;
+        readonly default: null;
+    };
+    readonly shortcuts: import("vue").PropType<import("../interface").Shortcuts>;
+    readonly defaultTime: import("vue").PropType<import("../interface").DefaultTime>;
+    readonly onConfirm: FunctionConstructor;
+    readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly onTabOut: FunctionConstructor;
+    readonly onUpdateValue: {
+        readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
+        readonly required: true;
+    };
+}>>, {
     value: import("../interface").Value | null;
     active: boolean;
     actions: string[];

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

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const button_1 = require("../../../button");
@@ -7,6 +10,7 @@ const input_1 = require("../../../input");
 const icons_1 = require("../../../_internal/icons");
 const _internal_1 = require("../../../_internal");
 const use_calendar_1 = require("./use-calendar");
+const panelHeader_1 = __importDefault(require("./panelHeader"));
 /**
  * DateTime Panel
  * Update picker value on:
@@ -32,9 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)(icons_1.FastBackwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.prevMonth },
                         (0, vue_1.h)(icons_1.BackwardIcon, null)),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.calendarMonth} ${this.calendarYear}`
-                        : `${this.calendarYear} ${this.calendarMonth}`),
+                    (0, vue_1.h)(panelHeader_1.default, { monthBeforeYear: this.locale.monthBeforeYear, value: this.calendarValue, onUpdateValue: this.onUpdateCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.calendarMonth, calendarYear: this.calendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.nextMonth },
                         (0, vue_1.h)(icons_1.ForwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.nextYear },
@@ -51,7 +53,7 @@ exports.default = (0, vue_1.defineComponent)({
                     ], onClick: () => this.handleDateClick(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, (0, vue_1.renderSlot)(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {

package/lib/date-picker/src/panel/datetimerange.d.ts

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     shortcuts: import("vue").ComputedRef<import("../interface").Shortcuts | undefined>;
+    startCalendarDateTime: import("vue").Ref<number>;
+    endCalendarDateTime: import("vue").Ref<number>;
+    onUpdateStartCalendarValue: (value: number) => void;
+    onUpdateEndCalendarValue: (value: number) => void;
     isDateDisabled: import("vue").Ref<import("../interface").IsDateDisabled | undefined>;
     isStartHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
     isEndHourDisabled: import("vue").ComputedRef<import("../../../time-picker/src/interface").IsHourDisabled | undefined>;
@@ -1104,6 +1108,8 @@ declare const _default: import("vue").DefineComponent<{
     restorePendingValue: () => void;
     getShortcutValue: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => number | [number, number];
     handleShortcutMouseleave: () => void;
+    showMonthYearPanel: import("vue").Ref<boolean>;
+    handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     resetSelectingStatus: (e: MouseEvent) => void;
@@ -1130,32 +1136,31 @@ declare const _default: import("vue").DefineComponent<{
     endDateArray: import("vue").ComputedRef<import("../utils").DateItem[]>;
     handleRangeShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
     handleRangeShortcutClick: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly actions?: unknown;
-    readonly active?: unknown;
-    readonly dateFormat?: unknown;
-    readonly timeFormat?: unknown;
-    readonly value?: unknown;
-    readonly shortcuts?: unknown;
-    readonly defaultTime?: unknown;
-    readonly onConfirm?: unknown;
-    readonly onClose?: unknown;
-    readonly onTabOut?: unknown;
-    readonly onUpdateValue?: unknown;
-} & {
-    value: import("../interface").Value | null;
-    active: boolean;
-    onUpdateValue: import("../interface").OnPanelUpdateValue;
-    actions: unknown[];
-} & {
-    dateFormat?: string | undefined;
-    onTabOut?: Function | undefined;
-    onClose?: import("../interface").OnClose | undefined;
-    onConfirm?: Function | undefined;
-    defaultTime?: import("../interface").DefaultTime | undefined;
-    timeFormat?: string | undefined;
-    shortcuts?: import("../interface").Shortcuts | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly actions: {
+        readonly type: ArrayConstructor;
+        readonly default: () => string[];
+    };
+    readonly active: BooleanConstructor;
+    readonly dateFormat: StringConstructor;
+    readonly timeFormat: {
+        readonly type: StringConstructor;
+        readonly value: "HH:mm:ss";
+    };
+    readonly value: {
+        readonly type: import("vue").PropType<import("../interface").Value | null>;
+        readonly default: null;
+    };
+    readonly shortcuts: import("vue").PropType<import("../interface").Shortcuts>;
+    readonly defaultTime: import("vue").PropType<import("../interface").DefaultTime>;
+    readonly onConfirm: FunctionConstructor;
+    readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly onTabOut: FunctionConstructor;
+    readonly onUpdateValue: {
+        readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
+        readonly required: true;
+    };
+}>>, {
     value: import("../interface").Value | null;
     active: boolean;
     actions: unknown[];

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

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const button_1 = require("../../../button");
@@ -8,6 +11,7 @@ const icons_1 = require("../../../_internal/icons");
 const _internal_1 = require("../../../_internal");
 const _utils_1 = require("../../../_utils");
 const use_dual_calendar_1 = require("./use-dual-calendar");
+const panelHeader_1 = __importDefault(require("./panelHeader"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'DateTimeRangePanel',
     props: use_dual_calendar_1.useDualCalendarProps,
@@ -37,9 +41,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)(icons_1.FastBackwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.startCalendarPrevMonth },
                         (0, vue_1.h)(icons_1.BackwardIcon, null)),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.startCalendarMonth} ${this.startCalendarYear}`
-                        : `${this.startCalendarYear} ${this.startCalendarMonth}`),
+                    (0, vue_1.h)(panelHeader_1.default, { monthBeforeYear: this.locale.monthBeforeYear, value: this.startCalendarDateTime, onUpdateValue: this.onUpdateStartCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.startCalendarMonth, calendarYear: this.startCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.startCalendarNextMonth },
                         (0, vue_1.h)(icons_1.ForwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.startCalendarNextYear },
@@ -67,9 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)(icons_1.FastBackwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__prev`, onClick: this.endCalendarPrevMonth },
                         (0, vue_1.h)(icons_1.BackwardIcon, null)),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__month-year` }, this.locale.monthBeforeYear
-                        ? `${this.endCalendarMonth} ${this.endCalendarYear}`
-                        : `${this.endCalendarYear} ${this.endCalendarMonth}`),
+                    (0, vue_1.h)(panelHeader_1.default, { monthBeforeYear: this.locale.monthBeforeYear, value: this.endCalendarDateTime, onUpdateValue: this.onUpdateEndCalendarValue, mergedClsPrefix: mergedClsPrefix, calendarMonth: this.endCalendarMonth, calendarYear: this.endCalendarYear }),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__next`, onClick: this.endCalendarNextMonth },
                         (0, vue_1.h)(icons_1.ForwardIcon, null)),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month__fast-next`, onClick: this.endCalendarNextYear },
@@ -90,7 +90,7 @@ exports.default = (0, vue_1.defineComponent)({
                     ], onClick: () => this.handleDateClick(dateItem), onMouseenter: () => this.handleDateMouseEnter(dateItem) },
                     dateItem.dateObject.date,
                     dateItem.isCurrentDate ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-date__sup` })) : null))))),
-            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, (0, vue_1.renderSlot)(this.datePickerSlots, 'footer'))) : null,
+            this.datePickerSlots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-footer` }, this.datePickerSlots.footer())) : null,
             ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) || shortcuts ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-actions__prefix` }, shortcuts &&
                     Object.keys(shortcuts).map((key) => {

package/lib/date-picker/src/panel/month.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"month" | "year" | "quarter">;
         required: true;
     };
+    useAsQuickJump: BooleanConstructor;
     actions: {
         readonly type: PropType<string[]>;
         readonly default: () => string[];
@@ -44,11 +45,14 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     monthScrollRef: import("vue").Ref<{
-        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
     yearScrollRef: import("vue").Ref<{
         listElRef: HTMLElement;
@@ -56,12 +60,19 @@ declare const _default: import("vue").DefineComponent<{
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
     scrollbarInstRef: import("vue").Ref<{
-        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
-        sync: () => void;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
     } | null>;
+    handleQuickMonthClick: (dateItem: MonthItem | YearItem | QuarterItem, updatePanelValue: (value: number) => void) => void;
+    scrollPickerColumns: (value?: number | undefined) => void;
+    calendarValue: import("vue").Ref<number>;
+    onUpdateCalendarValue: (value: number) => void;
     mergedTheme: import("vue").Ref<{
         common: {
             baseColor: string;
@@ -1114,6 +1125,8 @@ declare const _default: import("vue").DefineComponent<{
     restorePendingValue: () => void;
     getShortcutValue: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => number | [number, number];
     handleShortcutMouseleave: () => void;
+    showMonthYearPanel: import("vue").Ref<boolean>;
+    handleOpenQuickSelectMonthPanel: () => void;
     isValueInvalid: import("vue").ComputedRef<boolean>;
     isDateDisabled: import("vue").Ref<import("../interface").IsDateDisabled | undefined>;
     isDateInvalid: import("vue").ComputedRef<boolean>;
@@ -1138,37 +1151,40 @@ declare const _default: import("vue").DefineComponent<{
     handleConfirmClick: () => void;
     handleSingleShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
     handleSingleShortcutClick: (shortcut: number | [number, number] | (() => number) | (() => [number, number])) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    type?: unknown;
-    actions?: unknown;
-    active?: unknown;
-    dateFormat?: unknown;
-    timeFormat?: unknown;
-    value?: unknown;
-    shortcuts?: unknown;
-    defaultTime?: unknown;
-    onConfirm?: unknown;
-    onClose?: unknown;
-    onTabOut?: unknown;
-    onUpdateValue?: unknown;
-} & {
-    type: "month" | "year" | "quarter";
-    value: import("../interface").Value | null;
-    active: boolean;
-    onUpdateValue: import("../interface").OnPanelUpdateValue;
-    actions: string[];
-} & {
-    dateFormat?: string | undefined;
-    onTabOut?: Function | undefined;
-    onClose?: import("../interface").OnClose | undefined;
-    onConfirm?: Function | undefined;
-    defaultTime?: import("../interface").DefaultTime | undefined;
-    timeFormat?: string | undefined;
-    shortcuts?: import("../interface").Shortcuts | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<"month" | "year" | "quarter">;
+        required: true;
+    };
+    useAsQuickJump: BooleanConstructor;
+    actions: {
+        readonly type: PropType<string[]>;
+        readonly default: () => string[];
+    };
+    active: BooleanConstructor;
+    dateFormat: StringConstructor;
+    timeFormat: {
+        readonly type: StringConstructor;
+        readonly value: "HH:mm:ss";
+    };
+    value: {
+        readonly type: PropType<import("../interface").Value | null>;
+        readonly default: null;
+    };
+    shortcuts: PropType<import("../interface").Shortcuts>;
+    defaultTime: PropType<import("../interface").DefaultTime>;
+    onConfirm: FunctionConstructor;
+    onClose: PropType<import("../interface").OnClose>;
+    onTabOut: FunctionConstructor;
+    onUpdateValue: {
+        readonly type: PropType<import("../interface").OnPanelUpdateValue>;
+        readonly required: true;
+    };
+}>>, {
     value: import("../interface").Value | null;
     active: boolean;
     actions: string[];
+    useAsQuickJump: boolean;
 }>;
 /**
  * Month Panel

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

@@ -17,7 +17,9 @@ exports.default = (0, vue_1.defineComponent)({
     props: Object.assign(Object.assign({}, use_calendar_1.useCalendarProps), { type: {
             type: String,
             required: true
-        } }),
+        }, 
+        // panelHeader prop
+        useAsQuickJump: Boolean }),
     setup(props) {
         const useCalendarRef = (0, use_calendar_1.useCalendar)(props, props.type);
         const getRenderContent = (item) => {
@@ -31,7 +33,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         const renderItem = (item, i, mergedClsPrefix) => {
-            const { mergedIsDateDisabled, handleDateClick } = useCalendarRef;
+            const { mergedIsDateDisabled, handleDateClick, handleQuickMonthClick } = useCalendarRef;
             return ((0, vue_1.h)("div", { "data-n-date": true, key: i, class: [
                     `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
                     {
@@ -39,8 +41,15 @@ exports.default = (0, vue_1.defineComponent)({
                         [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]: item.selected,
                         [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: mergedIsDateDisabled(item.ts)
                     }
-                ], onClick: () => handleDateClick(item) }, getRenderContent(item)));
+                ], onClick: () => {
+                    props.useAsQuickJump
+                        ? handleQuickMonthClick(item, (value) => props.onUpdateValue(value, false))
+                        : handleDateClick(item);
+                } }, getRenderContent(item)));
         };
+        (0, vue_1.onMounted)(() => {
+            void (0, vue_1.nextTick)(useCalendarRef.scrollPickerColumns);
+        });
         return Object.assign(Object.assign({}, useCalendarRef), { renderItem });
     },
     render() {