likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 38

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

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

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

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

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

Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择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] })
         }