Ant Design 日期选择框组件RangePicker约束开始结束时间

您所在的位置:网站首页 二战起始和终止时间 Ant Design 日期选择框组件RangePicker约束开始结束时间

Ant Design 日期选择框组件RangePicker约束开始结束时间

2024-06-30 23:38:40| 来源: 网络整理| 查看: 265

场景:只允许选择过去15天之内的时间,并且时间跨度最大为3天

        使用日期类组件的RangePicker形式,可以限制不可选择的时间和日期,可是棘手的地方在于时间跨度。

        根据组件官网提供的示例,官网建议当 RangePicker 无法满足业务需求时,可以使用两个 DatePicker 实现类似的功能。

        不过个人认为使用两个组件用户体验并不是太好,因此研究了一下如何使用RangePicker达到期望的效果。

        使用官网提供的api,通过设置 disabledDate 方法,来约束开始和结束日期。

        在编写代码之前,需要先了解一下日期组件的disabledDate方法,看一下它究竟是如何约束日期不可选的。

        首先根据官网api能发现该方法在调用时传入一个时间,返回一个boolean类型的数据。

官网api:

官网示例:

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

         得出这个结论之后再来看咱的需求,就简单很多了。只需要自己的范围定义好,跟current比较就行了。需要动脑筋的是,在日期选择前后要改变可选范围。

          这里我们使用的方法是定义一个变量,因为当日期有变化的时候disabledDate方法也会重新调用,根据变量的数据来判断限制的范围。如下面代码所示:

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



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭