Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.

首先先看看效果:效果图: 默认是一直不可选择今日和以后的日期

当选择了一个日期后, 将它的可选择区间限制在 31 天内, 并且下次选择时解除限制

下面是代码示例, 里面的 props, state, this.setState 视情况自行修改

 props.rangeOnChange(dates)}
  onCalendarChange={dates => props.CalendarChange(dates)}
  defaultValue={[props.begin,props.end]}
  />

  disabledDate = (current) =>  {
    // current && (moment(current).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD') 
    //              || current > moment().endOf('day'))
    // 这一段是限制不可选今日和以后的日期, 看需求进行修改
    // this.state.TimeInterval).subtract(30, 'd') 中的 30 看需求是限制多少天内自行修改
    // moment(this.state.TimeInterval).add(30, 'd') 同理
    return this.state.TimeInterval ? 
      parseInt(moment(moment(current).format('YYYY-MM-DD')).format('x')) < parseInt(moment(moment(this.state.TimeInterval).subtract(30, 'd').format('YYYY-MM-DD')).format('x')) || 
      parseInt(moment(moment(current).format('YYYY-MM-DD')).format('x')) > parseInt(moment(moment(this.state.TimeInterval).add(30, 'd').format('YYYY-MM-DD')).format('x')) || 
      current && (moment(current).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD') || 
                  current > moment().endOf('day'))
      : 
      current && (moment(current).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD') 
                  || current > moment().endOf('day'))
    // 后面的是解除区间限制后的规则, 设置为 flase 表示允许
  }

async rangeOnChange(value) {
  // this.begin = value.length !== 0 ? value[0].unix() : '';
  // this.end = value.length !== 0 ? value[1].unix() : '';
  // 这里是将开始当天的零点时间戳和结束当天23.59.59的时间戳以秒的方式赋值. 根据后端要求传值即可
  this.begin = value.length !== 0 ? parseInt(moment(value[0].format("YYYY-MM-DD")).startOf('day').format('x') / 1000) : '';
  this.end = value.length !== 0 ? parseInt(moment(value[1].format("YYYY-MM-DD")).endOf('day').format('x') / 1000) : '';
  await // 日期查询相关的业务代码, 此处省略
}

CalendarChange = (value) => {
  // 这里进行判断, 当日期的区间选择完成之后解除区间限制
             this.setState({ TimeInterval: value.length > 1 ? null :value[0] })
         }