naive-ui 2.38.2 → 2.40.0

package/es/date-picker/src/panel/use-calendar.d.ts

@@ -2,7 +2,7 @@ import { type ExtractPropTypes, type PropType } from 'vue';
 import type { VirtualListInst } from 'vueuc';
 import type { ScrollbarInst } from '../../../_internal';
 import type { IsSingleDateDisabledDetail, Shortcuts } from '../interface';
-import type { DateItem, MonthItem, YearItem, QuarterItem } from '../utils';
+import type { DateItem, MonthItem, QuarterItem, YearItem } from '../utils';
 declare const useCalendarProps: {
     readonly defaultCalendarStartTime: NumberConstructor;
     readonly actions: {
@@ -21,6 +21,7 @@ declare const useCalendarProps: {
     };
     readonly shortcuts: PropType<Shortcuts>;
     readonly defaultTime: PropType<import("../interface").DefaultTime>;
+    readonly inputReadonly: BooleanConstructor;
     readonly onClear: FunctionConstructor;
     readonly onConfirm: PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: PropType<import("../interface").OnClose>;
@@ -47,7 +48,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     clearSelectedDateTime: () => void;
     virtualListContainer: () => HTMLElement | null;
     virtualListContent: () => HTMLElement | null;
-    handleVirtualListScroll: (e: Event) => void;
+    handleVirtualListScroll: () => void;
     timePickerSize: import("vue").Ref<"small" | "medium" | "large">;
     dateInputValue: import("vue").Ref<string>;
     datePickerSlots: Readonly<{
@@ -61,111 +62,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     yearScrollbarRef: import("vue").Ref<ScrollbarInst | null>;
     yearVlRef: import("vue").Ref<VirtualListInst | null>;
     mergedTheme: import("vue").Ref<{
-        common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            invertedColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
-            opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadius: string;
-            borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            name: "common";
-        };
+        common: import("../../..").ThemeCommonVars;
         self: {
             itemFontSize: string;
             calendarDaysFontSize: string;
@@ -520,8 +417,10 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                     borderRadius: string;
                     color: string;
                     colorHover: string;
-                    railInsetHorizontal: string;
-                    railInsetVertical: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
                     railColor: string;
                 }, any>;
                 Button: import("../../../_mixins").Theme<"Button", {
@@ -796,8 +695,10 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                 borderRadius: string;
                 color: string;
                 colorHover: string;
-                railInsetHorizontal: string;
-                railInsetVertical: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
                 railColor: string;
             }, any>;
         };
@@ -820,8 +721,10 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
                         borderRadius: string;
                         color: string;
                         colorHover: string;
-                        railInsetHorizontal: string;
-                        railInsetVertical: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
                         railColor: string;
                     }, any>> | undefined;
                     Button?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Button", {
@@ -1100,9 +1003,9 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
     dateFnsOptions: import("vue").ComputedRef<{
-        locale: Locale;
+        locale: import("date-fns").Locale;
     }>;
-    timePickerProps: import("vue").Ref<import("naive-ui").TimePickerProps | [import("naive-ui").TimePickerProps, import("naive-ui").TimePickerProps] | undefined>;
+    timePickerProps: import("vue").Ref<import("../../..").TimePickerProps | [import("../../..").TimePickerProps, import("../../..").TimePickerProps] | undefined>;
     selfRef: import("vue").Ref<HTMLElement | null>;
     locale: import("vue").Ref<{
         yearFormat: string;
@@ -1132,7 +1035,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         startMonthPlaceholder: string;
         endMonthPlaceholder: string;
         monthBeforeYear: boolean;
-        firstDayOfWeek: 0 | 1 | 3 | 2 | 4 | 6 | 5;
+        firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
         today: string;
     }>;
     doConfirm: () => void;
@@ -1147,7 +1050,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     cachePendingValue: () => void;
     clearPendingValue: () => void;
     restorePendingValue: () => void;
-    getShortcutValue: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => number | [number, number] | readonly [number, number];
+    getShortcutValue: (shortcut: Shortcuts[string]) => number | [number, number] | readonly [number, number];
     handleShortcutMouseleave: () => void;
     showMonthYearPanel: import("vue").Ref<boolean>;
     handleOpenQuickSelectMonthPanel: () => void;

package/es/date-picker/src/panel/use-calendar.mjs

@@ -1,9 +1,9 @@
-import { ref, computed, inject, watch } from 'vue';
-import { addMonths, addYears, isSameMonth, getTime, format, set, getYear, getMonth, getDate, isValid, startOfDay, startOfSecond, startOfMonth, startOfYear, startOfQuarter, startOfWeek, setQuarter, setYear, setMonth } from "date-fns/esm/index.js";
-import { getDefaultTime, dateArray, monthArray, strictParse, yearArray, quarterArray } from "../utils.mjs";
+import { computed, inject, ref, watch } from 'vue';
+import { addMonths, addYears, format, getDate, getMonth, getTime, getYear, isSameMonth, isValid, set, setMonth, setQuarter, setYear, startOfDay, startOfMonth, startOfQuarter, startOfSecond, startOfWeek, startOfYear } from 'date-fns';
+import { dateArray, getDefaultTime, monthArray, quarterArray, strictParse, yearArray } from "../utils.mjs";
 import { datePickerInjectionKey } from "../interface.mjs";
+import { MONTH_ITEM_HEIGHT } from "../config.mjs";
 import { usePanelCommon, usePanelCommonProps } from "./use-panel-common.mjs";
-import { MONTH_ITEM_HEIGHT, START_YEAR } from "../config.mjs";
 const useCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps), {
   defaultCalendarStartTime: Number,
   actions: {
@@ -11,7 +11,6 @@ const useCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps), {
     default: () => ['now', 'clear', 'confirm']
   }
 });
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useCalendar(props, type) {
   var _a;
   const panelCommon = usePanelCommon(props);
@@ -29,8 +28,8 @@ function useCalendar(props, type) {
     datePickerSlots,
     yearFormatRef,
     monthFormatRef,
-    quarterFormatRef
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    quarterFormatRef,
+    yearRangeRef
   } = inject(datePickerInjectionKey);
   const validation = {
     isValueInvalid: isValueInvalidRef,
@@ -67,7 +66,7 @@ function useCalendar(props, type) {
     } = props;
     return yearArray(Array.isArray(value) ? null : value, nowRef.value, {
       yearFormat: yearFormatRef.value
-    });
+    }, yearRangeRef);
   });
   const quarterArrayRef = computed(() => {
     const {
@@ -320,7 +319,7 @@ function useCalendar(props, type) {
     return (value === null || value === void 0 ? void 0 : value.itemsElRef) || null;
   }
   // For month type
-  function handleVirtualListScroll(e) {
+  function handleVirtualListScroll() {
     var _a;
     (_a = yearScrollbarRef.value) === null || _a === void 0 ? void 0 : _a.sync();
   }
@@ -352,7 +351,7 @@ function useCalendar(props, type) {
       });
     }
     if (yearVlRef.value) {
-      const yearIndex = (value === undefined ? mergedValue === null ? getYear(Date.now()) : getYear(mergedValue) : getYear(value)) - START_YEAR;
+      const yearIndex = (value === undefined ? mergedValue === null ? getYear(Date.now()) : getYear(mergedValue) : getYear(value)) - yearRangeRef.value[0];
       yearVlRef.value.scrollTo({
         top: yearIndex * MONTH_ITEM_HEIGHT
       });

package/es/date-picker/src/panel/use-dual-calendar.d.ts

@@ -1,6 +1,6 @@
 import { type ExtractPropTypes } from 'vue';
 import type { VirtualListInst } from 'vueuc';
-import { type DateItem, type MonthItem, type YearItem, type QuarterItem } from '../utils';
+import { type DateItem, type MonthItem, type QuarterItem, type YearItem } from '../utils';
 import { type Shortcuts } from '../interface';
 import type { ScrollbarInst } from '../../../_internal';
 declare const useDualCalendarProps: {
@@ -23,6 +23,7 @@ declare const useDualCalendarProps: {
     };
     readonly shortcuts: import("vue").PropType<Shortcuts>;
     readonly defaultTime: import("vue").PropType<import("../interface").DefaultTime>;
+    readonly inputReadonly: BooleanConstructor;
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
@@ -52,7 +53,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     startCalendarDateTime: import("vue").Ref<number>;
     endCalendarDateTime: import("vue").Ref<number>;
     justifyColumnsScrollState: {
-        (value: [number, number], type: 'start' | 'end'): void;
+        (value: [number, number], type: "start" | "end"): void;
         (): void;
     };
     handleFocusDetectorFocus: () => void;
@@ -64,8 +65,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     handleEndDateInputBlur: () => void;
     handleStartYearVlScroll: () => void;
     handleEndYearVlScroll: () => void;
-    virtualListContainer: (type: 'start' | 'end') => HTMLElement | null;
-    virtualListContent: (type: 'start' | 'end') => HTMLElement | null;
+    virtualListContainer: (type: "start" | "end") => HTMLElement | null;
+    virtualListContent: (type: "start" | "end") => HTMLElement | null;
     onUpdateStartCalendarValue: (value: number) => void;
     onUpdateEndCalendarValue: (value: number) => void;
     startYearScrollbarRef: import("vue").Ref<ScrollbarInst | null>;
@@ -89,111 +90,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     isEndValueInvalid: import("vue").ComputedRef<boolean>;
     isRangeInvalid: import("vue").ComputedRef<boolean>;
     mergedTheme: import("vue").Ref<{
-        common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            invertedColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
-            opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadius: string;
-            borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            name: "common";
-        };
+        common: import("../../..").ThemeCommonVars;
         self: {
             itemFontSize: string;
             calendarDaysFontSize: string;
@@ -548,8 +445,10 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                     borderRadius: string;
                     color: string;
                     colorHover: string;
-                    railInsetHorizontal: string;
-                    railInsetVertical: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
                     railColor: string;
                 }, any>;
                 Button: import("../../../_mixins").Theme<"Button", {
@@ -824,8 +723,10 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                 borderRadius: string;
                 color: string;
                 colorHover: string;
-                railInsetHorizontal: string;
-                railInsetVertical: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
                 railColor: string;
             }, any>;
         };
@@ -848,8 +749,10 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
                         borderRadius: string;
                         color: string;
                         colorHover: string;
-                        railInsetHorizontal: string;
-                        railInsetVertical: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
                         railColor: string;
                     }, any>> | undefined;
                     Button?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Button", {
@@ -1128,9 +1031,9 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
     dateFnsOptions: import("vue").ComputedRef<{
-        locale: Locale;
+        locale: import("date-fns").Locale;
     }>;
-    timePickerProps: import("vue").Ref<import("naive-ui").TimePickerProps | [import("naive-ui").TimePickerProps, import("naive-ui").TimePickerProps] | undefined>;
+    timePickerProps: import("vue").Ref<import("../../..").TimePickerProps | [import("../../..").TimePickerProps, import("../../..").TimePickerProps] | undefined>;
     selfRef: import("vue").Ref<HTMLElement | null>;
     locale: import("vue").Ref<{
         yearFormat: string;
@@ -1160,7 +1063,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
         startMonthPlaceholder: string;
         endMonthPlaceholder: string;
         monthBeforeYear: boolean;
-        firstDayOfWeek: 0 | 1 | 3 | 2 | 4 | 6 | 5;
+        firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
         today: string;
     }>;
     doConfirm: () => void;
@@ -1174,14 +1077,14 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     cachePendingValue: () => void;
     clearPendingValue: () => void;
     restorePendingValue: () => void;
-    getShortcutValue: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => number | [number, number] | readonly [number, number];
+    getShortcutValue: (shortcut: Shortcuts[string]) => number | [number, number] | readonly [number, number];
     handleShortcutMouseleave: () => void;
     showMonthYearPanel: import("vue").Ref<boolean>;
     handleOpenQuickSelectMonthPanel: () => void;
     startDatesElRef: import("vue").Ref<HTMLElement | null>;
     endDatesElRef: import("vue").Ref<HTMLElement | null>;
     handleDateClick: (dateItem: DateItem) => void;
-    handleColItemClick: (dateItem: MonthItem | QuarterItem | YearItem, clickType: 'start' | 'end') => void;
+    handleColItemClick: (dateItem: MonthItem | QuarterItem | YearItem, clickType: "start" | "end") => void;
     handleDateMouseEnter: (dateItem: DateItem) => void;
     handleConfirmClick: () => void;
     startCalendarPrevYear: () => void;
@@ -1193,7 +1096,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     endCalendarNextMonth: () => void;
     endCalendarNextYear: () => void;
     mergedIsDateDisabled: (ts: number) => boolean;
-    changeStartEndTime: (startTime: number, endTime: number, source: 'shortcutPreview' | 'wipPreview' | 'done') => void;
+    changeStartEndTime: (startTime: number, endTime: number, source: "shortcutPreview" | "wipPreview" | "done") => void;
     ranges: import("vue").Ref<Record<string, [number, number]> | undefined>;
     startCalendarMonth: import("vue").ComputedRef<string>;
     startCalendarYear: import("vue").ComputedRef<string>;

package/es/date-picker/src/panel/use-dual-calendar.mjs

@@ -1,9 +1,9 @@
-import { inject, computed, watch, ref } from 'vue';
-import { addMonths, format, getYear, getMonth, startOfMonth, isValid, startOfSecond, startOfDay, set, getDate, getTime, startOfQuarter } from "date-fns/esm/index.js";
-import { dateArray, strictParse, yearArray, monthArray, getDefaultTime, pluckValueFromRange, quarterArray } from "../utils.mjs";
-import { usePanelCommon, usePanelCommonProps } from "./use-panel-common.mjs";
+import { computed, inject, ref, watch } from 'vue';
+import { addMonths, format, getDate, getMonth, getTime, getYear, isValid, set, startOfDay, startOfMonth, startOfQuarter, startOfSecond } from 'date-fns';
+import { dateArray, getDefaultTime, monthArray, pluckValueFromRange, quarterArray, strictParse, yearArray } from "../utils.mjs";
 import { datePickerInjectionKey } from "../interface.mjs";
-import { MONTH_ITEM_HEIGHT, START_YEAR } from "../config.mjs";
+import { MONTH_ITEM_HEIGHT } from "../config.mjs";
+import { usePanelCommon, usePanelCommonProps } from "./use-panel-common.mjs";
 const useDualCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps), {
   defaultCalendarStartTime: Number,
   defaultCalendarEndTime: Number,
@@ -13,7 +13,6 @@ const useDualCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps
     default: () => ['clear', 'confirm']
   }
 });
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useDualCalendar(props, type) {
   var _a, _b;
   const {
@@ -39,8 +38,8 @@ function useDualCalendar(props, type) {
     datePickerSlots,
     monthFormatRef,
     yearFormatRef,
-    quarterFormatRef
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    quarterFormatRef,
+    yearRangeRef
   } = inject(datePickerInjectionKey);
   const validation = {
     isDateDisabled: isDateDisabledRef,
@@ -135,12 +134,12 @@ function useDualCalendar(props, type) {
   const startYearArrayRef = computed(() => {
     return yearArray(pluckValueFromRange(props.value, 'start'), nowRef.value, {
       yearFormat: yearFormatRef.value
-    });
+    }, yearRangeRef);
   });
   const endYearArrayRef = computed(() => {
     return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value, {
       yearFormat: yearFormatRef.value
-    });
+    }, yearRangeRef);
   });
   const startQuarterArrayRef = computed(() => {
     const startValue = pluckValueFromRange(props.value, 'start');
@@ -522,7 +521,7 @@ function useDualCalendar(props, type) {
         });
       }
       if (startYearVlRef.value) {
-        const yearIndex = (!Array.isArray(mergedValue) ? getYear(Date.now()) : getYear(mergedValue[0])) - START_YEAR;
+        const yearIndex = (!Array.isArray(mergedValue) ? getYear(Date.now()) : getYear(mergedValue[0])) - yearRangeRef.value[0];
         startYearVlRef.value.scrollTo({
           index: yearIndex,
           debounce: false
@@ -539,7 +538,7 @@ function useDualCalendar(props, type) {
         });
       }
       if (endYearVlRef.value) {
-        const yearIndex = (!Array.isArray(mergedValue) ? getYear(Date.now()) : getYear(mergedValue[1])) - START_YEAR;
+        const yearIndex = (!Array.isArray(mergedValue) ? getYear(Date.now()) : getYear(mergedValue[1])) - yearRangeRef.value[0];
         endYearVlRef.value.scrollTo({
           index: yearIndex,
           debounce: false