antd时间选择器不可选择今天以及未来时间,限制时间跨度60天

 1.html主要代码


<DatePicker format="YYYY-MM-DD"
    onChange={handleStartDateChange}
    disabledDate={handleStartDisabledDate}
    placeholder="开始日期"
/>
<DatePicker style={{ marginLeft: '6px' }}
    format="YYYY-MM-DD"
    onChange={handleEndDateChange}
    disabledDate={handleEndDisabledDate}
    placeholder="结束日期"
/>                                          

2.js主要代码

 // 结束时间选择器(监控记录日期变换)
 handleEndDateChange = (value, dateString) => {
     this.endTime = moment(dateString).startOf('day').format('YYYY-MM-DD HH:mm:ss')
 };

 // 开始时间选择器(监控记录日期变换)
 handleStartDateChange = (value, dateString) => {
     this.startTime = moment(dateString).startOf('day').format('YYYY-MM-DD HH:mm:ss')
 };

 // 结束时间可选范围
 handleEndDisabledDate = (current) => {
     if (this.startTime && this.startTime !== 'Invalid date') {
       // 核心逻辑: 结束日期不能多余开始日期后60天,且不能早于开始日期
     return current && current > moment().subtract(1, 'days').endOf('day') || current > 
            moment(this.startTime).add(60, 'day') || current < moment(this.startTime);
     } else {
          //今天及未来时间不可选
          return current && current > moment().subtract(1, 'days').endOf('day')
     }
 }


 // 开始时间可选范围
 handleStartDisabledDate = (current) => {
     if (this.endTime &&  this.endTime !== 'Invalid date') {
       // 核心逻辑: 开始日期不能晚于结束日期,且不能早于结束日期前60天
       return current < moment(this.endTime).subtract(60, 'day') || current > 
              moment(this.endTime);
      } else {
           //今天及未来时间不可选
           return current && current > moment().subtract(1, 'days').endOf('day')
      }
 }

方法是在Mobx状态管理里面写的,如果在页面写,需要绑定this,startTime和endTime是在定义的变量名

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值