时间戳

首页 > 解决方案 > 在 antd 日期选择器中禁用当前日期之前和当前日期 1 个月之后的日期

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

问题描述

我正在为我的反应应用程序使用 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我可以禁用下个月的日期一样。
我的问题我无法返回这两个值。
如何禁用以前的日期和下个月的日期

标签： reactjsdatedatepickerantd

解决方案

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

当条件是：

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}
/>

推荐阅读