React中使用antd RangePicker限制日期选择

在React中使用Ant Design的RangePicker组件时，你可以通过onCalendarChange事件来限制日期范围。以下是一个简单的例子，展示了如何实现这一功能：

import React, { useState } from 'react';
import { DatePicker } from 'antd';
import 'antd/dist/antd.css';
 
const { RangePicker } = DatePicker;
 
const DateLimitedRangePicker = () => {
  const [dates, setDates] = useState([]);
 
  const onCalendarChange = (dates, dateStrings) => {
    // 假设我们只允许选择最近30天的日期范围
    const maxRange = 30 * 24 * 60 * 60 * 1000; // 30天的毫秒数
    if (dates[1] - dates[0] > maxRange) {
      setDates([dates[0], dates[0] + maxRange]);
    }
    setDates(dates);
  };
 
  return (
    <RangePicker
      onCalendarChange={onCalendarChange}
      value={dates.length ? [dates[0], dates[1]] : null}
    />
  );
};
 
export default DateLimitedRangePicker;

在这个例子中，onCalendarChange事件处理器检查用户尝试选择的日期范围，并通过比较日期时间戳的差来判断是否超出了最大范围。如果超出范围，它会自动将选择的日期范围限制在最近30天内。这样用户在使用RangePicker组件时不会被允许选择超出这个范围的日期。