前端 - 请教一下react+antd日期选择器禁用问题 ？？

Question

功能需求就是时间跨度最大为一个月 并且当天以后的禁用 就这个时间跨度最大一个月 试了好多种办法都行 有没有大佬帮我看看代码哪里出了问题 都贴上来了
react版本 17.0.2

import { useEffect, useState, useRef } from "react";
import { Modal, Form, DatePicker, message } from "antd";
import moment from "moment"; // 日期转换器
import "./taskModule.less";
// 解构出需要的值避免eslient警告
const PlatModule = ({ isModalVisible, columns, cbState }) => {
  // form操作
  const [form] = Form.useForm();
  const { RangePicker } = DatePicker;
  useEffect(() => {
    if (isModalVisible) {
      form.resetFields();
      setNumRanges(1);
    }
  }, [isModalVisible, columns, form, cbState]);
  // 确认
  const handleOk = () => {
    form
      .validateFields()
      .then(async (values) => {
        cbState(false);
      })
      .catch((error) => {
        message.error("请填完所需选项");
      });
  };

  //   时间的相关
  const [dates, setDates] = useState(null);
  const [values, setValues] = useState([[], [], []]);
  const [numRanges, setNumRanges] = useState(0);
  const [time, setTime] = useState([{ start_date: null, end_date: null }]);
  const rangePickerRef = useRef(null);
  const setValue = (index, val) => {
    if (val) {
      setTime((prevTime) => {
        const newTime = [...prevTime];
        newTime[index] = {
          start_date: moment(val[0]._d).format("YYYY-MM-DD"),
          end_date: moment(val[1]._d).format("YYYY-MM-DD"),
        };
        return newTime;
      });
    }
    const newValues = [...values];
    newValues[index] = val;
    setValues(newValues);
  };
  const handleAdd = () => {
    if (numRanges < 3) {
      setNumRanges(numRanges + 1);
    }
  };
  const disabledDate = (current) => {
    if (current && current > moment().endOf("day")) {
      return true;
    }
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], "days") >= 30;
    const tooEarly = dates[1] && dates[1].diff(current, "days") >= 30;
    if (tooEarly || tooLate) {
      return true;
    }
    const startDate = moment(time[0].start_date);
    const diff = current.diff(startDate, "days");
    return diff > 30;
  };
  const onOpenChange = (open) => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
    }
  };
  const layout = {
    labelCol: { span: 9 },
    wrapperCol: { span: 15 },
  };
  return (
    <Modal
      forceRender // 解决Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop? 报错
      width={1000}
      visible={isModalVisible}
      title="选择"
      onOk={handleOk}
    >
      <Form
        form={form}
        {...layout}
        name="task-form"
        style={{ marginLeft: "-350px" }}
        validateTrigger="onBlur"
      >
        <Form.Item label={<div className="fomart">选择时间范围</div>}>
          <div className="timeFlex">
            {[...Array(numRanges)].map((_, i) => (
              <RangePicker
                key={`${i}_range`}
                name={`template_time_${i}`}
                value={values[i]}
                disabledDate={disabledDate}
                onChange={(val) => {
                  setValue(i, val);
                }}
                onOpenChange={onOpenChange}
                changeOnBlur
                ref={rangePickerRef}
              />
            ))}
            {+numRanges < 3 && (
              <div className="time_item" onClick={handleAdd}>
                + 添加时间范围
              </div>
            )}
          </div>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default PlatModule;

Answer 1

1.

const disabledDate = (current) => {
  // 禁用今天以后的日期
  if (current && current > moment().endOf("day")) {
    return true;
  }

  // 如果用户还没有选择日期，那所有的日期都可以选
  if (!dates || dates.length < 2) {
    return false;
  }

  // 计算用户选择的日期范围
  const startDate = dates[0];
  const endDate = dates[1];

  // 如果用户选择的日期范围超过一个月，那这个日期不可以选的
  if (endDate.diff(startDate, 'days') > 30) {
    return true;
  }

  // 其他情况下，这个日期是可选的
  return false;
};

const onDateChange = (dates) => {
  // 当用户选择日期范围时，更新dates变量
  setDates(dates);
};

<RangePicker
  disabledDate={disabledDate}
  onChange={onDateChange}
/>

2.：

const disabledDate = (current, index) => {
  if (current && current > moment().endOf("day")) {
    return true;
  }
  if (!dates) {
    return false;
  }
  const tooLate = dates[0] && current.diff(dates[0], "days") >= 30;
  const tooEarly = dates[1] && dates[1].diff(current, "days") >= 30;
  if (tooEarly || tooLate) {
    return true;
  }
  const startDate = moment(time[index].start_date);
  const diff = current.diff(startDate, "days");
  return diff > 30;
};

const setValue = (index, val) => {
  if (val) {
    setTime((prevTime) => {
      const newTime = [...prevTime];
      newTime[index] = {
        start_date: moment(val[0]).format("YYYY-MM-DD"),
        end_date: moment(val[1]).format("YYYY-MM-DD"),
      };
      return newTime;
    });
  }
  const newValues = [...values];
  newValues[index] = val;
  setValues(newValues);
};

// 在日期选择器中使用这些函数
<RangePicker
  key={`${i}_range`}
  name={`template_time_${i}`}
  value={values[i]}
  disabledDate={(current) => disabledDate(current, i)}
  onChange={(val) => {
    setValue(i, val);
  }}
  onOpenChange={onOpenChange}
  changeOnBlur
  ref={rangePickerRef}
/>