react+antd中DatePicker组件（不能选中当前时间以前的时间）的代码

马娟

于 2018-10-11 15:20:17 发布

阅读量7.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react antd

本文链接：https://blog.youkuaiyun.com/weixin_41077029/article/details/83012921

react 同时被 2 个专栏收录

17 篇文章

订阅专栏

antd

16 篇文章

订阅专栏

本文介绍了一个React组件，使用Ant Design的DatePicker实现禁止选择当前时间前的日期和时间的功能。通过disabledDate属性，确保用户只能选择未来的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本文章主要功能是实现不能选中当前时间以前的时间：即不能选中此刻之前的时间，比如此刻是2018年10月11日15:18，那么2018年10月11日15:18分之前的所有时间都不能选，包含时分。如有疑问，欢迎留言交流！

代码

const { DatePicker, Row } = antd;
class limitTime extends Component{
    state={
       	currentTime:null,
    }
    render(){
    	<Row>
			<DatePicker
				disabledDate={this.disabledEndDate}
				showTime={{ format: 'HH:mm' }}
				format="YYYY-MM-DD HH:mm"
				onOpenChange={this.handleEndOpenChange}
				/>
		</Row>
    }
    disabledEndDate = (endValue) => {
		let me = this;
		const startValue = this.state.currentTime;	
		if (!endValue || !startValue) {
		  return false;
		}
		return endValue.valueOf() <= startValue.valueOf();
	}
	handleEndOpenChange = (open) => {
		let me = this
		if(open){
			me.currentTime = moment();
		}
		this.setState({currentTime:moment() });
	}
    componentDidMount(){
	
	}
	componentDidUpdate(){

	}
	componentWillUnmount(){

	}
}