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 ...
随机推荐
- Docker 容器基本操作(基础)
拉钩教育App版权问题,如果转载请附带拉钩教育等信息 一,什么是容器 容器是基于镜像创建的可运行实例,并且单独存在,一个镜像可以创建出多个容器 二.容器生命周期,五个状态 stopped : 停止状态 ...
- vscode 报错command line option ‘-std=c11‘ is valid for C/ObjC but not for C++
cc1plus.exe: warning: command-line option '-std=c17' is valid for C/ObjC but not for C++ 编译运行出现警告,原因 ...
- MYSQL启动:'服务没有相应控制功能'问题解决
启动 MySQL 服务,此处若是显示错误'服务没有相应控制功能' 尝试解决方法:访问如下网站: https://cn.dll-files.com/vcruntime140_1.dll.html 下载 ...
- excel快速生成相同内容
先选中你所需要的单元格,如图所示: 输入自己想要的字符,然后按ctrl+enter,如图所示:
- 树莓派Raspbian 玩耍
树莓派Raspbian玩耍 把第一次安装树莓派并通过花生壳实现内网穿透的过程记录下来 下载工具 Win32DiskImager v0.9.zip 和 SD Formatter 4.0 for SD/S ...
- Spring 常见注解及其作用
1.@ConfigurationProperties 可以非常方便的把资源文件中的内容绑定到对象上 绑定单一属性值,绑定整个对象属性 2.@Value("${app.n ...
- 服务器consul与本地服务健康检查不通问题解决
(125条消息) 服务器consul与本地服务健康检查不通问题解决_向往鸟的博客-CSDN博客_consul健康检查失败 .MathJax, .MathJax_Message, .MathJax_Pr ...
- 路飞项目day01 软件开发流程、PIP永久换源、虚拟环境、路飞项目开始
一.软件开发流程(重要) 我们作为一个后端,虽然一般情况下只专注自己的那一部分事情,但是有时候小公司,人员架构没那么细化,或者老板就是想省钱少招点人,我们就得大致熟悉软件开发流程,知道上司.其他同 ...
- 使用go自定义生成项目LISENSE(授权协议)
需要使用一个使用go开发的工具,叫license,在Windows下安装这个工具,请确保你使用的go sdk是1.16以上的版本,然后执行下面的命令: go install github.com/ni ...
- GIS空间分析和建模复习重点2
10.缓冲区和缓冲区分析的概念 (1)缓冲区分析分为 点缓冲区分析:一般是围绕点对象建立一定半径的圆形区域. 线缓冲区分析:沿着线的两侧建立距离为缓冲距的带状区域. 面缓冲区分析:是沿着多边形的边界建 ...