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

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

  1. // 日期可选判断方法
  2. disabledDateFunc = current => {
  3. const { disabledDateArray } = this.state;
  4. if (disabledDateArray) {
  5. return (
  6. current && (current < disabledDateArray[0] || current > disabledDateArray[1])
  7. );
  8. } else {
  9. return current;
  10. }
  11. };

结果发现一个问题:

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

结果 4月4日 也不能选?

后来知道原因了。

日期选择器用的是 moment 库。

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

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

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

解决方法很简单。

  1. // 日期可选判断方法
  2. disabledDateFunc = current => {
  3. const { disabledDateArray } = this.state;
  4. if (disabledDateArray) {
  5. return (
  6. current && (current < disabledDateArray[0] || current > disabledDateArray[1].endOf('day'))
  7. );
  8. } else {
  9. return current;
  10. }
  11. };

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. shellcode 免杀(一)

    工具免杀 选择了几个简单或者近期还有更新的免杀工具进行学习 ShellcodeWrapper https://github.com/Arno0x/ShellcodeWrapper 该工具的原理是使用异 ...

  2. 程序员必须掌握的Java 框架,小白学会之后15k不是问题

    Spring 的核心特性是什么?Spring 优点? Spring 的核心是控制反转(IoC)和面向切面(AOP) Spring 优点: 程序员必须掌握的Java 框架,学会之后50k不是问题 (1) ...

  3. 容器技术之Docker-swarm

    前文我聊到了docker machine的简单使用和基本原理的说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13160915.html:今天我们来聊一聊d ...

  4. [ C++ ] set_new_handler解析

    当 operator new 中malloc返回值为0(NULL)时,表示分配内存失败(可能是因为内存不足), 此时会通过_callnewh()调用用户通过set_new_handler()设定的ne ...

  5. appium安装的permission deny处理方法-20200204

    npm -v 报错:Error: EPERM: operation not permitted, mkdir 'C:\soft\nodejs' 起因:原本安装node在C盘soft文件夹下,按node ...

  6. Linux 查看日志的时候常用命令总结

    Linux ~ 查看日志的常用命令总结 1.tail -n <行数>,显示文件的尾部n行内容. -f 循环读取,常用于查阅正在改变的日志文件. ① tail   -f  test.log  ...

  7. docker 安装mysql:latest 问题

    背景 周末闲着没事,然后想着在虚拟机用docker装个mysql吧.然后就开始安装了. 正文 打开dockerhub.com,在输入框输入mysql,选择mysql第一个,进入后找到How to us ...

  8. maven跳过测试打包

    1.在执行run as时候加上参数: clean install compile -Dmaven.test.skip=true   2.在pom文件中添加如下: <plugins> < ...

  9. vue基础入门(3)

    3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...

  10. 运行python出现 SyntaxError: Non-ASCII character '\xe6' in file /Users/finup/Documents/python_project/test.py 解决办法

    使用pycharm运行程序时出现以下错误 这个错误主要是由于python2的编码默认是ASCII,你的文件里有中文就必须要用utf-8编码,只要在文件需要在文件开头标注 #coding=utf-8如下 ...