fix: hide bottom button when switch date interval in the head (#652)

* fix: hide bottom button when switch date interval in the head

* chore: add test case

---------

Co-authored-by: dujiaqi <[email protected]>

Author: Yuiai01

src/PickerPanel.tsx

@@ -11,6 +11,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import warning from 'rc-util/lib/warning';
 import * as React from 'react';
 import type { GenerateConfig } from './generate';
+import { useCellRender } from './hooks/useCellRender';
 import type {
   CellRender,
   Components,
@@ -39,7 +40,6 @@ import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil';
 import { PickerModeMap } from './utils/uiUtil';
-import { useCellRender } from './hooks/useCellRender';
 
 export type PickerPanelSharedProps<DateType> = {
   prefixCls?: string;
@@ -554,27 +554,32 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
 
   if (!hideRanges) {
     extraFooter = getExtraFooter(prefixCls, mergedMode, renderExtraFooter);
-    rangesNode = getRanges({
-      prefixCls,
-      components,
-      needConfirmButton,
-      okDisabled: !mergedValue || (disabledDate && disabledDate(mergedValue)),
-      locale,
-      showNow,
-      onNow: needConfirmButton && onNow,
-      onOk: () => {
-        if (mergedValue) {
-          triggerSelect(mergedValue, 'submit', true);
-          if (onOk) {
-            onOk(mergedValue);
+
+    // This content is not displayed when the header switches year and month
+    if (showTime && mergedMode !== 'date') {
+      rangesNode = null;
+    } else {
+      rangesNode = getRanges({
+        prefixCls,
+        components,
+        needConfirmButton,
+        okDisabled: !mergedValue || (disabledDate && disabledDate(mergedValue)),
+        locale,
+        showNow,
+        onNow: needConfirmButton && onNow,
+        onOk: () => {
+          if (mergedValue) {
+            triggerSelect(mergedValue, 'submit', true);
+            if (onOk) {
+              onOk(mergedValue);
+            }
           }
-        }
-      },
-    });
+        },
+      });
+    }
   }
 
   let todayNode: React.ReactNode;
-
   if (showToday && mergedMode === 'date' && picker === 'date' && !showTime) {
     const now = generateConfig.getNow();
     const todayCls = `${prefixCls}-today-btn`;

tests/panel.spec.tsx

@@ -252,6 +252,12 @@ describe('Picker.Panel', () => {
     expect(isSame(onSelect.mock.calls[2][0], '1990-09-20 10:03:07')).toBeTruthy();
   });
 
+  it('should hide bottom button when switch date interval in the head', () => {
+    render(<MomentPickerPanel showTime />);
+    fireEvent.click(document.querySelector('.rc-picker-year-btn'));
+    expect(document.querySelector('.rc-picker-ranges')).toBeFalsy();
+  });
+
   it('DatePicker has defaultValue and showTime.defaultValue ', () => {
     const onSelect = jest.fn();
     render(
@@ -641,8 +647,12 @@ describe('Picker.Panel', () => {
           )}
         />,
       );
-      expect(errSpy).toHaveBeenCalledWith("Warning: 'dateRender' is deprecated. Please use 'cellRender' instead.");
-      expect(errSpy).toHaveBeenCalledWith("Warning: 'monthCellRender' is deprecated. Please use 'cellRender' instead.");
+      expect(errSpy).toHaveBeenCalledWith(
+        "Warning: 'dateRender' is deprecated. Please use 'cellRender' instead.",
+      );
+      expect(errSpy).toHaveBeenCalledWith(
+        "Warning: 'monthCellRender' is deprecated. Please use 'cellRender' instead.",
+      );
 
       errSpy.mockRestore();
     });