ant design datepicker处理日期范围操作

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识

1需求

此刻日期之前的不能选择 当天日期结束时间比开始时间打

基本样式

   <Row gutter={12}><Col span={12}><Form.Item label="活动开始时间">{getFieldDecorator('startTimeLong', {rules: [{ required: true, message: '活动开始时间不能为空'}],})(<DatePickerformat="YYYY-MM-DD HH:mm"onChange={this.onChangeStart}disabledDate={this.handleDataPick}disabledTime={this.disabledDateTime}showTime={{format: 'HH:mm',}}/>)}</Form.Item></Col></Row><Row gutter={12}><Col span={12}><Form.Item label="活动结束时间">{getFieldDecorator('endTimeLong', {rules: [{ required: true, message: '活动结束时间不能为空'}],})(<DatePickerformat="YYYY-MM-DD HH:mm"onChange={this.downChange}disabledDate={this.handleDataPickEnd}disabledTime={this.disabledDateTimeend}showTime={{format: 'HH:mm',}}/>)}</Form.Item></Col></Row>

定义方法

  //活动开始时间onChangeStart = (value) => {this.setState({startValue: value,});};//活动结束时间downChange = (value) => {this.setState({endValue: value,});};range = (start, end) => {console.log(start, end);const result = [];for (let i = start; i < end; i++) {result.push(i);}return result;};disabledStartDate = (startValue) => {const endValue = this.state.endValue;const startValues = this.state.startValue;let day = endValue ? new Date(endValue).setHours(0, 0, 0, 0) : 0;let dayStart = startValues ? new Date(startValues).setHours(0, 0, 0, 0) : 0;if (!endValue) {return;}return day < moment(startValue).startOf('day')|| dayStart > moment(startValue).startOf('day');};disabledEndDate = (startValue) => {const endValue = this.state.endValue;const startValues = this.state.startValue;let day = endValue ? new Date(endValue).setHours(0, 0, 0, 0) : 0;let dayStart = startValues ? new Date(startValues).setHours(0, 0, 0, 0): 0;if (!endValue) {return;}return day < moment(startValue).startOf('day') || dayStart > moment(startValue).startOf('day');};//时分限制disabledDateTime = (data) => {const hours = moment(this.state.endValue).format('HH:mm:ss');const time = moment(this.state.endValue).format('YYYY-MM-DD');const currentTime = moment(data).format('YYYY-MM-DD');if (time === currentTime) {return {disabledHours: () => this.range(parseInt(hours.slice(0, 2))+ 1, 24),disabledMinutes: () => this.range(parseInt(hours.slice(3, 5)),60),};}};//时分限制disabledDateTimeend = (data) => {const hours = moment(this.state.startValue).format('HH:mm:ss');const time = moment(this.state.startValue).format('YYYY-MM-DD');const currentTime = moment(data).format('YYYY-MM-DD');if (time === currentTime) {return {disabledHours: () => this.range(0, parseInt(hours.slice(0, 2))),disabledMinutes: () => this.range(0, parseInt(hours.slice(3, 5))+ 1),};}};handleDataPick = (startValue) => {const time = new Date().getTime() - 24 * 60 * 60 * 1000;let data = moment(time);return data > moment(startValue).startOf('day');};handleDataPickEnd = (startValue) => {let startValues = new Date(this.state.startValue).getTime() - 24 * 60 * 60 * 1000;let data = moment(startValues);return data > moment(startValue).startOf('day');};

state 定义状态

 startValue: '',endValue: '',

实现效果

在这里插入图片描述在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/405966.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

proe2001安装指南

1.系统环境设置:安装PROE2001的硬盘必须是NTFS格式,所以操作平台最好是WINDOWS2000,WIN-XP,或NT4.0,必须附带一张网卡,普通的以太网卡也行(当然,PROE2001已推出可以在WIN98的FAT格式下安装的版本,但由于其不稳定性,且运行速度极慢,笔者建议最好不要安装此版本).我以WIN-XP为例.…

第二十三天 how can I 坚持

今天一90后小伙管我叫大神。。。小菜鸟一枚&#xff0c;哎。遗憾啊。不能很好的利用碎片时间&#xff0c;时间都去哪儿了。今天同学给我共享了他买的智能插座还有小米空气净化器&#xff0c;小米啊&#xff0c;节奏好快。感觉中国现在能和小米竞争的就只有360了&#xff0c;乐视…

深入react技术栈(11):样式处理

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 基本样式设置 样式中的像素值 使用className库 Css Modules css模块化遇到了哪些问题 css模块化方案 样式默认局部 使用compose组装样式 class命名技巧 实现css与js共享 外部如何覆盖局部样式 设置样式共存we…

python .center用法_Python Pandas Series.str.center()用法及代码示例

Series.str可用于以字符串形式访问系列的值并对其应用几种方法。 Pandas Series.str.center()函数用于在系列/索引中的字符串的左侧和右侧填充其他字符。该功能等效于Python的str.center()。用法&#xff1a; Series.str.center(width, fillchar’ ‘)参数&#xff1a;width:产…

点到点链路上的OSPF协议

点到点链路上的OSPF协议 OSPF的几个术语&#xff1a; 链路&#xff1a;路由器用来连接网络的接口&#xff1b; 链路状态&#xff1a;描述路由器的接口及其与邻居路由器的关系。所有链路状态信息构成链路状态数据库&#xff1b; 区域&#xff1a;有相同区域标识的一组路由器和网…

BASH中字符串的处理

BASH中字符串的处理 得到长度: 源码: %x"abcd" #方法一 %expr length $x 4 # 方法二 %echo ${#x} 4 # 方法三 %expr "$x" : ".*" 4 # expr 的帮助 # STRING : REGEXP anchored pattern match of REGEXP inSTRING 查找子串: 源码: …

用css实现三角效果

CSS border原理 一个div或者元素的border并不是我们直观意义上的一条有高度的线&#xff0c;而是一个等高梯形或者三角形&#xff08;宽高为0时&#xff09;&#xff0c;可以看一下效果&#xff1a; HTML: <div class"arrow1"></div> CSS: .arrow1{ font…

java响应很慢排插_服务响应时间慢:Java SecureRandom和/ dev / random - java

我正在尝试调试Tomcat上部署的应用程序提供的一些慢速响应。现在&#xff0c;我主要关注SecureRandom和/dev/random(其他一些可能的原因已被调查并排除)。模式如下:第一个调用恰好在Tomcat重新启动后(即使请求在启动后4分钟到达)也仅需30.0 xy秒稍后&#xff0c;某些调用恰好需…

广播多路访问链路上的OSPF

通过本实验可以了解&#xff1a; 1、 路由器OSPF的启动过程&#xff1b; 2、 启用路由接口&#xff0c;并通告网络所在路由&#xff1b; 3、 DR选举的控制&#xff1b; 4、 广播多路访问链路的特征&#xff1b; 实验拓扑图&#xff1a; 实验步骤&#xff1a; 配置各个路由器fa0…

最实用DOS命令参数的中文详解

From: http://hi.baidu.com/moodmusic/blog/item/888856ed309605d7b21cb141.html 一、DIR 命令的格式&#xff1a; dir [D:][PATH][NAME][[/A][:attrib]][/o:[sorted][/s][/l][/c[h] (1)dir /a:attrib 缺省包含所有文件(系统文件.隐含文件) attrib[:][h/-h]只显示隐含文件…

React开发(174):ant design按钮确认删除

<Popconfirmtitle"确认删除?"onConfirm{() > {this.handleDelete(row.code);}}><a style{{ marginLeft: 16 }}>删除</a></Popconfirm>

Android:生命周期案例

在学习Android应用生命周期章节中&#xff0c;书本上写的有点笼统&#xff0c;较难理解。为了理解的更深&#xff0c;写了个程序测试一下。 1、在layout文件夹中建一个dialog_layout.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout x…

vim cscope taglist 使用

From: http://blog.csdn.net/skywalkzf/article/details/5009329 一 . 安装 apt-get install exuberant-ctags cscope global cppcomplete 和 taglist 要到www.vim.org的扩展列表中下载 taglist 的下载地址: http://www.vim.org/scripts/script.php?script_id273 cppcom…

java面试没有全部答对_十道java基础面试题,你能保证全答对吗?

java初级开发面试中经常被问到的问题有好多&#xff0c;下面总结一下常见的问题&#xff0c;先给问题&#xff0c;大家思考一下再看答案。1.JDK 和 JRE 有什么区别&#xff1f;2. 和 equals 有什么区别&#xff1f;3.说说final在java中的作用。4.String类的常用方法有哪些&…

VMworld 2010旧金山胜利闭幕

一年一度的VMware的用户大会VMworld 2010上周在旧金山胜利闭幕&#xff0c;今年的VMworld&#xff0c;创造了有一个神奇&#xff0c;超记录的参加人数&#xff08;达到了17000人&#xff09;&#xff0c;超记录的实验数量&#xff08;超过15000个实验&#xff09;&#xff0c;超…

暂时停止更新博客

由于本人最近身体有恙&#xff0c;做了个小手术&#xff0c;暂时卧床休息&#xff0c;不能继续更新博客&#xff0c;还请他人谅解&#xff01;转载于:https://www.cnblogs.com/accordion/p/4458562.html

React开发(175):注意在回调里面重新渲染列表

handleDeleteOne (id, isBatch) > {console.log(id);this.props.dispatch({type: friendHelper/delBatch,payload: {idList: [id.id],},callback: (res) > {if (res.returnCode 0) {message.success(删除成功);this.getAssistList();}},});

vim 分割窗口

From: http://buaadallas.blog.51cto.com/399160/83607 Vim用户手册 - by Bram Moolenaar 译者&#xff1a;Nek_in [url]http://vimcdoc.sf.net[/url] 分割窗口 显示两个不同的文件&#xff1b;或者同时显示一个文件的两个不同地方&#xff1b;又或者并排比较两个文 件。…

scratch的积木相与java的_scratch课堂:积木块详解

scratch作为麻省理工学院推出的少儿编程工具&#xff0c;简单易用&#xff0c;十分好学。scratch不仅仅是将编程以积木的形式进行了表现&#xff0c;更是将程序的内容进行了打包处理&#xff0c;让我们只需要根据字面的意思进行拼接即可实现功能&#xff0c;不过scratch的代码还…