내가 두 datePickers (<strong>STARTDATE & 종료 날짜</strong>) 나는 STARTDATE가 해당 값을 전달 선택한 후 제가하고 싶은 것은이 JS

Question

반응과 함께 두 번째 날짜 선택기 (종료 날짜)에 (시작 날짜)를 날짜 선택기에서 값을 전달 EndDate 그래서 StartDate 다음에 날짜를 선택할 수 있습니다.

예를 들어 내 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

이물 그 값을 사용해보십시오 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을 참조하십시오.