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

最新推荐文章于 2025-11-10 01:42:18 发布

转载最新推荐文章于 2025-11-10 01:42:18 发布 · 8.5k 阅读

收录于

antd design 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用Ant Design的DatePicker组件限制用户选择当前时间之前时间的方法。通过禁用结束日期并比较开始时间和结束时间的值，确保了用户无法选择已过的时间点。

不能选中当前时间以前的时间：即不能选中此刻之前的时间，比如此刻是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(){

   }
}
原文：https://blog.csdn.net/weixin_41077029/article/details/83012921