React之Antd RangePicker实现时间范围选择，禁止选择今天之后的时间，并且只能选择一个月以内的时间

一、HTML代码

		<Form.Item label={'选取时间范围'}>
          {getFieldDecorator('timeRange', {  
          //其实也可以为from和to设置初始值，这样就可以显示当前一个月的时间了
          // from: moment().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),
         // to: moment().format('YYYY-MM-DD HH:mm:ss'),
            initialValue: [timeJudge(search.from as string), timeJudge(search.to as string)],
          })(
            <RangePicker
              style={{ width: 370 }}
              disabledDate={disabledTaskDate}
              showTime={{ format: 'YYYY-MM-DD HH:mm:ss' }}
              format="YYYY-MM-DD HH:mm:ss"
              placeholder={['起始时间', '结束时间']}
              onCalendarChange={onDateChange}
              onOpenChange={onDateOpenChange}   
            ></RangePicker>,
          )}
        </Form.Item>

（1）timeJudge

timeJudge是我写的一个函数，用来判断search.from【输入值】是否为空，如果不为空就将时间转化为moment格式

import moment from 'moment';

export const timeJudge = (value: string): any => {
  if (value && value.length > 0) {
    return moment(value);
  } else {
    return undefined;
  }
};

（2）onOpenChange

该函数是为了每次选择时间时将自己创建的state变量清空

 // 时间选择相关
 	const [selectDate, setSelectDate] = useState<string>();
	const onDateOpenChange = useCallback(() => {
	    setSelectDate('');
	  }, []);

（3）onCalendarChange

待选日期发生时变化的回调，将起始时间存在state变量里，以便后续使用；

 const onDateChange = useCallback(dates => {
    if (!dates || !dates.length) return;
    setSelectDate(dates[0]._d);
  }, []);

（4）disabledDate

设置禁止点击的时间范围

const disabledTaskDate = useCallback(
    current => {
      if (selectDate) {
      //设置默认的结束时间为当前点击的时间的一个月以后
        let stage = moment(selectDate).add(1, 'months');
    //如果一个月以后的时间大于明天，则结束时间以明天为准
        if (moment(selectDate).add(1, 'months') > moment().endOf('day')) {
          stage = moment().endOf('day');
        }
        //返回的范围为：【当前点击时间往前推一个月，当前点击时间往后推一个月不能超过明天以后】
        return current < moment(selectDate).subtract(1, 'months') || current > stage;
      } else {
      //未点击的时候，时间不可选为明天以后
        return current && current > moment().endOf('day');
      }
    },
    [selectDate],
  );

二、调用

因为我们是用了form.Item包裹了，所以在form表单上添加onFininsh/onSubmit就可以拿到时间了
如果不是要formItem包裹，可以使用RangPicker的onOk事件或者onChange事件拿到数据
以我的form.Item为例

（1）将拿到的数据放在url里便于数据存储

其实这个地方如果不想要存在url里可以存在state变量里，反正都已经转化成了字符串

  const handleSubmit = useCallback(
    values => {
      const {
        timeRange: [from, to],
        ...rest //如果有其他的数据在的情况下
      } = values;
      //这里我通过onSubmit事件将数据传给了父组件去保存，不需要可以不用传过去
     /* onSubmit({
        ...rest,
        from: from ? moment(from._d).format('YYYY-MM-DD HH:mm:ss') : '',
        to: to ? moment(to._d).format('YYYY-MM-DD HH:mm:ss') : '',
      });*/
      //重点
      //保存数据到url里
      history.push({
      pathname: location.pathname,
      search: queryString.stringify({
        ...rest,
        from: from ? moment(from._d).format('YYYY-MM-DD HH:mm:ss') : '',
        to: to ? moment(to._d).format('YYYY-MM-DD HH:mm:ss') : '',
      }),
    });
    },
    [onSubmit],
  );

（2）定义search

 import queryString from 'query-string';
 const search = useMemo(() => queryString.parse(location.search), []);

---

之前看了很多版本，有什么浮点数加减，再加上博主没有给加减函数，感觉很麻烦，仔细想了想拿自己的方式进行了解决，希望可以帮助到大家。