react+antd的RangePicker日期选择器实现只选择一天内或者7天内的时间的方法

 需求是选择范围日期选择器，需要是第一个选择时间的一天内，直接上代码

  //  设置不可选择时间
  const [dates, setDates] = useState();
  const disabledDate = (current) => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 0;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 0;
    return !!tooEarly || !!tooLate;
  };
// 日期选择器打开时的事件
  const onOpenChange = (open) => {
    console.log('onOpenChange');
    if (open) {
      setDates([null, null]);
      searchForm.setFieldsValue({'period': [null, null]});
    } else {
      setDates([...dates]);
    }
  };


//日期选择器
              <DatePicker.RangePicker
                    showTime={
   
   {
                      hideDisabledOptions: true,
                      defaultValue: [moment('00:00', 'HH:mm'), moment('11:59', 'HH:mm')],
                    }}
                    format="YYYY-MM-DD HH:mm"
                    size="large"
                    className="basic_search_from_item"
                    disabledDate={disabledDate}
                    onCalendarChange={(val) => {
                      console.log(val, 'onCalendarChange的val的值');
                      setDates(val);
                    }}
                    onChange={(val) => {
                      console.log(val, 'onChange的val的值');
                      setDates(val);
                      searchForm.setFieldsValue({'period': val});
                    }}
                    onOpenChange={onOpenChange}
                    onBlur={() => console.log('blur has been triggered')}
                  />

注意日期选择的这四个配置属性

disabledDate，onCalendarChange，onChange，onOpenChange

即可实现日期的选择限制

同理

const tooLate = dates[0] && current.diff(dates[0], 'days') > 0;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 0;

选择七天范围内，也可将后缀改为7

const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;