は、私は2 datePickers（<strong>開始日&終了日</strong>）私は開始日がにその値を渡す選択した後、私がやりたいことはあるが持っているJS

Question

に反応して第二日付ピッカー（終了日）まで（開始日）日付ピッカーから値を渡します私はStartDateの後の日付を選択することができますので、EndDate。

たとえば、StartDateを12月10日に設定してEndDateのdatePickerに移動すると、12月10日より前に日付を選択できなくなるため、EndDateのdatepickerの開始点になります。

これは私のレンダリング方法です。

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> 
    ); 
    } 
} 

私はこの上の助けを感謝します...事前に

感謝。

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

Answer 2

FOREその値を使用してみてくださいmaterial-ui date pickerを使用している場合は、次のようにします。

<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をご覧ください。