在 antd 日期选择器中禁用当前日期之前和当前日期 1 个月之后的日期

Posted 2023-05-07

【中文标题】在 antd 日期选择器中禁用当前日期之前和当前日期 1 个月之后的日期

【英文标题】：disable dates before current date and after 1 month of current date in antd date picker

【发布时间】：2019-05-14 19:24:34

【问题描述】：

我正在为我的 react 应用程序使用 ant UI，我有一个日期选择器。我想禁用当前日期之前和当前日期 1 个月之后的日期。 我的日期选择器

<DatePicker
     defaultValue=moment()
     format=dateFormat
     className="datePicker"
     onChange=dateHandler
     ref=(dateSelect) =>  this.dateSelect = dateSelect 
     disabledDate=(current) => 
         return moment().add(-1, 'days')  >= current && 
              moment().add(1, 'month')  <= current;
         
     onFocus=this.rideDateGA
/>

如果我在这里return moment().add(-1, 'days') >= current，那么它会从今天开始禁用之前的日期，但不会禁用日期之后的月份。 就像我 return moment().add(1, 'month') <= current 一样，那么我可以禁用下个月的日期。我的问题是我无法返回这两个值。 如何禁用以前的日期和下个月的日期

【问题讨论】：

我已经用这个解决方案解决了：***.com/a/68923354/14249303

我已经用这个解决方案解决了：***.com/a/68923354/14249303

【参考方案1】：

对于要禁用的日期，您需要它同时满足这两个条件。

当条件为：

moment().add(-1, 'days')  >= current && moment().add(1, 'month')  <= current;

当第一个 moment().add(-1, 'days') >= current 是 false 时，条件返回 false，这就是您看到当前日期之前的几天被正确禁用的原因。

要使条件正确，您需要：

<DatePicker
  defaultValue=moment()
  format=dateFormat
  className="datePicker"
  onChange=dateHandler
  ref=(dateSelect) =>  this.dateSelect = dateSelect 
  disabledDate=(current) => 
     return moment().add(-1, 'days')  >= current ||
          moment().add(1, 'month')  <= current;
     
  onFocus=this.rideDateGA
/>

【参考方案2】：

要在当前日期之前和当前日期的 1 个月之后禁用，以下是代码。

disabledSubmissionDate = (submissionValue) => 
    if (!submissionValue) 
        return false;
    
    return (submissionValue.valueOf() < Date.now()) || (submissionValue.valueOf() >= moment().add(1, 'month'));



<DatePicker disabledDate=this.disabledSubmissionDate onChange=this.SubmissionDateOnChange />

【讨论】：

非常感谢您的帮助。它对我有用。