关于Ant.design的RangePicker日期范围限制的实践(限制当前日期之前日期可选)

news/2024/7/7 15:52:31

博主接到一个需求,要求限制日期范围,其要求如下:

限制起始时间结束时间的范围不超过1个月,且限制起始时间结束时间不能大于当前日期减去2天(即T-2
查阅了官方文档和一些博主的文档,最后经过自己的微调整,解决了该问题。

PS:注意,限制用户刚点击打开RangePicker弹窗的可选日期时,需要在最上方进行判断返回。否则无法生效!!!

<Col span={8}>
              <Form.Item {...itemLayout} name="dotime" label={
                <div style={{ textAlign: 'right' }}>
                  <span>&nbsp;执行日期</span>
                  <span className={styles.a_symbol}>
                    <Tooltip placement="top" title={<div>1、执行日期起止时间范围不能超过1个月<br />2、数据更新日期为T-2日,之后日期无数据</div>}>
                      <QuestionCircleOutlined style={{ margin: '0 -8px 0 2px' }} />
                    </Tooltip>
                  </span>
                </div>
              } rules={[{ required: true, message: '执行日期不能为空!' },]} >
                <RangePicker value={hackValue || value} disabledDate={disabledDate} onCalendarChange={onCalendarChange} onOpenChange={onOpenChange} onChange={onDateChange} />
              </Form.Item>
</Col>
// 日期禁选区域设置
  const disabledDate = (current) => {
    const limitDate = moment().endOf().subtract(2, 'days');
    const T2 = current && current > limitDate;
    if (!rangeDate || rangeDate.length === 0) {
      return T2;
    }
    const tooLate = rangeDate[0] && current.diff(rangeDate[0], 'months') >= 1;
    const tooEarly = rangeDate[1] && rangeDate[1].diff(current, 'months') >= 1;
    return tooEarly || tooLate || T2;
  }

http://www.niftyadmin.cn/n/3889659.html

相关文章

TCP连接中time_wait在开发中的影响-搜人以鱼不如授之以渔

根据TCP协议定义的3次握手断开连接规定,发起socket主动关闭的一方socket将进入TIME_WAIT状态,TIME_WAIT状态将持续2个MSL(Max Segment Lifetime),TIME_WAIT状态下的socket不能被回收使用. 具体现象是对于一个处理大量短连接的服务器,如果是由服务器主动关闭客户端的连接,将导致…

ios打包上架错误1、Unable to process application at this time due to the following error: Missing Provisioni

由于以下错误&#xff0c;此时无法处理应用程序&#xff1a;缺少供应配置文件 - 应用程序必须在名为embedded.mobileprovision的文件中包含供应配置文件。 解决方法&#xff1a;https://blog.csdn.net/ducp123/article/details/83109111

压力测试分析

1.从压力测试说起 压力测试的理解&#xff0c;xxx的性能10w/s&#xff0c;对你有意义么&#xff1f; 没有那家卖瓜的会说自己家的不甜&#xff0c;同样&#xff0c;没有哪个开源项目愿意告诉你在对它条件最苛刻的时候压力情况是多少&#xff0c;一般官网号称给你看的性能指标都…

matlab最优轨迹规划,matlab机器人轨迹规划

运动仿真 $ %" 运动仿真( ’)在对上述规划轨迹进行仿真前, 先输入机器 人的参数, 并命名 -$.$/&&)” 命令如下: “ A 连杆的前四个元素依次为 "......PUMA560的 MATLAB 仿真要建立 PUMA560的机器人对象, 首先我们要了解 PUMA560的...如果有了关节的轨迹规划…

antd pro react项目 umi dev 修改默认端口号mac和windows

windows "dev": "set PORT8081 && npm run start:dev", // 8081生效 "start": "set PORT8080 && umi dev", // 8080不生效正确的写法是 "dev": "set PORT8081 && npm run start:dev", …

ionic 插件安装

ionic 插件安装 安装本地已有插件 cordova plugin add Your_Plugin_Path --variable APP_KEYyour_jpush_appkey 或直接通过 url 安装&#xff1a; cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable APP_KEYyour_jpush_appkey 通过 Cordov…

Windows电源模式(命令行)

一、简介 windows使用powercfg.exe来控制电源方案,像cmd.exe一样,powercfg.exe也是windows自带的。 powercfg命令行选项 选项说明/?、-help显示有关命令行参数的信息。/list、/L列出所有电源方案。/query、/Q显示电源方案的内容。

Windows进程间通信(上)

一、管道 管道&#xff08;pipe&#xff09;是用于进程间通信的共享内存区域。创建管道的进程称为管道服务器&#xff0c;而连接到这个管道的进程称为管道客户端。一个进程向管道写入信息&#xff0c;而另外一个进程从管道读取信息。 异步管道是基于字符和半双工的&#xff08;…