有一个需求是日期选择需要加一个日期限制。

于是我兴高采烈的加上去了。

// 日期可选判断方法
disabledDateFunc = current => {
const { disabledDateArray } = this.state;
if (disabledDateArray) {
return (
current && (current < disabledDateArray[0] || current > disabledDateArray[1])
);
} else {
return current;
}
};

结果发现一个问题:

比如我希望 用户可以选择 4月1日 到4月4日 。

结果 4月4日 也不能选?

后来知道原因了。

日期选择器用的是 moment 库。

当声明 moment 对象的时候,如果只声明日期,没有声明时间,时间就是当前时间(日期当然是声明的日期)。

而当前时间一定是在今天之内的,也就是说当判断的时候,临界值的时间会比当前时间小!

所以最后一天就不能选择了。

解决方法很简单。

// 日期可选判断方法
disabledDateFunc = current => {
const { disabledDateArray } = this.state;
if (disabledDateArray) {
return (
current && (current < disabledDateArray[0] || current > disabledDateArray[1].endOf('day'))
);
} else {
return current;
}
};

OK。解决问题。

以上

antd踩坑:日期选择器的可选日期控制的问题的更多相关文章

  1. element-ui DatePicker 日期选择器 让结束日期大于开始日期

    element-ui  DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...

  2. antd踩坑:value.locale is not a function

    这个问题来源于日期选择器 RangerPicker 的特殊情况. <Col span={7} key={9}> <FormItem label="投运时间" {. ...

  3. react : umi 引入 antd 踩坑

    首先要明确一个问题. 不管是 antd 还是 dva 还是别的什么东西,他们都是 umi 的插件——只要这个项目是使用 umi 脚手架生成的. 所以第一步应该是 .umirc.js (config.j ...

  4. 日期选择器:jquery datepicker的使用

    helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui     在jquery ui中,提供了一个非常实用 ...

  5. Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker

    原文:Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker 在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习And ...

  6. Android中DatePicker日期选择器的使用和获取选择的年月日

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  7. lua时间戳和日期转换及踩坑

    介绍lua的日期函数常用方法及我的一个踩坑. 时间戳转日期 os.date("%Y%m%d%H",unixtime) --os.date("%Y%m%d%H", ...

  8. java用毫秒数做日期计算的一个踩坑记录

    错误示例: Date today = new Date(); Date nextMonth = new Date(today.getTime() + 30* 1000*60*60*24); print ...

  9. Date()日期函数浏览器兼容问题踩坑

    原文:Date()日期函数浏览器兼容问题踩坑 之前用layui做的一项目中,table中用到了日期格式化的问题.直接没多想,撸代码就完了呗,结果最近一段时间客户反馈说显示日期跟录入日期不一样(显示日期 ...

随机推荐

  1. 15.DRF-分页

    Django rest framework(6)----分页 第一种分页 PageNumberPagination 基本使用 (1)urls.py urlpatterns = [ re_path('( ...

  2. Redis自带压测工具(redis-benchmark.exe)

    redis做压测: 可以用自带的redis-benchmark工具,使用简单 压测命令:redis-benchmark -h 127.0.0.1 -p 6379 -c 50 -n 10000 压测需要 ...

  3. disruptor架构一

    Disruptor是一个高性能的异步处理框架,或者可以认为是最快的消息框架(轻量的JMS),也可以认为是一个观察者模式的实现,或者事件监听模式的实现. 在使用之前,首先说明disruptor主要功能加 ...

  4. Plugns

    Lombok Translation Rainbow Brackets

  5. 入门大数据---Spark开发环境搭建

    一.安装Spark 1.1 下载并解压 官方下载地址:http://spark.apache.org/downloads.html ,选择 Spark 版本和对应的 Hadoop 版本后再下载: 解压 ...

  6. dart快速入门教程 (3)

    3.运算符 运算符本质上就是代表某运算规则的符号,例如: + ,这个符号,代表着数学运算里面的加法,按照加法法则进行运算即可,同理,学习运算符就是掌握这些规则而已 3.1.算术运算符 算术运算符主要包 ...

  7. 执行dotnet *.dll启动项目,如何修改环境变量----ASPNETCORE_ENVIRONMENT

    docker环境: 启动容器时,添加参数:-e " ASPNETCORE_ENVIRONMENT=Development" windows系统: 命令行,以管理员身份运行:setx ...

  8. zookeeper搭建和kafka搭建

    zookeeper和kafka都是基于java的 zookeeper 1.安装jdk 官网下载rpm文件 rpm -ivh 文件.rpm 2.下载zookeeper tar -xv 压缩文件 -C 目 ...

  9. LESS 原理,一款css的预处理程序Less的使用

    ​Less一种动态样式语言,LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数...LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node ...

  10. js常用删除

    1.对象删除 1.1删除属性 用(delete 对象.属性 )的方式进行: var people={"name":"zhangsan",age:18}; del ...