React中使用antd DatePicker限制日期选择

2023-11-05

场景

React中使用antd DatePicker限制日期选择,有下面一些场景:

1、今天之前的日期不可选择(不包括今天)

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current < moment().endOf('day').format('YYYY-MM-DD')
}

2、今天之前的日期不可选择(包括今天)

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current <= moment().endOf('day').format('YYYY-MM-DD')
}

3、今天之后的日期不可选择(不包括今天)

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current > moment().endOf('day').format('YYYY-MM-DD')
}

4、今天之后的日期不可选择(包括今天)

disabledDate = (_current) => {
    let current = _current.format('YYYY-MM-DD')
    return current && current >= moment().endOf('day').format('YYYY-MM-DD')
}

5、选择不超过7天的范围

startDisabledDate = (_current) => {
    let endDate = moment(this.state.end_date).format('YYYY-MM-DD')
    let endDate2 = moment(endDate).subtract(6, 'days').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    return current &&
        (
            current > endDate
            ||
            current < endDate2
        )
}
endDisabledDate = (_current) => {
    let startDate = moment(this.state.start_date).format('YYYY-MM-DD')
    let startDate2 = moment(startDate).add(6, 'days').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    return current &&
        (
            current < startDate
            ||
            current > startDate2
        )
}

6、选择不超过7天的范围以及今天之后的日期不可选择(包括今天)

startDisabledDate = (_current) => {
    let endDate = moment(this.state.end_date).format('YYYY-MM-DD')
    let endDate2 = moment(endDate).subtract(6, 'days').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    return current &&
        (
            current > endDate
            ||
            current < endDate2
        )
}
endDisabledDate = (_current) => {
    let startDate = moment(this.state.start_date).format('YYYY-MM-DD')
    let startDate2 = moment(startDate).add(6, 'days').format('YYYY-MM-DD')
    let dayDate = moment().endOf('day').format('YYYY-MM-DD')
    let current = _current.format('YYYY-MM-DD')
    if (startDate2 > dayDate) {
        return current &&
            (
                current < startDate
                ||
                current >= dayDate
            )
    } else {
        return current &&
            (
                current < startDate
                ||
                current > startDate2
            )
    }
}

应用

<>
    <p></p>
    <RLDatePicker
        allowClear={false}
        onChange={this.startDateChange}
        disabledDate={this.startDisabledDate}
        locale={locale}
        inputReadOnly
        format="YYYY-MM-DD"
        placeholder="请选择日期"
        value={this.state.start_date}
    />
    <p></p>
    <RLDatePicker
        allowClear={false}
        onChange={this.endDateChange}
        disabledDate={this.endDisabledDate}
        locale={locale}
        inputReadOnly
        format="YYYY-MM-DD"
        placeholder="请选择日期"
        value={this.state.end_date}
    />
</>

在这里插入图片描述
选择范围为7天且不能选择今天及之后的日期。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React中使用antd DatePicker限制日期选择 的相关文章

随机推荐

  • 关于数据表空间问题总结

    oracle经常需要查数据库表空间大小 使用率 加表空间等 这里总结我经常使用的语句 一 数据表空间相关 查询所有表空间的使用情况 SELECT d tablespace name Name d status Status TO CHAR
  • 姓名编码查询

    内容较多 查找时请使用 ctrl F 组合键查找 本汉字代码表摘自 字符集和信息编码 国家标准汇编 中国标准出版社 1998年编 谢绝负责法 律责任 啊 1601 阿 1602 吖 6325 嗄 6436 腌 7571 锕 7925 埃 1
  • 测试如何转开发系列(四)

    囫囵吞枣法 是快速学习的核心方法 用最快的时间 把最主要知识点都学会 学习的第一步 选资料一定选择书籍 纸质的和电子书最合适 因为书籍相对内容更系统 而且内容更丰富 要选择基础入门的书籍 不要选择深入研究这种的 一深入就出不来了 深入就代表
  • 利用Vulnhub复现漏洞 - Jenkins-CI 远程代码执行漏洞(CVE-2017-1000353)

    Jenkins CI 远程代码执行漏洞 CVE 2017 1000353 Vulnhub官方复现教程 漏洞原理 复现过程 启动环境 漏洞复现 生成序列化字符串 发送数据包 执行命令 检验 Vulnhub官方复现教程 https vulhub
  • 【数据库】PostgreSQL增加密码复杂度校验

    前言 最近修改问题单 被分配了一个增加密码复杂度校验的单子 PG库也不是很懂 查了资料 PG有自带的密码复杂度校验插件 只需要使用这个插件就可以了 然后根据这几天的折腾 总结一下 怎么添加密码复杂度校验插件 PostgreSQL可以使用pa
  • 云计算与大数据第11章 大数据隐私保护习题带答案

    第11章 大数据隐私保护习题 11 1 选择题 1 以下 D 通常不是导致数据隐私泄露问题的来源 A 数据被肆意收集 B 数据集成融合 C 大数据分析 D DDOS攻击 2 以下 C 不是数据隐私保护的主要目标 A 机密性 B 完整性 C
  • 第38步 深度学习图像识别:VGG19建模(Tensorflow)

    基于WIN10的64位系统演示 一 写在前面 1 预训练模型和迁移学习 预训练模型就像是一个精心制作的省力工具 它是在大量的数据上进行训练 然后将学习到的模型参数保存下来 然后 我们可以直接使用这些参数 而不需要从头开始训练模型 这样可以节
  • PyTorch基础练习-task7(用PyTorch完成手写数字识别)

    PyTorch基础练习 task7 task7 import torch import numpy as np from torch autograd import Variable import torch nn as nn import
  • Vue全局注册组件的几种方式

    Vue全局注册组件的几种方式 1 extend vue js 代码 var com Vue extend template h1 这是第一种方式 h1 Vue component MyComponent com 此时的组件名为 MyComp
  • MySQL数据备份和恢复

    MySQL数据备份和恢复 数据备份 mysqldump是MySQL数据库备份工具 可以备份MySQL数据库中的数据和结构 生成 sql文件 方便数据的迁移和恢复 使用mysqldump工具前一定要配置环境变量 打开开始菜单 搜索 环境变量
  • 谷歌gn编译文件的使用简介

    Gn是什么 它是Google用来维护chromium项目的编译工具 现在相关的开源项目都基于gn来进行编译管理 目前一些大型系统的都会使用gn 例如谷歌 鸿蒙 Gn就是一个构建脚本生成器 是之前gyp的升级版本 并且gn是基于c 编写 效率
  • Python论文绘图利器seaborn.lineplot

    Python论文绘图利器seaborn lineplot 提示 前言 Python论文绘图利器seaborn lineplot 提示 写完文章后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 Python论文绘图利器seabor
  • Java中的equals()方法

    equals 在哪里 首先我们知道Java中Object类是所有类的父类 它里面定义了equals 方法 public boolean equals Object obj return this obj 可以看到是使用 来进行比较的 那么
  • 20 个常用的 CSS 技巧

    Sandy 推荐 高级工程师 游戏开发 下面这几个CSS技巧你可能不知道 1 彩色照片变黑白 2 所有元素垂直居中 3 禁用鼠标 4 模糊文字 小编学完能量满满的 觉得对CSS又充满了爱 你也来看看 原文链接 http caibaojian
  • sql 关联了2张表的 update 语句(转)

    转自 SQL Update 使用一个表的数据更新另一张表 update 关联两个表 基本上 select 能支持的关联和子查询操作 都能在 update 语句中使用 在 where 条件中使用子查询 update a set a age 1
  • Spark WARN cluster.ClusterScheduler: Initial job has not accepted any resources;check your cluster

    当我在Spark集群模式执行以下命令时 root debian master home hadoop spark 0 8 0 incubating bin hadoop1 run example org apache spark examp
  • DBA成长随笔---Oracle 11g,性能优化之等待事件

    目录 等待的定位方式 等待事件分类 观察等待事件的视图 常见等待事件 等待事件主要可以分为两类 即空闲 IDLE 等待事件和非空闲 NON IDLE 等待事件 空闲等待事件 是指Oracle正等待某种工作 比如用sqlplus登录之后 但没
  • 远程桌面连接出现了内部错误怎么解决?

    远程桌面连接是一种非常方便的工具 可以让用户从远程访问其他计算机的桌面界面 但是 有时候在连接远程桌面时会出现内部错误 导致无法连接或者连接后无法正常使用 在本文中 我们将会讨论远程桌面连接出现内部错误的原因和解决方法 1 确认网络连接 在
  • 2023牛客暑期多校第三场部分题解

    索引 A B D E G H I J A 直接输出两个数的差即可 再判一下无解的情况 B 其实思路还挺顺的 首先拿的牌肯定是一段增一段减一段增一段减 的序列 并且 gt n gt n gt n 的开头和 n
  • React中使用antd DatePicker限制日期选择

    场景 React中使用antd DatePicker限制日期选择 有下面一些场景 1 今天之前的日期不可选择 不包括今天 disabledDate current gt let current current format YYYY MM