antd踩坑:日期选择器的可选日期控制的问题
有一个需求是日期选择需要加一个日期限制。
于是我兴高采烈的加上去了。
// 日期可选判断方法
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踩坑:日期选择器的可选日期控制的问题的更多相关文章
- element-ui DatePicker 日期选择器 让结束日期大于开始日期
element-ui DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...
- antd踩坑:value.locale is not a function
这个问题来源于日期选择器 RangerPicker 的特殊情况. <Col span={7} key={9}> <FormItem label="投运时间" {. ...
- react : umi 引入 antd 踩坑
首先要明确一个问题. 不管是 antd 还是 dva 还是别的什么东西,他们都是 umi 的插件——只要这个项目是使用 umi 脚手架生成的. 所以第一步应该是 .umirc.js (config.j ...
- 日期选择器:jquery datepicker的使用
helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery datepicker jquery ui 在jquery ui中,提供了一个非常实用 ...
- Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker
原文:Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker 在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习And ...
- Android中DatePicker日期选择器的使用和获取选择的年月日
场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...
- lua时间戳和日期转换及踩坑
介绍lua的日期函数常用方法及我的一个踩坑. 时间戳转日期 os.date("%Y%m%d%H",unixtime) --os.date("%Y%m%d%H", ...
- java用毫秒数做日期计算的一个踩坑记录
错误示例: Date today = new Date(); Date nextMonth = new Date(today.getTime() + 30* 1000*60*60*24); print ...
- Date()日期函数浏览器兼容问题踩坑
原文:Date()日期函数浏览器兼容问题踩坑 之前用layui做的一项目中,table中用到了日期格式化的问题.直接没多想,撸代码就完了呗,结果最近一段时间客户反馈说显示日期跟录入日期不一样(显示日期 ...
随机推荐
- Shiro实战教程-刘志敏-专题视频课程
Shiro实战教程-62人已学习 课程介绍 本教程只介绍基本的 Shiro 使用,不会过多分析源码等,重在使用. 适用人群: 1.了解基于Servlet进行Web应用开发 2.了解Spr ...
- Error: Cannot find module 'webpack'
运行 npm start 报错 Error: Cannot find module 'webpack' 安装了 npm install --save-dev webpack cnpm install ...
- Mysql报错Error Code: 1175. You are using safe update
使用MySQL执行update的时候报错:Error Code: 1175. You are using safe update mode and you tried to update a tabl ...
- SSL/TSL 原理( 握手原理和传输原理)
本文参考<计算机网络 自顶向下方法> 目录 背景 通信的4要素 SSL/TLS in Detail 通讯保证 The Handshake Protocol 1. Initial Clien ...
- 手把手教你使用Python抓取QQ音乐数据(第二弹)
[一.项目目标] 通过Python爬取QQ音乐数据(一)我们实现了获取 QQ 音乐指定歌手单曲排行指定页数的歌曲的歌名.专辑名.播放链接. 此次我们在之前的基础上获取QQ音乐指定歌曲的歌词及前15个精 ...
- 使用Apache Hudi构建大规模、事务性数据湖
一个近期由Hudi PMC & Uber Senior Engineering Manager Nishith Agarwal分享的Talk 关于Nishith Agarwal更详细的介绍,主 ...
- 深入理解JVM(③)Java模块化系统
前言 JDK9引入的Java模块化系统(Java Platform Module System ,JPMS)是 对Java技术的一次重要升级,除了像之前JAR包哪有充当代码的容器之外,还包括: 依赖其 ...
- Unable to load configuration. - action - file:/C:/Program%20Files/Apache%20Software%20Foundation/Tomcat%209.0/webapps/Teacher04/WEB-INF/classes/struts.xml:9:54
发布一个struts2项目的时候tomcat显示下面这个错误,我的本能感觉就是我的struts.xml或者web.xml写错了,可是我字母找都没发现,于是百度一番,可是我对那些人的回答表示怀疑,感觉应 ...
- Linux必须要掌握的命令
Linux必须要掌握的命令 文件目录操作命令 ls 命令格式:ls [选项] [目录名] 命令功能:列出目标目录中所有的子目录和文件 常用参数:-a,-l,-R, 例1:列出/home/peidach ...
- 在页面制作的时候常用的html页面滚动加载,可视区域判断方法
演示图 考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的. 代码 .ss li { margin: 40px; } <d ...