Как установить проверку между датой начала и датой окончания следует выбрать с помощью в 3 года

Question

Я новичок в реагировании на JS, как я могу добиться проверки между двумя полями даты в React JS.

например: даты окончания должны позволять выбирать только в пределах 3 лет на основе даты начала.

      class MyForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = { startdate: '', enddate: '' };
    }
    mySubmitHandler = (event) => {
      event.preventDefault();
      alert("You are submitting " + this.state.startdate +"and"+ this.state.enddate);
    }
    myChangeHandler = (event) => {
      this.setState({startdate: event.target.value});
    }
    myEndDate = (event) => {
        this.setState({enddate: event.target.value});
      }
    render() {
      return (
        <form onSubmit={this.mySubmitHandler}>
        <img src="is.jpg"></img>
        <h2>Please select the Date range of .CSV </h2>
        <input
          type='date'
          onChange={this.myChangeHandler}
        />
        <span>   </span>
       <input
          type="date"
          onChange={this.myEndDate}
        />
        <h6 id="light">Note: Only up to 3 years worth of Data can be downloaded</h6>
        <div>
        {this.state.startdate && this.state.enddate && <input
      type='submit' value="Download" class="bi bi-cloud-arrow-down"  style={{ width: '10%', height: 30}}
    />}
        </div>
        </form>
      );
    }
  }
 
  ReactDOM.render(<MyForm />, document.getElementById('root'));

  export default MyForm;

Answer 1

      if (startDate) {
    var maxDate = startDate;
    maxDate = format(addMonths(startDate, 36), " E MMM dd yyyy HH:mm:ss ");
    var strToDate = new Date(maxDate);
    console.log("maxDate value ==" + maxDate);
  }

Дата окончания добавит 36 месяцев с даты начала , после чего пользователь сможет выбрать в течение этого периода.

затем преобразуйте строку в формат даты, а затем используйте strToDate в теге datepicker .

      <DatePicker id="endDate-css" placeholderText={END_DATE} dateFormat='dd-MM-yyyy' selected={endDate} minDate={startDate} maxDate={strToDate} onChange={handleEndDate}/>

Answer 2

Вам просто нужно добавить идентификатор в поле endDate и изменить его min / max, как предлагается во время onChange начального значения.

      class MyForm extends React.Component {
    [...]
    myChangeHandler = (event) => {
      // used to append 0 in front of the numbers. usage: s(num, length)
      let s = (s,l) => (Array(l).fill('0').join('')+s).substr(-l);
      // get the EndDate node
      let node = this.form.querySelector("#valueEndDate");
      let date = new Date(this.value);
      // set min to current select date - 3 years
      date.setFullYear(date.getFullYear() - 3);
      node.setAttribute("min", [date.getFullYear(), s(date.getMonth()+1,2), s(date.getDate(),2)].join('-'));

      // set max to +3 year ahead of previous time 
      date.setFullYear(date.getFullYear() + 6);
      node.setAttribute("max", [date.getFullYear(), s(date.getMonth()+1,2), s(date.getDate(),2)].join('-'));

      this.setState({startdate: event.target.value});
    }
    render (
       [...] <!-- Added id to get it easily during the change event -->
       <input type="date" id="valueEndDate" onChange={this.myEndDate} />
       [...]
      );
    }
  }