Отключить даты до текущей даты и после 1 месяца текущей даты в окне выбора даты и времени

Question

Я использую пользовательский интерфейс Ant для моего приложения реакции, там у меня есть средство выбора даты. Я хочу отключить даты до текущей даты и после 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 тогда я могу отключить даты следующего месяца.
моя проблема, я не могу вернуть оба значения.
как я могу отключить предыдущие даты и даты следующего месяца

Answer 1

Чтобы даты были отключены, вам необходимо выполнить оба эти условия.

Когда условие:

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

Условие возвращает ложь, когда первый moment().add(-1, 'days') >= current является 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}
/>

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

Answer 3

В моем сценарии пользователь не должен выбирать будущие даты. От даты начала они могут выбрать один месяц, но не будущие даты. Я использовал приведенный ниже код, это сработало для меня. может кому пригодится.

      import React, { useState } from 'react';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

const App = () => {
  const [dates, setDates] = useState([]);
  const [hackValue, setHackValue] = useState();
  const [value, setValue] = useState();
  const disabledDate = current => {
    if (!dates || dates.length === 0) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'month') >= 1; // start date to one month
    const tooEarly = current.isSameOrAfter(moment()); // untill today
    return tooEarly || tooLate;
  };

  const onOpenChange = open => {
    if (open) {
      setHackValue([]);
      setDates([]);
    } else {
      setHackValue(undefined);
    }
  };

  return (
    <RangePicker
      value={hackValue || value}
      disabledDate={disabledDate}
      onCalendarChange={val => setDates(val)}
      onChange={val => setValue(val)}
      onOpenChange={onOpenChange}
    />
  );
};

ReactDOM.render(<App />, mountNode);

Ссылка: https://ant.design/components/date-picker/#components-date-picker-demo-select-in-range

(Этот пример будет работать в течение 7 дней.)