react antd disabledDate 5.14版本前 限制选择日期区间

更新于2024/03/14
antd更新的也太快了 我本地5.12.8是不支持 官方文档上5.14的info属性的
过了几天 在平台上打包 发现我之前的写法和判断失效了 也就是我本地和线上打包之后的线上版本逻辑和交互并不一致 我将本地的依赖删除干净 重新下载了一遍依赖 发现我这个5.12.8的版本的rangepicker 居然有了官网5.14的info属性， 我这不知道是喜是忧， 改下吧 还好不复杂

image.png

之前初稿 （老版本）

const onOpenChange = (open) => {
    //  打开选择框时重置日期 这点很重要 否则会影响正常选取逻辑
    if (open) {
      setDates([null, null]);
      form.setFieldValue('time', [null, null])
    }
}

// 这个就更重要了 虽然没有看源码  但是最后的return应该是一个筛选的功能 而不是单纯的输出布尔值  这里是限制选择7天
const disabledDate = (current) => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
    return !!tooEarly || !!tooLate;
}

// 这里是提前封装好的form表单 用法与标签使用完全相同
const formFields: FormFieldProps[] = [
    {
      component: 'RangePicker',
      formItemProps: {
        name: 'time',
        label: '时间区间',
      },
      componentProps: {
        format: 'YYYY-MM-DD',
        onOpenChange: onOpenChange,
        disabledDate: disabledDate,
        onCalendarChange:(val) => {
          //  这个事件可以拿到在刚选择完一个日期后的回调  而onchange只在起止结束都选择完后才能触发
          setDates(val)
        },
      },
    },
  ];

参考https://blog.csdn.net/niconicon____/article/details/130503584