Question

我想禁用今天或过去的日期。下面是我的处理方法，但是它没有用。我仍然可以选择今天之前的日期。

日期部分：

type Props = {
  onDateChange: Function,
};

type State = {
  calendarOpen: boolean,
  month: moment,
  day: ?moment,
};

export default class AppearDateCalendar extends Component<Props, State> {
  state = {
    calendarOpen: false,
    month: moment(),
    day: undefined,
  };

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (event: SyntheticMouseEvent<EventTarget>) => {
    const currentNode = ReactDOM.findDOMNode(this);
    if (currentNode && !currentNode.contains(event.target)) {
      this.setState({ calendarOpen: false });
    }
  };

  handleCalendarClick = () => {
    this.setState({ calendarOpen: !this.state.calendarOpen });
  };

  handleMonthChange = (_event: any, newMonth: moment) => {
    this.setState({ month: newMonth });
  };

  handleDaySelect = (_event, day: moment) => {
    this.props.onDateChange(day);
    this.setState({ day, calendarOpen: false });
  };

  dateDisplayText = (): string => {
    if (this.state.day) return this.state.day.format('Do MMM, YY');
    return t('choose_date');
  };

  render() {
    const today = new Date();

    return (
      <div className={cx(css.appearDateCalendar, this.state.calendarOpen ? css.focused : '')}>
        <div onClick={this.handleCalendarClick}>
          <h5 className={css.heading}>{t('heading')}</h5>
          <p className={css.dateText}>{this.dateDisplayText()}</p>
        </div>
        {this.state.calendarOpen && (
          <div className={css.calendarDropdown}>
            <DayPicker
              disabledDays={{ before: today }}
              month={this.state.month}
              onInteraction={this.handleDaySelect}
              onMonthChange={this.handleMonthChange}
            />
          </div>
        )}
      </div>
    );
  }
}

因此，我正在使用disabledDays属性并设置before:today。是这样做的方法，还是有更好/正确的方法来解决此问题？欢迎任何帮助/建议！

Answer 1

这是我添加的道具。它对我有用：

dayPickerProps={{
        disabledDays: {
            before: new Date()
        }
    }}

希望有帮助！

Answer 2

尝试使用带有日期属性的disableDays

<DayPicker
    disabledDays={{ before: new Date() }}
    month={this.state.month}
    onInteraction={this.handleDaySelect}
    onMonthChange={this.handleMonthChange}
/>

每日选择器-禁用今天不可用的几天

2 个答案: