使用 antd RangePicker 版本 5.6.3，我想设置禁用日期范围，但我不能

Question

我使用的是antd 5.6.3版本，RangePicker。

我试图允许日期范围在开始日期（第一个选定日期）之后 3 天和之前。当用户选择开始日期时，它需要立即禁用日期。所以我像下面的代码一样使用了“disabledDate”和“onCalendarChange”，但我不起作用。无论我设置“disabledDate”选项，它都会在开始日期之前禁用。

由于其他包的依赖，我无法更改 antd 版本。 请给我任何意见。 谢谢。

我想禁用起始日期“maxDays”前后的日期。

import { DatePicker } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import { useState } from 'react';
import type { Dayjs } from 'dayjs';

interface Props {
  format?: string;
  maxDays?: number; // 최대 조회 기간 (일 단위)
  value?: [Dayjs | null, Dayjs | null] | null;
  onChange?: (dates: [Dayjs | null, Dayjs | null]) => void;
}

const { RangePicker } = DatePicker;

const Calendar = (props: Props) => {
  const [startDate, setStartDate] = useState<Dayjs | null>(null);
  const [selectedDates, setSelectedDates] = useState<[Dayjs | null, Dayjs | null] | null>(null);
  const [isSelectingStart, setIsSelectingStart] = useState<boolean>(true);
  const maxDays = props.maxDays || 3; // 기본 최대 조회 기간은 3일

  const disabledDate: RangePickerProps['disabledDate'] = (currentDate) => {
    if (isSelectingStart) {
      // 시작일을 선택 중일 때는 모든 날짜를 활성화
      return false;
    }

    if (!startDate) {
      // 시작일이 선택되지 않았을 때는 모든 날짜를 활성화
      return false;
    }
    // 시작일을 기준으로 -maxDays ~ +maxDays 범위 내의 날짜만 활성화
    const tooEarly = currentDate.isBefore(startDate.subtract(maxDays, 'days'), 'day');
    const tooLate = currentDate.isAfter(startDate.add(maxDays, 'days'), 'day');
    return tooEarly || tooLate;
  };

  const handleChange: RangePickerProps['onCalendarChange'] = (dates, dateStrings, info) => {
    if (dates && dates[0] && !dates[1]) {
      // 시작일이 선택되었을 때
      setStartDate(dates[0]);
    } else if (dates && dates[0] && dates[1]) {
      // 날짜 범위가 모두 선택되었을 때
      setStartDate(null); // 시작일 재선택을 위해 초기화
    }
    setSelectedDates(dates);
    setIsSelectingStart(info.range === 'start');

    if(props.onChange) {
      props.onChange(dates as [Dayjs | null, Dayjs | null]);
    }
  };


  return (
    <RangePicker
      format={props.format}
      disabledDate={disabledDate}
      onCalendarChange={handleChange}
      value={selectedDates}
    />
  );
};

export default Calendar;

Answer 1

您可以使用一个状态来禁用第一个选定日期（开始日期）之前/之后的日期，而不是使用 3 个状态。这是完整的代码。

[电子邮件受保护]

import { DatePicker } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import type { Dayjs } from 'dayjs';
import { useState } from 'react';

interface Props {
    format?: string;
    maxDays?: number;
    value?: [Dayjs | null, Dayjs | null] | null;
    onChange?: (dates: [Dayjs | null, Dayjs | null]) => void;
}

const { RangePicker } = DatePicker;

const Calendar = (props: Props) => {
    const maxDays = props.maxDays || 3;

    const [selectedDates, setSelectedDates] = useState<[Dayjs | null, Dayjs | null] | null>(props.value || null);
    const value = props.value || selectedDates;

    const disabledDate: RangePickerProps['disabledDate'] = (currentDate) => {
        if (value?.[0]) {
            return currentDate.isBefore(value[0].subtract(maxDays, 'days'), 'day') || currentDate.isAfter(value[0].add(maxDays, 'days'), 'day');
        }

        return false;
    };

    const handleChange: RangePickerProps['onCalendarChange'] = (dates) => {
        setSelectedDates(dates as [Dayjs | null, Dayjs | null]);

        if (dates?.[0] && dates?.[1]) {
            props.onChange?.(dates as [Dayjs | null, Dayjs | null]);
        }
    };

    return <RangePicker format={props.format} disabledDate={disabledDate} onCalendarChange={handleChange} value={selectedDates} />;
};

export default Calendar;

将来，如果你将 antd 升级到最新版本，disabledDate prop 会有第二个参数信息，其中包含 from?并在 [email protected] 中输入字段。通过使用

from

字段，您可以禁用日期单元格，而无需使用handleChange 函数。

[电子邮件受保护] 或更高版本

import { DatePicker } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import type { Dayjs } from 'dayjs';
import { useState } from 'react';

type ValueType = [Dayjs | null, Dayjs | null] | null;
type DatesType = [Dayjs | null, Dayjs | null];

interface Props {
    format?: string;
    maxDays?: number;
    value?: ValueType;
    onChange?: (dates: DatesType) => void;
}

const { RangePicker } = DatePicker;

const Calendar = (props: Props) => {
    const { value, onChange } = props;
    const maxDays = props.maxDays || 3;

    const disabledDate: RangePickerProps['disabledDate'] = (date, info) => {
        const startDate = info.from || value?.[0];

        if (!startDate) {
            return false;
        }

        return date.isBefore(startDate.subtract(maxDays, 'days'), 'day') || date.isAfter(startDate.add(maxDays, 'days'), 'day');
    };

    return <RangePicker format={props.format} disabledDate={disabledDate} value={value} onChange={(dates) => onChange?.(dates as DatesType)} />;
};

const App = () => {
    const [value, setValue] = useState<ValueType>(null);

    return <Calendar value={value} onChange={setValue} />;
};

export default App;

确保日历组件是有状态的，否则在进行第一次选择后打开范围选择器时，单元格将不会被禁用。