fix: Update the display logic of months in different years under type monthRange (#2608)

* fix: Update the display logic of months in different years under type monthRange

* fix: Update the display logic of months in different years under type monthRange

* test: update e2e test

cypress/e2e/datePicker.spec.js

@@ -817,14 +817,13 @@ describe('DatePicker', () => {
         cy.get('.semi-scrolllist-item-sel').eq(0).contains(`${year}年`);
         cy.get('.semi-scrolllist-item-sel').eq(1).contains(`${month}月`);
 
-        // TODO: need to fix here, When it is December, the New Year's Eve, the assertion here does not hold
-        // cy.get('body').click('right');
-        // cy.get('.semi-datepicker .semi-input').eq(-1).click();
-        // cy.get('.semi-datepicker .semi-input-clearbtn').click();
-        // cy.get('.semi-scrolllist-item-sel').eq(0).contains(`${year}年`);
-        // cy.get('.semi-scrolllist-item-sel').eq(2).contains(`${year}年`);
-        // cy.get('.semi-scrolllist-item-sel').eq(1).contains(`${month}月`);
-        // cy.get('.semi-scrolllist-item-sel').eq(3).contains(`${month+1}月`);
+        cy.get('body').click('right');
+        cy.get('.semi-datepicker .semi-input').eq(-1).click();
+        cy.get('.semi-datepicker .semi-input-clearbtn').click();
+        cy.get('.semi-scrolllist-item-sel').eq(0).contains(`${year}年`);
+        cy.get('.semi-scrolllist-item-sel').eq(2).contains(`${month+1 <= 12 ? year : year + 1}年`);
+        cy.get('.semi-scrolllist-item-sel').eq(1).contains(`${month}月`);
+        cy.get('.semi-scrolllist-item-sel').eq(3).contains(`${month+1 <= 12 ? month+1 : 1}月`);
     });
 
     it('test split first inset input + dateTimeRange', () => {

packages/semi-foundation/datePicker/_utils/getYearAndMonth.ts

@@ -0,0 +1,12 @@
+export default function getYearAndMonth(year: { left: number; right: number }, month: { left: number; right: number }) {
+    const nowYear = new Date().getFullYear();
+    const nowMonth = new Date().getMonth();
+
+    const rightMonth = month.right || (nowMonth + 2);
+    const rightYear = year.right || (rightMonth <= 12 ? nowYear : nowYear + 1);
+
+    return {
+        year: { left: year.left || nowYear, right: rightYear },
+        month: { left: month.left || nowMonth + 1, right: rightMonth <= 12 ? rightMonth : 1 },
+    };
+}

packages/semi-foundation/datePicker/_utils/index.ts

@@ -11,6 +11,7 @@ import getDefaultFormatToken from './getDefaultFormatToken';
 import getYears from './getYears';
 import getMonthsInYear from './getMonthsInYear';
 import getFullDateOffset from './getFullDateOffset';
+import getYearAndMonth from './getYearAndMonth';
 
 export {
     isAfter,
@@ -24,5 +25,6 @@ export {
     getDefaultFormatToken,
     getYears,
     getMonthsInYear,
-    getFullDateOffset
+    getFullDateOffset,
+    getYearAndMonth
 };

packages/semi-ui/datePicker/yearAndMonth.tsx

@@ -4,7 +4,7 @@ import YearAndMonthFoundation, { MonthScrollItem, YearAndMonthAdapter, YearAndMo
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import ScrollList from '../scrollList/index';
 import ScrollItem from '../scrollList/scrollItem';
-import { getYears } from '@douyinfe/semi-foundation/datePicker/_utils/index';
+import { getYearAndMonth, getYears } from '@douyinfe/semi-foundation/datePicker/_utils/index';
 
 import IconButton from '../iconButton';
 import { IconChevronLeft } from '@douyinfe/semi-icons';
@@ -63,6 +63,8 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
 
         let { currentYear, currentMonth } = props;
 
+        const { year, month } = getYearAndMonth(currentYear, currentMonth);
+
         this.state = {
             years: getYears(props.startYear, props.endYear).map(year => ({
                 value: year,
@@ -74,8 +76,8 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
                     value: idx + 1,
                     month: idx + 1,
                 })),
-            currentYear: { left: currentYear.left || now.getFullYear(), right: currentYear.right || now.getFullYear() },
-            currentMonth: { left: currentMonth.left || now.getMonth() + 1, right: currentMonth.right || now.getMonth() + 2 },
+            currentYear: year,
+            currentMonth: month,
         };
 
         this.yearRef = React.createRef();
@@ -112,15 +114,14 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
 
     static getDerivedStateFromProps(props: YearAndMonthProps, state: YearAndMonthState) {
         const willUpdateStates: Partial<YearAndMonthState> = {};
+        const { year, month } = getYearAndMonth(props.currentYear, props.currentMonth);
 
         if (!isEqual(props.currentYear, state.currentYear)) {
-            const nowYear = new Date().getFullYear();
-            willUpdateStates.currentYear = { left: props.currentYear.left || nowYear, right: props.currentYear.right || nowYear };
+            willUpdateStates.currentYear = year;
         }
 
         if (!isEqual(props.currentMonth, state.currentMonth)) {
-            const nowMonth = new Date().getMonth();
-            willUpdateStates.currentMonth = { left: props.currentMonth.left || nowMonth + 1, right: props.currentMonth.right || nowMonth + 2 };
+            willUpdateStates.currentMonth = month;
         }
 
         return willUpdateStates;