Antd RangePicker 选择范围动态限制

阅读本文可以解决的问题：

通过RangePicker的API，实现动态控制RangePicker的可选范围。我的antd版本为3.26.x。

业务背景是需要做一个日期范围选择功能，选择开始时间和结束时间，有两个要求：

• 初始可选范围是 当前日到当前日减12个月，比如今天是2023.06.13，则可选范围是2022.06.13~2023.06.13。
• 选择一个日期后，只能选择该日期前后3个月，比如今天是2023.06.13日
  • 选了2023.06.01，可选范围更新为2023.03.01到2023.06.13；
  • 选了2023.01.10，可选范围更新为2022.10.10到2023.04.10；
  • 选了2022.08.20，可选范围更新为2022.06.14到2022.11.20。

废话少说，直接Show me code:

import { DatePicker } from "antd";
import moment from "moment";

const { RangePicker } = DatePicker;

/**日期选择值 */
const [dates, setDates] = useState<any[]>([]);

const onDateOk = (value) => {
    setDates([...value])
}

const calendarChange = (date) => {
    console.log("date", date)
    setDates([...date])
}

const onOpenChange = open => {
    if (open) {
        setDates([])
    }
}

<RangePicker
    format="YYYY-MM-DD"
    placeholder={["开始时间", "结束时间"]}
    onChange={onDateOk}
    style={{ width: 237 }}
    value={dates}
    disabledDate={disabledRangeDate1}
    onCalendarChange={calendarChange}
    onOpenChange={onOpenChange}
/>

上面简单展示了下组件的基本内容，下面介绍下用到的api：

• onOpenChange：弹出日历和关闭日历的回调
• disabledDate：限定不可选择的日期，可传入一个返回boolean类型的函数，函数入参为moment格式的日期。
• onCalendarChange：待选日期发生变化的回调，可传入函数，入参为moment格式的日期。

接下来是实现功能的代码：

const disabledRangeDate1 = (current) => {
    if (!dates || dates.length === 0) {
        return current && (current > moment().endOf('day') || current < moment().subtract(12, 'months'));
    }
    if (dates.length === 1) {
        /**选中日-3个月 */
        let min = moment(dates[0]).subtract(3, 'months');
        /**选中日+3个月 */
        let max = moment(dates[0]).add(3, 'months');
        /**只能选择12个月内的前后3个月期，如果+3个月超出当日，取当日， 如果-3个月超出-12个月范围，取-12个月 */
        if (max > moment().endOf('day')) max = moment().endOf('day');
        if (min < moment().subtract(12, 'months')) min = moment().subtract(12, 'months');
        return current && (current >= max || current <= min);
    }
}

OK，以上就是我要分享的内容啦，有什么问题欢迎大家指正，希望对您有所帮助，谢谢！