reactjs - 两周后反应日期选择器禁用日期

Question

我在我的网站中使用react-datepicker模块。我想在 2 周后禁用日期。例如，今天的日期是：20-02-2019，所以我想禁用 2019 年 3 月 5 日之后的日期。

我怎样才能做到这一点？

Answer 1

您可以为maxDate道具指定未来 13 天的日期。

示例（代码沙盒）

class App extends React.Component {
  state = {
    startDate: new Date()
  };

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  render() {
    const twoWeeksFromNow = new Date();
    twoWeeksFromNow.setDate(twoWeeksFromNow.getDate() + 13);

    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
        maxDate={twoWeeksFromNow}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 2

您正在使用的react-datepicker组件已经具有includeDates参数。

() => {
    const [startDate, setStartDate] = useState(null);
    return (
        <DatePicker
            selected={startDate}
            onChange={date => setStartDate(date)}
            includeDates={[new Date(), addDays(new Date(), 1)]}
            placeholderText="This only includes today and tomorrow"
        />
    );
};

上面的代码仅用于显示今天和明天。如果要显示两周的日期，只需在数组中添加天数列表（第 7 行）。

该特定部分的链接https://reactdatepicker.com/#example-include-dates

Answer 3

您可以将 maxDate 属性添加到您的日期选择器代码中。

   maxDate={addDays(new Date(), 13)}