antd DatePicker组件完美解决禁用今天某时某分以前的时间!!!(被一堆烂帖子给坑惨了)

3,982 阅读1分钟

前提

由于最近要写一个任务流程的功能模块,涉及到要写任务截止时间,当然这个时间肯定要具体到某日某时某分,然后就去百度了大半天坑太多了,效果都不太理想,接着就看到了钉钉的Ding发布任务里的DatePicker使用,我一用这不就是我需要的效果吗?我就直接看官方API自己写出来了。

代码

class组件开头部分(disbaleDate函数有点问题,修改一下)

  //禁用日期   
 disabledDate = (current) => { 
       return current && current < moment().endOf('day').subtract(1, "days")
    }


核心禁用某时某分的代码(实现思想是当只有选择今天的日期时才禁用选择某时某分时间段,然后把现在的时和分的数字拆出来作比较。第一层if判断当前选择的日期是不是今日,第二次if判断是当前选择的时是不是现在的时,最后做出判断禁用时和分)


render函数返回DatePicker组件


实现效果图

可以看到当选择今日也就是2月4日的时候,后面的时间显示为16时30分了,前面的0分-29分已经无法选择了,当日期切换到2月5日的时候,后面的选择时间轴却可以往上拖动,说明功能已经实现了!





如有错误或缺漏,欢迎指出。