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

背景

项目使用 react，antd 开发。

原始需求

有一个日期时间范围选择的需求，具体要求是：

1. 今天以后的时间不能选择
2. 只能选择30天以内的时间

解决方案

引入时间控件

 import { Row, Col, Spin, DatePicker } from 'antd'1
 const { RangePicker } = DatePicker

定义时间格式

const dateFormat = 'YYYY-MM-DD'
const valueDateFormat = `${dateFormat} 00:00:00`

在页面使用控件显示

<RangePicker
   disabledDate={disabledTaskDate}
   onCalendarChange={onDateChange}
   onOpenChange={onDateOpenChange}
   defaultValue={[moment(startTime * 1000), moment(endTime * 1000)]}
   format={dateFormat}
 ></RangePicker>

定义方法

  // 时间选择相关
  const [selectDate, setSelectDate] = useState(null)
  /* 控制下单时间选择范围30天 */
  const disabledTaskDate = (current: Moment) => {
    if (selectDate) {
      const offsetV = 2592000000 //30天转换成ms
      const selectV = selectDate.valueOf()
      const currentV = current.valueOf()
      if (calcAdd(currentV, offsetV) > moment().valueOf()) {
        return calcMinus(currentV, offsetV) > selectV || current > moment().endOf('day')
          ? true
          : false
      } else {
        return calcMinus(currentV, offsetV) > selectV || calcAdd(currentV, offsetV) < selectV
          ? true
          : false
      }
    } else {
      return current && current > moment().endOf('day') // 当天以后的时间不能选择
    }
  }

  /* 选择任务时间变化 */
  const onDateChange = (dates: Moment[]) => {
    if (!dates || !dates.length) return
    setSelectDate(dates[0])
  }

  const onDateOpenChange = () => {
    setSelectDate(null)
  }

可以满足需求～～～