How set the validation between start date and end date should select with in the 3 years

Question

I am new to react JS, how can I achieve the validation between two date fields in React JS.

for example: End dates should allow to select only within 3 years based on start date.

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;

You can set a [`min/max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#additional_attributes)-attribute on a date input field. Just set the values on change of the start-date for the end-date field. — Christopher, Jun 03 '21 at 11:31

score 0 · Accepted Answer · answered Jun 22 '21 at 09:47

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

end date will add 36 months from start date, then user able to selected within that period.

then convert the string to date format and then strToDate use in into datepicker tag.

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

How set the validation between start date and end date should select with in the 3 years

1 Answers1