在工作中遇到一个这样的需求,要求自定义可选择的时间范围,通过使用antd官方文档中的实例并不能完全满足需求。在运用到disabledDate这个api的时候有很多困惑,通过网上一些经验简单对这个api的使用做一些总结: 我们以打开开始时间弹框为例
disabledStartDate(startValue) {
//startValue参数会打印出多个,为打开当前时间选择面板下所有的时间。这个参数是一个moment类型的时间
if (!startValue || !endValue) {
//这里的意思是还没有选择开始时间和结束时间的时候返回false,也就是当前面板的每个时间都可以选择
return false;
}
//你选择的开始时间不能大于你已经选择了的结束时间,满足这个条件的时间都会返回true,而返回值为true的时间都不能被选中
return startValue.valueOf() > endValue.valueOf();
},
//结束时间那一块同理
注意点:
- 使用datePicker得到的时间为moment类型,如果要与你预设的时间做比较的话,应该先看一下你的时间格式是怎样的然后转换成一样的时间格式才能进行比较
- valueOf可以将一个Date类型的时间转换为时间戳,moment类型的时间也可以通过这样的方式转换为时间戳
- 确立你的时间范围,disabledStartDate会在打开面板的时候进行你里面写的函数比较,返回true的值就是不能选的时间
参考这篇文章:www.jianshu.com/p/e23f61cd0…