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

最新推荐文章于 2024-07-22 16:06:07 发布

这个需求做不到

最新推荐文章于 2024-07-22 16:06:07 发布

阅读量2.7k

点赞数

文章标签： javascript 前端前端框架

本文链接：https://blog.csdn.net/weixin_64069562/article/details/126868267

版权

本文介绍如何使用RangePicker组件实现日期选择器，限制用户只能选择当前日期及其前31天的日期范围，并在选择后自动解除该限制。代码示例展示了如何配置disabledDate属性和状态管理来实现这一功能。

摘要由CSDN通过智能技术生成

首先先看看效果:

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

当选择了一个日期后, 将它的可选择区间限制在 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] })
	 	}