使用 React JS 将 datePicker（开始日期）中的值传递给第二个 datePicker（结束日期）答案

【问题标题】：Pass the value from a datePicker (start date) to a second datePicker (end date) with React JS使用 React JS 将 datePicker（开始日期）中的值传递给第二个 datePicker（结束日期）
【发布时间】：2017-12-04 21:55:50
【问题描述】：

我有两个 datePickers（StartDate 和 EndDate），我想做的是在选择 StartDate 之后将该值传递给 EndDate，以便我可以选择 StartDate 之后的日期。

例如，如果我将 StartDate 选择为 12 月 10 日，那么当我转到 EndDate 日期选择器时，我将无法选择 12 月 10 日之前的任何日期，因此这将是我的 EndDate 日期选择器的起点。

这是我的渲染方法。

render() {

    const today = new Date();
    today.setDate(today.getDate() + 1);

    return (
      <div className={cr.container}>
        <div className ={cr.boton}>
          <Divider/>
        </div>
        <div className={cr.rows}>
          <div>
            <div>
              <DatePicker
                hintText="Start Date"
                minDate = {today}
              />
              <br/>
              <DatePicker
                hintText="End Date"
              />
            </div>
          </div>
        </div>

      </div>
    );
  }
}

我会很感激这方面的帮助...

提前致谢。

【问题讨论】：

那么，到目前为止，您尝试了什么？根据您的代码示例没有任何内容？
我只是清理代码，因为我一团糟=（我尝试了一些方法，例如创建第二个常量，例如“const endDate = {startDate}”，但没有奏效......
我刚开始学习 react js 和 js，所以我有一些空白，我正在阅读一些书籍和东西，但我决定做一些例子..

标签： javascript reactjs material-ui

【解决方案1】：

选择开始日期后尝试更新组件状态：

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChangeStart}
    hintText="Start Date"
    minDate={today}
/>

...然后对于您的结束日期组件，尝试在 minDate 之前使用该值

<DatePicker
    selected={this.state.endDate}
    onChange={this.handleChangeEnd}
    hintText="End Date"
    minDate={this.state.startDate}
/>

【讨论】：

【解决方案2】：

如果您使用 material-ui 日期选择器，您应该能够执行以下操作：

<DatePicker
   hintText="Start Date"
   minDate = {today}
   onChange={(null, date) => { setState({ startDate: date }); }}
   value={this.state.startDate}
/>

<DatePicker
   hintText="End Date"
   defaultDate={this.state.startDate + 1}
   {/* or however you calculate endDate */}
   value={this.state.endDate}
   onChange={(null, date) => { setState({ endDate: date }); }}
/>

请参阅文档中的 controlled example。

【讨论】：