antd RangePicker 通过开始时间的选择来禁用结束时间的区间

最新推荐文章于 2024-07-22 08:50:00 发布

胖星星

最新推荐文章于 2024-07-22 08:50:00 发布

阅读量5k

点赞数 3

分类专栏： js antd 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_43654374/article/details/105298036

版权

js 同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

antd

3 篇文章 0 订阅

订阅专栏

前言

以前都是写原生组件习惯了，由于新的项目需要敏捷开发，用到了antd的UI组件。不错，挺牛逼的一个东西。在使用RangePicker时间区间选择组件的过程中，由于业务的需要，需要对时间区间进行禁用，而且是动态的，需要根据选择的开始时间来划定结束时间的禁用范围，我以为是很简单的东西，然而，这个东西真的比我想象中得要复杂那么一丢丢，反正几经周折，算是搞好了。写个文章记录一下…

难点

其实麻烦就麻烦在于动态的去获取选取的开始时间，antd提供的组件中，RangePicker自带提供的onChange事件触发是需要再结束时间之后才执行的，所以这里不能用onChange事件来获取开始事件，需要用到onCalendarChange事件来动态的加载点击的开始时间。啊，对，差不多就是这么个情况，下面贴代码

// 需求是开始时间在23号之前，则只能当前时间选到当前月23号。开始时间23号之后，则选择当前时间到下月22号，开始时间不可选23号。

const formatter = 'YYYY-MM-DD HH:mm:ss'
//state
state = {
	filter：{
  		beginTime: moment().subtract(1, 'months').startOf('month').add(22, 'days').format(formatter),
  		endTime: moment().format(formatter)
  	},
 	isRangeChange:false
}
const { filter, isRangeChange} = this.state
// 组件
<RangePicker
            value={[moment(filter.beginTime), moment(filter.endTime)]}
            showToday={false}
            allowClear={false}
            onCalendarChange={dates => {
              this.setState({ filter: {beginTime: dates[0], endTime: dates[1] }, isRangeChange: true })
            }}
            onOpenChange={status => this.setState({ isRangeChange: !status })}
            disabledDate={current => {
              let isShow
              if (!isRangeChange) isShow = true
              else {
                const date = moment(filter.beginTime)
                const _startDay = Number(date.format('D'))
                const _startMonth = Number(date.format('M'))
                const _disableDay = Number(current.format('D'))
                const _disableMonth = Number(current.format('M'))
                if (_startDay <= 22) 
                  isShow = (_disableMonth === _startMonth) && (_disableDay <= 22) && (_disableDay > _startDay)
                 else 
                  isShow = (_disableMonth === _startMonth + 1 && _disableDay <= 22) || (_disableMonth === _startMonth && _disableDay > _startDay)
              }
              return !isShow
            }}
            onChange={(val) => {
              const start = val[0].format(formatter)
              const end = val[1].format(formatter)
              this.setState({filter: { beginTime: start, endTime: end}})
            }} />