Ant Design的DatePicker组件禁用日期选择范围（结束日期大于开始日期）禁用状态-白红宇的个人博客

Ant Design的DatePicker组件禁用日期选择范围（结束日期大于开始日期）禁用状态

发布日期：2021-05-20 10:06:28 浏览次数：22 分类：技术文章

本文共 1110 字，大约阅读时间需要 3 分钟。

1、日期选择框在这里插入图片描述

2、

3、已结束时间为例

在disabledDate这个配置项对应的方法中，如果返回的是false，则可以选择时间，返回true则无法对时间进行选择，这一结论至关重要

// 结束时间选择  disabledRegistrationEndDate = endDate => {
       // endReviewDate截止审核时间    const {
    startDate,endReviewDate } = this.state;    if(endReviewDate && endDate.valueOf() > endReviewDate.valueOf()){
         return true;    }    return endDate < moment(startDate).add(1, 'days');    //禁用选择范围为开始时间加一天  }

4、报名结束时间事件处理

注意这里的时间需要使用Moment进行格式转换

handleRegistrationEndDateChange = value => {
       if(value === null){
         return this.handleDateChange('endDate', value);    }    const {
    startDate,endReviewDate } = this.state;    if(startDate && (startDate.valueOf() > value.valueOf() &&  startDate.valueOf() === value.valueOf())){
         message.info('报名结束时间不能小于等于报名开始时间');      return false;    }      if (moment(endReviewDate).format("YYYY-MM-DD") === moment(value).format("YYYY-MM-DD")) {
         message.info('报名结束时间不能大于等于截止审核时间');      return false;    }    this.handleDateChange('endDate', value);  };

简单粗暴易理解可直接看这里

5、具体详情可参考

https://www.jianshu.com/p/e23f61cd0bea

转载地址：https://blog.csdn.net/weixin_45416217/article/details/104614681 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：react-dva-ant-design-pro在编辑侧边菜单栏（添加徽标）

下一篇：设置文本省略号移入显示布局不变完整完美解决方案