如何设置开始日期和结束日期之间的验证应在 3 年内选择

Posted 2023-03-16

【中文标题】如何设置开始日期和结束日期之间的验证应在 3 年内选择

【英文标题】：How set the validation between start date and end date should select with in the 3 years

【发布时间】：2021-08-21 12:26:55

【问题描述】：

我是React 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;

【问题讨论】：

您可以在日期输入字段上设置min/max-属性。只需设置结束日期字段的开始日期更改值即可。

【参考方案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/>