antd timePicker组件限制当前之前的时间不可选择
import React from 'react';
import ReactDOM from 'react-dom';
import {Input,DatePicker,Form,Col,Button,Select} from 'antd';
import 'antd/dist/antd.css';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import moment from 'moment';
import ChildrenCom from './children-com.js';
moment.locale('zh-cn');
const { RangePicker,TimePicker } = DatePicker;
const { Option } = Select; class FormItem extends React.Component{
constructor(props){
super(props);
this.state={
count:1,
time:'',
startTime:new Date(+new Date() +8*3600*1000).toISOString().split("T")[1].split(".")[0]//获取当前时间
};
this.myRef = React.createRef(); } timeChange = (time,timeString)=>{
this.setState({
time:timeString
})
};
//限制小时显示
disabledHours = ()=>{
let hours=[];
let time = this.state.startTime;
// let time=new Date(+new Date() +8*3600*1000).toISOString().split("T")[1].split(".")[0];
// this.setState({startTime:time},()=>{console.log("11")});
let timeArr = time.split(":");
for(var i=0;i<parseInt(timeArr[0]);i++){
hours.push(i)
}
return hours;
};
//限制分钟
disabledMinutes = (selectedHour)=>{
let {startTime} = this.state;
let timeArr =startTime.split(":");
let minutes =[];
if(selectedHour == parseInt(timeArr[0])){
for(let i=0;i<parseInt(timeArr[1]);i++){
minutes.push(i);
}
}
return minutes;
};
//限制秒
disabledSeconds = (selectedHour,selectedMinute)=>{
let {startTime} = this.state;
let timeArr = startTime.split(':');
let second = [];
if (selectedHour == parseInt(timeArr[0]) && selectedMinute == parseInt(timeArr[1])) {
for(var i = 0; i <= parseInt(timeArr[2]); i++) {
second.push(i)
}
}
return second;
}; render(){
return(
<div>
<TimePicker
disabledHours = {this.disabledHours}
disabledMinutes = {this.disabledMinutes}
disabledSeconds = {this.disabledSeconds}
value={
this.state.time ? moment(this.state.time,"HH:mm:ss"):moment()
}
onchange={this.timeChange}
format="HH:mm:ss"
/> </div>
)
}
}
export default FormItem;
实现效果图如下

antd timePicker组件限制当前之前的时间不可选择的更多相关文章
- Flex自定义组件开发之日周月日期选择日历控件
原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...
- element-UI时间控件:日期时间的选择范围的控制方法
例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 :当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选:实现如下: <el ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- layer过去的时间不能选择,只能选择未来的时间 LayUI中的时间日期控件,设置时间范围,
默认Layui中的时间控件显示如下: 我当时系统时间是2018-06-07, 我需要做的是2018-06-07之后过去的时间不能选择 <p><span>时间范围:</sp ...
- asp.net中的时间日期选择控件
asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏 在系统中经常需要进行时间日期选择(比如查询时间范 ...
- 【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。
自动提交的属性: AutoPostBack="True" 1.RadioButtonList 单选集合 -属性:RepeatDirection:Vertical (垂直排布 ...
- TCP超时重传时间的选择
一---导读 TCP超时重传时间的选择是计算机网络中较复杂的问题之一,但幸好前辈们都把路铺好了,我们只需要学习并且遵循这些规则,有能力的话去进一步改正. 二---必知的一些专业术语 A--RTT( r ...
- 使用 antd Table组件, 异步获取数据
使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...
- 使用antd UI组件有感
公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getField ...
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
随机推荐
- Bugku-ez_misc[wp]
题目描述 1.拿到一份abc.rar文件,里面有一个加密call.png (1)通过file . binwalk . 伪加密一顿小输出都不行,于是放进16进制编辑器查看: 文件头不对! (2)修改为 ...
- SVN 提交失败 Unexpected HTTP status 200 'OK' on 'PUT' request to
提交SVN 时 提示 Commit Failed Unexpected HTTP status 200 'OK' on 'PUT' request to 旧的文件在SVN 上也无法删除,删除文件 ...
- HIVE- 各年逐月累加函数
select year_flag,month_flag,field,SUM(field) OVER (PARTITION BY year_flag ORDER BY month_flag)from t ...
- <CONTAINING_RECORD宏>引发的<结构体深度剖析(内存对齐,对齐参数,偏移量)>
什么是结构体内存对齐?为什么要对齐?怎样对齐? 结构体内存对齐:元素是按照定义顺序一个一个放到内存中去的,但并不是紧密排列的. 从结构体存储的首地址开始,每个元素放置到内存中时,它都会认为内存是按照自 ...
- Java的引用(强软弱虚)
Java中引用相关的类 类 名 说明 ReferenceQueue 引用队列 与某个引用类绑定,当引用死亡后会进入这个队列对象标记为垃圾(并不代表回收了)后或虚引用的对象被回收后,会加入到引用队列 H ...
- oracle导出csv文件后导入mysql
场景: oracle数据库中有与mysql同名表,需要将oracle表数据导入mysql,需要手工操作 工具: navicat premium 解决方案: 1.使用plsql工具从oracle导出cs ...
- 关于protobuf报错'tr1/unordered_map' file not found
这个问题的话,查了很多资料,总的来说就是C++版本的问题,新版本的namespace结构变化了,C++库的层级结构变化了 1.config.h HASH_MAP_H HASH_SET_H 新版本 ...
- SQL server数据库 账户SA登录失败,提示错误:18456
在我们使用数据库的时候,偶尔会遇到一些登录上的错误提示.比如,在数据库配置上没有正确开启用户的登录策略以及服务器身份验证模式时,就会提示"用户'sa'登录失败.(Microsoft SQL ...
- Android Studio相关配置说明
介绍:Android Sdutio 是谷歌推出的一个 Android 集成开发工具. 现已将 SDK(software development kit)集成到 Android Studio 中.可以直 ...
- django项目初创建报错TypeError: unsupported operand type(s) for /: 'str' and 'str'
解决办法: 'DIRS': [os.path.join(BASE_DIR, 'templates')],