关于前端:Ant-Design-RangePicker-日期选择器不可选择今日或以后的日期-最多可以选择31天

首先先看看成果: 效果图: 默认是始终不可抉择今日和当前的日期

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

上面是代码示例, 外面的 props, state, this.setState 视状况自行批改

<RangePicker
style={{marginRight: 8}}
placeholder={[t('startDate'), t('endDate')]}
disabledDate={props.disabledDate}
onChange={dates => 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] })
         }