Daterangepicker limit start year

docs/pages/components/date-picker/en-US/index.md

@@ -137,7 +137,8 @@ Learn more in [Accessibility](/guide/accessibility).
 | hideMinutes           | (minute:number, date:Date) => boolean                           | Hidden minutes                                                                       |
 | hideSeconds           | (second:number, date:Date) => boolean                           | Hidden seconds                                                                       |
 | isoWeek               | boolean                                                         | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day |
-| limitEndYear          | number `(1000)`                                                 | Set the lower limit of the available year relative to the current selection date     |
+| limitEndYear          | number `(1000)`                                                 | Set the upper limit of the available year relative to the current selection date     |
+| limitStartYear        | number                                                          | Set the lower limit of the available year relative to the current selection date     |
 | locale                | [CalendarLocaleType](/guide/i18n/#calendar)                     | Locale text                                                                          |
 | onChange              | (date: Date) => void                                            | Callback fired when value changed                                                    |
 | onChangeCalendarDate  | (date: Date, event) => void                                     | Callback function that changes the calendar date.                                    |

docs/pages/components/date-range-picker/en-US/index.md

@@ -180,7 +180,8 @@ Learn more in [Accessibility](/guide/accessibility).
 | format               | string `('yyyy-MM-dd')`                                                          | Format date [refer to date-fns format](https://date-fns.org/v2.24.0/docs/format)                 |
 | hoverRange           | unions: 'week', 'month' or (date: Date) => [ValueType](#code-ts-value-type-code) | The date range that will be selected when you click on the date                                  |
 | isoWeek              | boolean                                                                          | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day             |
-| limitEndYear         | number `(1000)`                                                                  | Sets the lower limit of the available year relative to the current selection date                |
+| limitEndYear         | number `(1000)`                                                                  | Sets the upper limit of the available year relative to the current selection date                |
+| limitStartYear       | number                                                                           | Sets the lower limit of the available year relative to the current selection date                |
 | locale               | [CalendarLocaleType](/guide/i18n/#calendar)                                      | Locale text                                                                                      |
 | onChange             | (value: [ValueType](#code-ts-value-type-code)) => void                           | Callback fired when value changed                                                                |
 | onClean              | (event) => void                                                                  | Callback fired when value clean                                                                  |

src/Calendar/CalendarContainer.tsx

@@ -72,6 +72,9 @@ export interface CalendarProps
   /** Limit showing how many years in the future */
   limitEndYear?: number;
 
+  /** Limit showing how many years in the past */
+  limitStartYear?: number;
+
   /** Custom locale */
   locale: CalendarLocale;
 
@@ -118,6 +121,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
       hoverRangeValue,
       isoWeek = false,
       limitEndYear,
+      limitStartYear,
       locale,
       onChangeMonth,
       onChangeTime,
@@ -274,6 +278,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
             <MonthDropdown
               show={showMonth}
               limitEndYear={limitEndYear}
+              limitStartYear={limitStartYear}
               disabledMonth={isDisabledDate}
             />
           )}
@@ -310,6 +315,7 @@ CalendarContainer.propTypes = {
   hideSeconds: PropTypes.func,
   isoWeek: PropTypes.bool,
   limitEndYear: PropTypes.number,
+  limitStartYear: PropTypes.number,
   locale: PropTypes.object,
   onChangeMonth: PropTypes.func,
   onChangeTime: PropTypes.func,

src/Calendar/MonthDropdown.tsx

@@ -70,7 +70,7 @@ const MonthDropdown: RsRefForwardingComponent<'div', MonthDropdownProps> = React
     const { date = new Date() } = useCalendarContext();
     const { prefix, merge, withClassPrefix } = useClassNames(classPrefix);
     const thisYear = DateUtils.getYear(new Date());
-    const startYear = limitStartYear ? thisYear - limitStartYear : 1900;
+    const startYear = limitStartYear ? thisYear - limitStartYear + 1 : 1900;
 
     const rowCount = useMemo(() => {
       const endYear = thisYear + limitEndYear;

src/Calendar/test/CalendarMonthDropdownSpec.tsx

@@ -3,6 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
 import sinon from 'sinon';
 import MonthDropdown from '../MonthDropdown';
 import CalendarContext from '../CalendarContext';
+import { DateUtils } from '../../utils';
 
 describe('Calendar-MonthDropdown', () => {
   it('Should output year and month ', () => {
@@ -23,6 +24,72 @@ describe('Calendar-MonthDropdown', () => {
     expect(getAllByRole('gridcell', { hidden: true })[0].childNodes).to.be.lengthOf(12);
   });
 
+  it('Should output year and month of current year', () => {
+    const { getAllByRole } = render(
+      <CalendarContext.Provider
+        value={{
+          date: new Date(),
+          locale: {},
+          isoWeek: false
+        }}
+      >
+        <MonthDropdown show limitStartYear={1} limitEndYear={1} />
+      </CalendarContext.Provider>
+    );
+    const currentYear = DateUtils.getYear(new Date());
+    expect(getAllByRole('row', { hidden: true })).to.be.lengthOf(1);
+    expect(getAllByRole('rowheader', { hidden: true })[0].innerText).to.be.eq(
+      currentYear.toString()
+    );
+  });
+
+  it('Should output year and month of two previous years', () => {
+    const { getAllByRole } = render(
+      <CalendarContext.Provider
+        value={{
+          date: new Date(),
+          locale: {},
+          isoWeek: false
+        }}
+      >
+        <MonthDropdown show limitStartYear={3} limitEndYear={0} />
+      </CalendarContext.Provider>
+    );
+    const currentYear = DateUtils.getYear(new Date());
+    expect(getAllByRole('row', { hidden: true })).to.be.lengthOf(2);
+    expect(getAllByRole('rowheader', { hidden: true })[0].innerText).to.be.eq(
+      (currentYear - 2).toString()
+    );
+    expect(getAllByRole('rowheader', { hidden: true })[1].innerText).to.be.eq(
+      (currentYear - 1).toString()
+    );
+  });
+
+  it('Should output a range of year and month between previous and next year', () => {
+    const { getAllByRole } = render(
+      <CalendarContext.Provider
+        value={{
+          date: new Date(),
+          locale: {},
+          isoWeek: false
+        }}
+      >
+        <MonthDropdown show limitStartYear={2} limitEndYear={2} />
+      </CalendarContext.Provider>
+    );
+    const currentYear = DateUtils.getYear(new Date());
+    const nextYear = currentYear + 1;
+    const previousYear = currentYear - 1;
+    expect(getAllByRole('row', { hidden: true })).to.be.lengthOf(3);
+    expect(getAllByRole('rowheader', { hidden: true })[0].innerText).to.be.eq(
+      previousYear.toString()
+    );
+    expect(getAllByRole('rowheader', { hidden: true })[1].innerText).to.be.eq(
+      currentYear.toString()
+    );
+    expect(getAllByRole('rowheader', { hidden: true })[2].innerText).to.be.eq(nextYear.toString());
+  });
+
   it('Should call `onChangeMonth` callback ', () => {
     const onChangeMonthSpy = sinon.spy();
     const { getByRole } = render(

src/DatePicker/DatePicker.tsx

@@ -69,9 +69,12 @@ export interface DatePickerProps
   /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
   isoWeek?: boolean;
 
-  /** Set the lower limit of the available year relative to the current selection date */
+  /** Set the upper limit of the available year relative to the current selection date */
   limitEndYear?: number;
 
+  /** Set the lower limit of the available year relative to the current selection date */
+  limitStartYear?: number;
+
   /** Whether to show week numbers */
   showWeekNumbers?: boolean;
 
@@ -186,6 +189,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
       format: formatStr = 'yyyy-MM-dd',
       isoWeek,
       limitEndYear = 1000,
+      limitStartYear,
       locale: overrideLocale,
       menuClassName,
       appearance = 'default',
@@ -547,6 +551,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa
         disabledMinutes={shouldDisableMinute ?? DEPRECATED_disabledMinutes}
         disabledSeconds={shouldDisableSecond ?? DEPRECATED_disabledSeconds}
         limitEndYear={limitEndYear}
+        limitStartYear={limitStartYear}
         format={formatStr}
         isoWeek={isoWeek}
         calendarDate={calendarDate}
@@ -714,6 +719,7 @@ DatePicker.propTypes = {
   hideSeconds: PropTypes.func,
   isoWeek: PropTypes.bool,
   limitEndYear: PropTypes.number,
+  limitStartYear: PropTypes.number,
   onChange: PropTypes.func,
   onChangeCalendarDate: PropTypes.func,
   onNextMonth: PropTypes.func,

src/DateRangePicker/Calendar.tsx

@@ -28,6 +28,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
   index: number;
   isoWeek?: boolean;
   limitEndYear?: number;
+  limitStartYear?: number;
   locale?: DatePickerLocale;
   onChangeCalendarMonth?: (index: number, date: Date) => void;
   onChangeCalendarTime?: (index: number, date: Date) => void;
@@ -47,6 +48,7 @@ const Calendar: RsRefForwardingComponent<'div', CalendarProps> = React.forwardRe
       disabledDate,
       index = 0,
       limitEndYear,
+      limitStartYear,
       onChangeCalendarMonth,
       onChangeCalendarTime,
       onToggleMeridian,
@@ -120,6 +122,7 @@ const Calendar: RsRefForwardingComponent<'div', CalendarProps> = React.forwardRe
         disabledDate={disabledMonth}
         index={index}
         limitEndYear={limitEndYear}
+        limitStartYear={limitStartYear}
         onChangeMonth={handleChangeMonth}
         onChangeTime={handleChangeTime}
         onMoveBackward={handleMoveBackward}
@@ -142,6 +145,7 @@ Calendar.propTypes = {
   format: PropTypes.string,
   isoWeek: PropTypes.bool,
   limitEndYear: PropTypes.number,
+  limitStartYear: PropTypes.number,
   classPrefix: PropTypes.string,
   disabledDate: PropTypes.func,
   onSelect: PropTypes.func,

src/DateRangePicker/DateRangePicker.tsx

@@ -80,9 +80,12 @@ export interface DateRangePickerProps
   /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
   isoWeek?: boolean;
 
-  /** Set the lower limit of the available year relative to the current selection date */
+  /** Set the upper limit of the available year relative to the current selection date */
   limitEndYear?: number;
 
+  /** Set the lower limit of the available year relative to the current selection date */
+  limitStartYear?: number;
+
   /** Whether to show week numbers */
   showWeekNumbers?: boolean;
 
@@ -170,6 +173,7 @@ const DateRangePicker: DateRangePicker = React.forwardRef((props: DateRangePicke
     hoverRange,
     isoWeek = false,
     limitEndYear = 1000,
+    limitStartYear,
     locale: overrideLocale,
     menuClassName,
     menuStyle,
@@ -790,6 +794,7 @@ const DateRangePicker: DateRangePicker = React.forwardRef((props: DateRangePicke
       hoverRangeValue: hoverDateRange ?? undefined,
       isoWeek,
       limitEndYear,
+      limitStartYear,
       locale,
       showWeekNumbers,
       value: selectedDates,
@@ -941,6 +946,7 @@ DateRangePicker.propTypes = {
   isoWeek: PropTypes.bool,
   oneTap: PropTypes.bool,
   limitEndYear: PropTypes.number,
+  limitStartYear: PropTypes.number,
   onChange: PropTypes.func,
   onOk: PropTypes.func,
   disabledDate: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableDate" property instead.'),