前提
由于最近要写一个任务流程的功能模块,涉及到要写任务截止时间,当然这个时间肯定要具体到某日某时某分,然后就去百度了大半天坑太多了,效果都不太理想,接着就看到了钉钉的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日的时候,后面的选择时间轴却可以往上拖动,说明功能已经实现了!
如有错误或缺漏,欢迎指出。