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

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

// 日期可选判断方法
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. Shiro实战教程-刘志敏-专题视频课程

    Shiro实战教程-62人已学习 课程介绍        本教程只介绍基本的 Shiro 使用,不会过多分析源码等,重在使用. 适用人群: 1.了解基于Servlet进行Web应用开发 2.了解Spr ...

  2. 深入理解JVM(③)虚拟机性能监控、故障处理工具

    前言 JDK的bin目录中有一系列的小工具,除了java.exe.javac.exe这两个编译和运行Java程序外,还有打包.部署.签名.调试.监控.运维等各种场景都会用到这些小工具. 这些工具根据软 ...

  3. 观察者模式(Observer Pattern)(二):HeadFirst中的气象站的实现

    1 观察者模式的原理,首先由一个主题,当主题发送变化的时候,通知该主题的订阅者 按照上面的分析我们来进行设计 1.抽象主题Subject public interface Subject { publ ...

  4. mysqldump: Got error: 1044: Access denied for user 'root'@'%' to database 'hhh' when using LOCK TABLES

    错误原因:mysqldump 命令执行时,需要四种权限,分别是:select,show view,trigger,lock table.但是因为没有lock table的权限,导致上述错误发生. 修改 ...

  5. 【WPF】DataGrid多表头的样式设计

    需求 在使用WPF开发时,使用DataGrid列表显示数据时,有些字段可以进行分组显示,用于更好的表达它们之间存在的某种关系,因此就考虑到要对DataGrid的表头进行扩展,可以显示多行表头,让这些有 ...

  6. Myeclipse启动WebLogic 总是报账号密码无效<Authentication denied: Boot identity not valid

    在MyEclipse下配置了Weblogic 11后,每次启动从报错: Critical> 看了下描述,是用户名及密码什么的问题,我想起来,配置Weblogic 的域的时候将密码改成了12345 ...

  7. 函数进化到Lambda表达式的三过程

    假如我们想要从一个整型数组中取出其中是奇数的选项,其实现方式有很多, 接下来通过三种方法的对比理解Lambda表达式的用途,需要了解的朋友可以参考下         //声明委托类型 public d ...

  8. css条纹背景样式、及方格斜纹背景的实现

    一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...

  9. 如何使用CSS创建巧妙的动画提示框

    当你的用户需要一些额外的上下文来放置图标,或者当他们需要一些保证来点击按钮,或者可能是一个复活节彩蛋的标题来搭配一个图片时,工具提示是一个很好的方法来增强用户界面.现在让我们来制作一些动画工具提示,只 ...

  10. 前端分页(js)

    //前端分页 var limit = 10; //每页显示数据条数 var total = $('#host_table').find('tr').length; var allPage = tota ...