如何在 3 年内设置开始日期和结束日期之间的验证 select
How set the validation between start date and end date should select with in the 3 years
我是React JS新手,如何在React JS中实现两个日期字段之间的校验
例如:结束日期应允许 select 仅在基于开始日期的 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;
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 id="endDate-css" placeholderText={END_DATE} dateFormat='dd-MM-yyyy' selected={endDate} minDate={startDate} maxDate={strToDate} onChange={handleEndDate}/>
我是React JS新手,如何在React JS中实现两个日期字段之间的校验
例如:结束日期应允许 select 仅在基于开始日期的 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;
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 id="endDate-css" placeholderText={END_DATE} dateFormat='dd-MM-yyyy' selected={endDate} minDate={startDate} maxDate={strToDate} onChange={handleEndDate}/>