场景:只允许选择过去15天之内的时间,并且时间跨度最大为3天
使用日期类组件的RangePicker形式,可以限制不可选择的时间和日期,可是棘手的地方在于时间跨度。
根据组件官网提供的示例,官网建议当 RangePicker 无法满足业务需求时,可以使用两个 DatePicker 实现类似的功能。
不过个人认为使用两个组件用户体验并不是太好,因此研究了一下如何使用RangePicker达到期望的效果。
使用官网提供的api,通过设置 disabledDate 方法,来约束开始和结束日期。
在编写代码之前,需要先了解一下日期组件的disabledDate方法,看一下它究竟是如何约束日期不可选的。
首先根据官网api能发现该方法在调用时传入一个时间,返回一个boolean类型的数据。
官网api:

官网示例:

刚看到这里其实不太理解,被文档的(currentDate)命名误导了。给函数传入当前日期?然后会返回一个true或false?再看官网给的示例,current要是表示当前时间,moment().endOf('day)也同样表示当前时间呀,那current表示的是什么时间呢?更蒙了,想不明白,那就输出看看呗。
通过console大法得出了结论,在日期组件打开关闭或者有变化时会调用很多次disabledDate方法,初步判断应该是下图中组件的每一天都调用了该方法,依次来判断该天是否可选。

得出这个结论之后再来看咱的需求,就简单很多了。只需要自己的范围定义好,跟current比较就行了。需要动脑筋的是,在日期选择前后要改变可选范围。
这里我们使用的方法是定义一个变量,因为当日期有变化的时候disabledDate方法也会重新调用,根据变量的数据来判断限制的范围。如下面代码所示:

最后,为了更好的用户体验,在弹出日历和关闭日历的回调方法中,将临时变量清空。
