Add range info to disabledDate

src/PickerInput/RangePicker.tsx

@@ -39,6 +39,7 @@ import useRangePickerValue from './hooks/useRangePickerValue';
 import useRangeValue, { useInnerValue } from './hooks/useRangeValue';
 import useRangeValueChange, { type RangeValueChangeSource } from './hooks/useRangeValueChange';
 import useShowNow from './hooks/useShowNow';
+import type { InvalidateDateInfo } from './hooks/useInvalidate';
 import Popup, { type PopupShowTimeConfig } from './Popup';
 import RangeSelector, {
   type RangeSelectorRef,
@@ -292,6 +293,17 @@ function RangePicker<DateType extends object = any>(
     },
   );
 
+  // ======================= Invalidate ======================
+  const isRangeInvalidateDate = useEvent((date: DateType, info?: InvalidateDateInfo<DateType>) => {
+    const infoActiveIndex = info?.activeIndex ?? activeIndex;
+
+    return isInvalidateDate(date, {
+      ...(info || {}),
+      activeIndex: infoActiveIndex,
+      range: getActiveRange(infoActiveIndex),
+    });
+  });
+
   // ======================== Value =========================
   const [
     /** Trigger `onChange` by check `disabledDate` */
@@ -308,7 +320,7 @@ function RangePicker<DateType extends object = any>(
     triggerCalendarChange,
     disabled,
     formatList,
-    isInvalidateDate,
+    isRangeInvalidateDate,
   );
 
   const triggerFieldCalendarChange = useEvent((index: number, date: DateType) => {
@@ -407,7 +419,7 @@ function RangePicker<DateType extends object = any>(
   // ======================= Validate =======================
   const [submitInvalidates, onSelectorInvalid] = useFieldsInvalidate(
     calendarValue,
-    isInvalidateDate,
+    isRangeInvalidateDate,
     allowEmpty,
   );
 
@@ -585,7 +597,7 @@ function RangePicker<DateType extends object = any>(
 
   // >>> invalid
   const isPopupInvalidateDate = useEvent((date: DateType) => {
-    return isInvalidateDate(date, {
+    return isRangeInvalidateDate(date, {
       activeIndex,
     });
   });

src/PickerInput/hooks/useInvalidate.ts

@@ -1,12 +1,18 @@
 import { useEvent } from '@rc-component/util';
 import type { GenerateConfig } from '../../generate';
 import type {
+  BaseInfo,
   PanelMode,
   RangeTimeProps,
   SharedPickerProps,
   SharedTimeProps,
 } from '../../interface';
 
+export type InvalidateDateInfo<DateType = any> = BaseInfo & {
+  from?: DateType;
+  activeIndex: number;
+};
+
 /**
  * Check if provided date is valid for the `disabledDate` & `showTime.disabledTime`.
  */
@@ -17,62 +23,60 @@ export default function useInvalidate<DateType extends object = any>(
   showTime?: SharedTimeProps<DateType> | RangeTimeProps<DateType>,
 ) {
   // Check disabled date
-  const isInvalidate = useEvent(
-    (date: DateType, info?: { from?: DateType; activeIndex: number }) => {
-      const outsideInfo = { type: picker, ...info };
-      delete outsideInfo.activeIndex;
+  const isInvalidate = useEvent((date: DateType, info?: InvalidateDateInfo<DateType>) => {
+    const outsideInfo = { type: picker, ...info };
+    delete outsideInfo.activeIndex;
 
-      if (
-        // Date object is invalid
-        !generateConfig.isValidate(date) ||
-        // Date is disabled by `disabledDate`
-        (disabledDate && disabledDate(date, outsideInfo))
-      ) {
-        return true;
-      }
+    if (
+      // Date object is invalid
+      !generateConfig.isValidate(date) ||
+      // Date is disabled by `disabledDate`
+      (disabledDate && disabledDate(date, outsideInfo))
+    ) {
+      return true;
+    }
 
-      if ((picker === 'date' || picker === 'time') && showTime) {
-        const range = info && info.activeIndex === 1 ? 'end' : 'start';
-        const { disabledHours, disabledMinutes, disabledSeconds, disabledMilliseconds } =
-          showTime.disabledTime?.(date, range, { from: outsideInfo.from }) || {};
+    if ((picker === 'date' || picker === 'time') && showTime) {
+      const range = info && info.activeIndex === 1 ? 'end' : 'start';
+      const { disabledHours, disabledMinutes, disabledSeconds, disabledMilliseconds } =
+        showTime.disabledTime?.(date, range, { from: outsideInfo.from }) || {};
 
-        const {
-          disabledHours: legacyDisabledHours,
-          disabledMinutes: legacyDisabledMinutes,
-          disabledSeconds: legacyDisabledSeconds,
-        } = showTime;
+      const {
+        disabledHours: legacyDisabledHours,
+        disabledMinutes: legacyDisabledMinutes,
+        disabledSeconds: legacyDisabledSeconds,
+      } = showTime;
 
-        const mergedDisabledHours = disabledHours || legacyDisabledHours;
-        const mergedDisabledMinutes = disabledMinutes || legacyDisabledMinutes;
-        const mergedDisabledSeconds = disabledSeconds || legacyDisabledSeconds;
+      const mergedDisabledHours = disabledHours || legacyDisabledHours;
+      const mergedDisabledMinutes = disabledMinutes || legacyDisabledMinutes;
+      const mergedDisabledSeconds = disabledSeconds || legacyDisabledSeconds;
 
-        const hour = generateConfig.getHour(date);
-        const minute = generateConfig.getMinute(date);
-        const second = generateConfig.getSecond(date);
-        const millisecond = generateConfig.getMillisecond(date);
+      const hour = generateConfig.getHour(date);
+      const minute = generateConfig.getMinute(date);
+      const second = generateConfig.getSecond(date);
+      const millisecond = generateConfig.getMillisecond(date);
 
-        if (mergedDisabledHours && mergedDisabledHours().includes(hour)) {
-          return true;
-        }
+      if (mergedDisabledHours && mergedDisabledHours().includes(hour)) {
+        return true;
+      }
 
-        if (mergedDisabledMinutes && mergedDisabledMinutes(hour).includes(minute)) {
-          return true;
-        }
+      if (mergedDisabledMinutes && mergedDisabledMinutes(hour).includes(minute)) {
+        return true;
+      }
 
-        if (mergedDisabledSeconds && mergedDisabledSeconds(hour, minute).includes(second)) {
-          return true;
-        }
+      if (mergedDisabledSeconds && mergedDisabledSeconds(hour, minute).includes(second)) {
+        return true;
+      }
 
-        if (
-          disabledMilliseconds &&
-          disabledMilliseconds(hour, minute, second).includes(millisecond)
-        ) {
-          return true;
-        }
+      if (
+        disabledMilliseconds &&
+        disabledMilliseconds(hour, minute, second).includes(millisecond)
+      ) {
+        return true;
       }
-      return false;
-    },
-  );
+    }
+    return false;
+  });
 
   return isInvalidate;
 }

src/PickerInput/hooks/useRangeDisabledDate.ts

@@ -19,10 +19,12 @@ export default function useRangeDisabledDate<DateType extends object = any>(
 ) {
   const rangeDisabledDate: DisabledDate<DateType> = (date, info) => {
     const [start, end] = values;
+    const range: 'start' | 'end' = activeIndex === 1 ? 'end' : 'start';
 
     const mergedInfo = {
       ...info,
       from: getFromDate(values, triggeredFields, activeIndex),
+      range,
     };
 
     // ============================ Disabled ============================

src/PickerInput/hooks/useRangeValue.ts

@@ -7,6 +7,7 @@ import { formatValue, isSame, isSameTimestamp } from '../../utils/dateUtil';
 import { fillIndex } from '../../utils/miscUtil';
 import type { RangePickerProps } from '../RangePicker';
 import type { ReplacedPickerProps } from '../SinglePicker';
+import type { InvalidateDateInfo } from './useInvalidate';
 
 const EMPTY_VALUE: any[] = [];
 
@@ -172,7 +173,7 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
   triggerCalendarChange: TriggerCalendarChange<ValueType>,
   disabled: ReplaceListType<Required<ValueType>, boolean>,
   formatList: FormatType[],
-  isInvalidateDate: (date: DateType, info?: { from?: DateType; activeIndex: number }) => boolean,
+  isInvalidateDate: (date: DateType, info?: InvalidateDateInfo<DateType>) => boolean,
 ): [
   /** Trigger `onChange` by check `disabledDate` */
   flushSubmit: (index: number, needTriggerChange: boolean) => void,

src/generate/dateFns.ts

@@ -49,7 +49,7 @@ const localeParse = (format: string) => {
 
 const parse = (text: string, format: string, locale: string) => {
   return parseDate(text, localeParse(format), new Date(), { locale: getLocale(locale) });
-}
+};
 
 /**
  * Check if the text is a valid date considering the format and locale
@@ -69,7 +69,7 @@ const isStrictValidDate = (text: string, format: string, locale: string) => {
   }
   const formattedDate = formatDate(date, format, { locale: getLocale(locale) });
   return text === formattedDate;
-}
+};
 
 const generateConfig: GenerateConfig<Date> = {
   // get

src/interface.tsx

@@ -89,9 +89,14 @@ export type InternalMode = PanelMode | 'datetime';
 
 export type PickerMode = Exclude<PanelMode, 'datetime' | 'decade'>;
 
+export interface BaseInfo {
+  /** Only work in RangePicker. Tell the related start or end field. */
+  range?: 'start' | 'end';
+}
+
 export type DisabledDate<DateType = any> = (
   date: DateType,
-  info: {
+  info: BaseInfo & {
     type: PanelMode;
     /**
      * Only work in RangePicker.
@@ -102,10 +107,6 @@ export type DisabledDate<DateType = any> = (
   },
 ) => boolean;
 
-export interface BaseInfo {
-  range?: 'start' | 'end';
-}
-
 export interface CellRenderInfo<DateType> extends BaseInfo {
   prefixCls: string;
   // The cell wrapper element

tests/new-range.spec.tsx

@@ -563,6 +563,29 @@ describe('NewPicker.Range', () => {
       expect(document.querySelector('.rc-picker-ok button')).toBeDisabled();
     });
 
+    it('disabledDate range should control ok button', () => {
+      const disabledDate = (date: Dayjs, info: { range?: 'start' | 'end' }) =>
+        info.range === 'end' && date.isBefore(dayjs('2024-11-20'), 'day');
+
+      const { container } = render(
+        <DayRangePicker
+          showTime
+          defaultValue={[getDay('2024-11-19 00:00:00'), getDay('2024-11-21 00:00:00')]}
+          disabledDate={disabledDate}
+        />,
+      );
+
+      openPicker(container, 1);
+      expect(document.querySelector('.rc-picker-ok button')).not.toBeDisabled();
+
+      fireEvent.change(container.querySelectorAll<HTMLInputElement>('input')[1], {
+        target: {
+          value: '2024-11-19 00:00:00',
+        },
+      });
+      expect(document.querySelector('.rc-picker-ok button')).toBeDisabled();
+    });
+
     it('disabledDate provides info.type', () => {
       const disabledDate = jest.fn(() => false);
 
@@ -576,6 +599,72 @@ describe('NewPicker.Range', () => {
       );
     });
 
+    it('disabledDate provides info.range', () => {
+      const disabledDate = jest.fn(() => false);
+
+      const { container } = render(<DayRangePicker allowEmpty disabledDate={disabledDate} />);
+
+      openPicker(container);
+      expect(disabledDate).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          range: 'start',
+        }),
+      );
+
+      disabledDate.mockClear();
+      openPicker(container, 1);
+      expect(disabledDate).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          range: 'end',
+        }),
+      );
+    });
+
+    it('disabledDate keeps from info behavior', () => {
+      const disabledDate = jest.fn(
+        (_date: Dayjs, _info: { range?: 'start' | 'end'; from?: Dayjs }) => false,
+      );
+
+      const { container } = render(<DayRangePicker disabledDate={disabledDate} />);
+
+      openPicker(container);
+      selectCell(15);
+
+      const endCall = disabledDate.mock.calls.find(([, info]) => info.range === 'end' && info.from);
+
+      expect(endCall).toBeTruthy();
+      expect(isSame(endCall![1].from, '1990-09-15')).toBeTruthy();
+    });
+
+    it('disabledDate can apply to end field only', () => {
+      const onChange = jest.fn();
+      const disabledDate = (date: Dayjs, info: { range?: 'start' | 'end' }) =>
+        info.range === 'end' && date <= dayjs('2024-11-20').endOf('day');
+
+      const { container } = render(
+        <DayRangePicker
+          disabled={[true, false]}
+          defaultValue={[getDay('2024-10-28'), getDay('2024-11-20')]}
+          disabledDate={disabledDate}
+          onChange={onChange}
+        />,
+      );
+
+      openPicker(container, 1);
+
+      const disabledCell = selectCell('19', 1);
+      expect(disabledCell).toHaveClass('rc-picker-cell-disabled');
+      expect(onChange).not.toHaveBeenCalled();
+
+      selectCell('21', 1);
+      expect(onChange).toHaveBeenCalledWith(
+        [expect.anything(), expect.anything()],
+        ['2024-10-28', '2024-11-21'],
+      );
+    });
+
     it('disabled should patch className', () => {
       const { container, rerender } = render(<DayRangePicker disabled />);
       expect(container.querySelector('.rc-picker-disabled')).toBeTruthy();