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组件限制当前之前的时间不可选择的更多相关文章

  1. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  2. element-UI时间控件:日期时间的选择范围的控制方法

    例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 :当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选:实现如下: <el ...

  3. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  4. layer过去的时间不能选择,只能选择未来的时间 LayUI中的时间日期控件,设置时间范围,

    默认Layui中的时间控件显示如下: 我当时系统时间是2018-06-07, 我需要做的是2018-06-07之后过去的时间不能选择 <p><span>时间范围:</sp ...

  5. asp.net中的时间日期选择控件

    asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏     在系统中经常需要进行时间日期选择(比如查询时间范 ...

  6. 【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。

    自动提交的属性: AutoPostBack="True" 1.RadioButtonList     单选集合 -属性:RepeatDirection:Vertical (垂直排布 ...

  7. TCP超时重传时间的选择

    一---导读 TCP超时重传时间的选择是计算机网络中较复杂的问题之一,但幸好前辈们都把路铺好了,我们只需要学习并且遵循这些规则,有能力的话去进一步改正. 二---必知的一些专业术语 A--RTT( r ...

  8. 使用 antd Table组件, 异步获取数据

    使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...

  9. 使用antd UI组件有感

    公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getField ...

  10. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

随机推荐

  1. nginx转发tomcat之https不生效

    1.修改tomcat配置server.xml,让它从请求头中的X-Forwarded-Proto读取 <!-- xpath://Server/Service/Engine/Value --> ...

  2. du命令_Linux du命令:查看文件夹和文件的磁盘占用情况

    du 命令,全称是 disk usage,用来展示磁盘使用量的统计信息. du 和 df 算是一对同门师兄弟,du 侧重在文件夹和文件的磁盘占用方面,而 df 则侧重在文件系统级别的磁盘占用方面.这两 ...

  3. 使用ESP8266连接中文wifi

    使用XCOM串口调试助手调试ESP8266时,想要连接学校的wifi,通过AT+CWLAP可以显示出附近所有wifi的列表,可是XCOM以ascii码格式显示文本,所以中文就乱码了. 一开始我不知道这 ...

  4. java中Atomic变量的实现原理是怎样的?

    转载自: Java3y https://www.zhihu.com/question/39130725/answer/1006948362 一.基础铺垫 首先我们来个例子: public class ...

  5. RabbitMQ异常注意 reply-code=404, reply-text=NOT_FOUND - no exchange 'topic' in vhost '/', class-id=50

    1.问题排查: 第一次,一定要先启动Provider再启动Consumer!!! rabbitmq为初始状态没有队列信息,然后我又没有启动consumer,所以导致provider找不到queue和e ...

  6. Excel条件格式的应用

    一.突出单元格规则 大于/小于/等于/包含/发生日期/重复值 发生日期(自定义)通常通过辅助单元格进行:选中单元格区域,条件格式-新建规则-选择规则类型(使用公式确定要设置的单元格),设置内容如下 二 ...

  7. ssh登录、scp传送文件

    一.ssh 1.远程登陆服务器 ssh user@hostname user: 用户名hostname: IP地址或域名 第一次登录时会提示:The authenticity of host '123 ...

  8. Java基础学习:11、断点调试

    1.可以用来查看错误以及查看代码的运行过程. 2.如何使用:

  9. vue整体回顾

    vue大回顾 1 前端发展史 react vue---> 前端工程化---> 前后端分离 大前端:flutter uni-app 2 Vue介绍 单页面应用(spa) 组件化开发 mvvm ...

  10. 动态构造LINQ表达式导致EFCore内存泄漏

    EFCore版本 v3.1.4 上述代码模拟100次的Id包含查询,并且demoExpr1和demoExpr2使用两种方式构造LINQ表达式,第二种会导致内存泄漏. 使用第一种方法构造查询条件的值,结 ...