reactjs - 日期选择器 - 在今天之前禁用几天不工作

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。这是这样做的方法还是有更好/正确的方法来解决这个问题？欢迎任何帮助/建议！

标签： reactjsreact-day-picker

Answer 1

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

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

希望能帮助到你 ！