Ant Design 日期选择框组件RangePicker约束开始结束时间 |
您所在的位置:网站首页 › 二战起始和终止时间 › Ant Design 日期选择框组件RangePicker约束开始结束时间 |
场景:只允许选择过去15天之内的时间,并且时间跨度最大为3天 使用日期类组件的RangePicker形式,可以限制不可选择的时间和日期,可是棘手的地方在于时间跨度。 根据组件官网提供的示例,官网建议当 RangePicker 无法满足业务需求时,可以使用两个 DatePicker 实现类似的功能。 不过个人认为使用两个组件用户体验并不是太好,因此研究了一下如何使用RangePicker达到期望的效果。 使用官网提供的api,通过设置 disabledDate 方法,来约束开始和结束日期。 在编写代码之前,需要先了解一下日期组件的disabledDate方法,看一下它究竟是如何约束日期不可选的。 首先根据官网api能发现该方法在调用时传入一个时间,返回一个boolean类型的数据。 官网api: 官网示例: 刚看到这里其实不太理解,被文档的(currentDate)命名误导了。给函数传入当前日期?然后会返回一个true或false?再看官网给的示例,current要是表示当前时间,moment().endOf('day)也同样表示当前时间呀,那current表示的是什么时间呢?更蒙了,想不明白,那就输出看看呗。 通过console大法得出了结论,在日期组件打开关闭或者有变化时会调用很多次disabledDate方法,初步判断应该是下图中组件的每一天都调用了该方法,依次来判断该天是否可选。 得出这个结论之后再来看咱的需求,就简单很多了。只需要自己的范围定义好,跟current比较就行了。需要动脑筋的是,在日期选择前后要改变可选范围。 这里我们使用的方法是定义一个变量,因为当日期有变化的时候disabledDate方法也会重新调用,根据变量的数据来判断限制的范围。如下面代码所示: 最后,为了更好的用户体验,在弹出日历和关闭日历的回调方法中,将临时变量清空。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |