chore: optimize disabledDate logic

examples/disabledDate.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { Moment } from 'moment';
+import moment from 'moment';
+import Picker from '../src/Picker';
+import momentGenerateConfig from '../src/generate/moment';
+import enUS from '../src/locale/en_US';
+import '../assets/index.less';
+
+export default () => {
+  const [value, setValue] = React.useState<Moment | null>(undefined);
+
+  const onSelect = (newValue: Moment) => {
+    console.log('Select:', newValue);
+  };
+
+  const onChange = (newValue: Moment | null, formatString?: string) => {
+    console.log('Change:', newValue, formatString);
+    setValue(newValue);
+  };
+
+  function disabledDateBeforeToday(current: Moment) {
+    return current <= moment().endOf('day');
+  }
+
+  function disabledDateAfterToday(current: Moment) {
+    return current >= moment().endOf('day');
+  }
+
+  function disabledDateAfterTodayAndBeforeLastYear(current) {
+    return current >= moment().startOf('day') || current < moment().subtract(1, 'years');
+  }
+
+  const sharedProps = {
+    generateConfig: momentGenerateConfig,
+    value,
+    onSelect,
+    onChange,
+  };
+
+  return (
+    <div style={{ paddingBottom: '20px' }}>
+      <h1>Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}</h1>
+      <h2>Date Mode</h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <div style={{ margin: '0 8px' }}>
+          <h3>Before Today</h3>
+          <Picker<Moment> {...sharedProps} disabledDate={disabledDateBeforeToday} locale={enUS} />
+        </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>After Today</h3>
+          <Picker<Moment> {...sharedProps} disabledDate={disabledDateAfterToday} locale={enUS} />
+        </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>After Today or Before last year</h3>
+          <Picker<Moment>
+            {...sharedProps}
+            disabledDate={disabledDateAfterTodayAndBeforeLastYear}
+            locale={enUS}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/PanelContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { OnSelect } from './interface';
+import type { OnSelect, PanelMode } from './interface';
 
 export type ContextOperationRefProps = {
   onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
@@ -18,6 +18,7 @@ export type PanelContextProps = {
   onSelect?: OnSelect<any>;
   hideRanges?: boolean;
   open?: boolean;
+  mode?: PanelMode;
 
   /** Only used for TimePicker and this is a deprecated prop */
   defaultOpenValue?: any;

src/Picker.tsx

@@ -358,6 +358,12 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     };
   }
 
+  const [hoverValue, onEnter, onLeave] = useHoverValue(text, {
+    formatList,
+    generateConfig,
+    locale,
+  });
+
   // ============================= Panel =============================
   const panelProps = {
     // Remove `picker` & `format` here since TimePicker is little different with other panel
@@ -384,6 +390,11 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
         setSelectedValue(date);
       }}
       direction={direction}
+      onPanelChange={(viewDate, mode) => {
+        const { onPanelChange } = panelProps;
+        onLeave(true);
+        onPanelChange?.(viewDate, mode);
+      }}
     />
   );
 
@@ -446,12 +457,6 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   };
   const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
 
-  const [hoverValue, onEnter, onLeave] = useHoverValue(text, {
-    formatList,
-    generateConfig,
-    locale,
-  });
-
   return (
     <PanelContext.Provider
       value={{

src/PickerPanel.tsx

@@ -344,7 +344,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     onViewDateChange: setViewDate,
     sourceMode,
     onPanelChange: onInternalPanelChange,
-    disabledDate: mergedMode !== 'decade' ? disabledDate : undefined,
+    disabledDate,
   };
   delete pickerProps.onChange;
   delete pickerProps.onSelect;
@@ -518,6 +518,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     <PanelContext.Provider
       value={{
         ...panelContext,
+        mode: mergedMode,
         hideHeader: 'hideHeader' in props ? hideHeader : panelContext.hideHeader,
         hidePrevBtn: inRange && panelPosition === 'right',
         hideNextBtn: inRange && panelPosition === 'left',

src/RangePicker.tsx

@@ -815,6 +815,13 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           locale={locale}
           tabIndex={-1}
           onPanelChange={(date, newMode) => {
+            // clear hover value when panel change
+            if (mergedActivePickerIndex === 0) {
+              onStartLeave(true);
+            }
+            if (mergedActivePickerIndex === 1) {
+              onEndLeave(true);
+            }
             triggerModesChange(
               updateValues(mergedModes, newMode, mergedActivePickerIndex),
               updateValues(selectedValue, date, mergedActivePickerIndex),

src/panels/DecadePanel/DecadeBody.tsx

@@ -16,7 +16,7 @@ export type YearBodyProps<DateType> = {
 
 function DecadeBody<DateType>(props: YearBodyProps<DateType>) {
   const DECADE_UNIT_DIFF_DES = DECADE_UNIT_DIFF - 1;
-  const { prefixCls, viewDate, generateConfig, disabledDate } = props;
+  const { prefixCls, viewDate, generateConfig } = props;
 
   const cellPrefixCls = `${prefixCls}-cell`;
 
@@ -35,13 +35,10 @@ function DecadeBody<DateType>(props: YearBodyProps<DateType>) {
   );
 
   const getCellClassName = (date: DateType) => {
-    const disabled = disabledDate && disabledDate(date);
-
     const startDecadeNumber = generateConfig.getYear(date);
     const endDecadeNumber = startDecadeNumber + DECADE_UNIT_DIFF_DES;
 
     return {
-      [`${cellPrefixCls}-disabled`]: disabled,
       [`${cellPrefixCls}-in-view`]:
         startDecadeYear <= startDecadeNumber && endDecadeNumber <= endDecadeYear,
       [`${cellPrefixCls}-selected`]: startDecadeNumber === decadeYearNumber,

src/panels/PanelBody.tsx

@@ -4,6 +4,7 @@ import PanelContext from '../PanelContext';
 import type { GenerateConfig } from '../generate';
 import { getLastDay } from '../utils/timeUtil';
 import type { PanelMode } from '../interface';
+import { getCellDateDisabled } from '../utils/dateUtil';
 
 export type PanelBodyProps<DateType> = {
   prefixCls: string;
@@ -46,7 +47,7 @@ export default function PanelBody<DateType>({
   titleCell,
   headerCells,
 }: PanelBodyProps<DateType>) {
-  const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
+  const { onDateMouseEnter, onDateMouseLeave, mode } = React.useContext(PanelContext);
 
   const cellPrefixCls = `${prefixCls}-cell`;
 
@@ -60,7 +61,12 @@ export default function PanelBody<DateType>({
     for (let j = 0; j < colNum; j += 1) {
       const offset = i * colNum + j;
       const currentDate = getCellDate(baseDate, offset);
-      const disabled = disabledDate && disabledDate(currentDate);
+      const disabled = getCellDateDisabled({
+        cellDate: currentDate,
+        mode,
+        disabledDate,
+        generateConfig,
+      });
 
       if (j === 0) {
         rowStartDate = currentDate;
@@ -78,8 +84,11 @@ export default function PanelBody<DateType>({
           title={title}
           className={classNames(cellPrefixCls, {
             [`${cellPrefixCls}-disabled`]: disabled,
-            [`${cellPrefixCls}-start`]: getCellText(currentDate) === 1 || picker === 'year' && Number(title) % 10 === 0,
-            [`${cellPrefixCls}-end`]: title === getLastDay(generateConfig, currentDate) || picker === 'year' && Number(title) % 10 === 9,
+            [`${cellPrefixCls}-start`]:
+              getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0),
+            [`${cellPrefixCls}-end`]:
+              title === getLastDay(generateConfig, currentDate) ||
+              (picker === 'year' && Number(title) % 10 === 9),
             ...getCellClassName(currentDate),
           })}
           onClick={() => {

src/utils/dateUtil.ts

@@ -1,5 +1,6 @@
+import { DECADE_UNIT_DIFF } from '../panels/DecadePanel/index';
+import type { PanelMode, NullableDateType, PickerMode, Locale, CustomFormat } from '../interface';
 import type { GenerateConfig } from '../generate';
-import type { NullableDateType, PickerMode, Locale, CustomFormat } from '../interface';
 
 export const WEEK_DAY_COUNT = 7;
 
@@ -228,3 +229,99 @@ export function parseValue<DateType>(
 
   return generateConfig.locale.parse(locale.locale, value, formatList as string[]);
 }
+
+export function getCellDateDisabled<DateType>({
+  cellDate,
+  mode,
+  disabledDate,
+  generateConfig,
+}: {
+  cellDate: DateType;
+  mode: PanelMode;
+  generateConfig: GenerateConfig<DateType>;
+  disabledDate?: (date: DateType) => boolean;
+}): boolean {
+  if (!disabledDate) return false;
+  // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
+  switch (mode) {
+    case 'date':
+    case 'week': {
+      return disabledDate(cellDate);
+    }
+    case 'month': {
+      const startDate = 1;
+      const endDate = generateConfig.getDate(generateConfig.getEndDate(cellDate));
+      let currentDate = startDate;
+      while (currentDate <= endDate) {
+        const date = generateConfig.setDate(cellDate, currentDate);
+        if (!disabledDate(date)) {
+          return false;
+        }
+        currentDate += 1;
+      }
+      return true;
+    }
+    case 'quarter': {
+      const startMonth = Math.floor(generateConfig.getMonth(cellDate) / 3) * 3;
+      const endMonth = startMonth + 2;
+      let currentMonth = startMonth;
+      while (currentMonth <= endMonth) {
+        const date = generateConfig.setMonth(cellDate, currentMonth);
+        if (
+          !getCellDateDisabled({
+            cellDate: date,
+            mode: 'month',
+            generateConfig,
+            disabledDate,
+          })
+        ) {
+          return false;
+        }
+        currentMonth += 1;
+      }
+      return true;
+    }
+    case 'year': {
+      const startMonth = 0;
+      const endMonth = 11;
+      let currentMonth = startMonth;
+      while (currentMonth <= endMonth) {
+        const date = generateConfig.setMonth(cellDate, currentMonth);
+        if (
+          !getCellDateDisabled({
+            cellDate: date,
+            mode: 'month',
+            generateConfig,
+            disabledDate,
+          })
+        ) {
+          return false;
+        }
+        currentMonth += 1;
+      }
+      return true;
+    }
+    case 'decade': {
+      const year = generateConfig.getYear(cellDate);
+      const startYear = Math.floor(year / DECADE_UNIT_DIFF) * DECADE_UNIT_DIFF;
+      const endYear = startYear + DECADE_UNIT_DIFF - 1;
+      let currentYear = startYear;
+      while (currentYear <= endYear) {
+        const date = generateConfig.setYear(cellDate, currentYear);
+        if (
+          !getCellDateDisabled({
+            cellDate: date,
+            mode: 'year',
+            generateConfig,
+            disabledDate,
+          })
+        ) {
+          return false;
+        }
+        currentYear += 1;
+      }
+      return true;
+    }
+  }
+  return false;
+}

tests/picker.spec.tsx

@@ -4,8 +4,8 @@ import { act } from 'react-dom/test-utils';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
-import { Moment } from 'moment';
-import { PanelMode, PickerMode } from '../src/interface';
+import type { Moment } from 'moment';
+import type { PanelMode, PickerMode } from '../src/interface';
 import { mount, getMoment, isSame, MomentPicker } from './util/commonUtil';
 
 describe('Picker.Basic', () => {
@@ -879,7 +879,7 @@ describe('Picker.Basic', () => {
 
     it('should not open if prevent default is called', () => {
       const keyDown = jest.fn(({ which }, preventDefault) => {
-        if(which === 13) preventDefault();
+        if (which === 13) preventDefault();
       });
       const wrapper = mount(<MomentPicker onKeyDown={keyDown} />);
 
@@ -892,5 +892,5 @@ describe('Picker.Basic', () => {
       wrapper.keyDown(KeyCode.ENTER);
       expect(wrapper.isOpen()).toBeFalsy();
     });
-  })
+  });
 });