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中用到了日期格式化的问题.直接没多想,撸代码就完了呗,结果最近一段时间客户反馈说显示日期跟录入日期不一样(显示日期 ...
随机推荐
- NodeJs通过HTTP模块发起GET|POST请求
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] Node.js ...
- Stream替代for-编码五分钟-划水五小时
Stream替代for-编码五分钟-划水五小时 天空没有痕迹,风雨已在心中. 背景:使用Stream 流式操作取代俄罗斯式套娃的for循环,解放底层劳动密集型码畜的双手,使编码五分钟划水五小时,不再是 ...
- 尚硅谷spring aop详解
spring的aop实现我们采用AspectJ的方式来实现,不采用spring框架自带的aop aspect实现有基于注解的方式,有基于xml的方式,首先我们先讲基于注解的方式,再将基于xml的方式 ...
- Js中各种类型的变量在if条件中是true还是false
如果操作数是一个对象,返回true如果操作数是一个空字符串,返回false如果操作数是一个非空字符串,返回true如果操作数是数值0,返回false如果操作数是任意非0数值(包括Infinity),返 ...
- Linux--容器命令
***执行:yum install lrzsz 然后sz和rz命令就可以使用了 1.查找文件的命令:find / -name [文件名:override.xml] eg: find / -name ...
- Apache POI 操作Excel(1)--POI简介
Apache POI(http://poi.apache.org/)是一个用于读取和编写Microsoft Office文件格式开源的Java项目,现在已经可以操作Excel,PowerPoint,W ...
- Android详细介绍MPAndroidChart-LineChart
在开发当中曲线图用的时候太多了,之前都是自己手写,之后发现太累还丑不符合需求 MPAndroidChart 先介绍LineChart 0.效果图 首先依赖 1. implementation 'co ...
- (私人收藏)红色项目工作计划总结汇报PPT模板
红色项目工作计划总结汇报PPT模板 https://pan.baidu.com/s/1fr-PB7ieveSIqSXrB0YXsgbgdc
- Electron + Websoket 通讯
Electron + WebSocket + node.js 通信 描述 本文主要介绍了结合 Electron 和 node.js 进行 Websocket 通讯的一个简单例子. 项目结构 main. ...
- C语言资料分享
链接:https://pan.baidu.com/s/1hoc0sA0bDAq9XGC0pi2Kcg 提取码:60pn 复制这段内容后打开百度网盘手机App,操作更方便哦 c primer plus下 ...