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

这篇具有很好参考价值的文章主要介绍了Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先先看看效果:

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

ant日期选择限制范围,javascript,前端,前端框架

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

ant日期选择限制范围,javascript,前端,前端框架

下面是代码示例, 里面的 props, state, this.setState 视情况自行修改文章来源地址https://www.toymoban.com/news/detail-602766.html

<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] })
	 	}

到了这里，关于Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！