需要使用 Reactjs 从 startDate 开始执行 endDate 不能超过一年

Question

Hi I need to implement the end date cannot be more than one year from start date using ReactJs. The dates are being input as textfield, masked as date. Here is the code to accept start and end dates from UI

Answer 1

You can use the moment library to make things easier. But in plain Javascript, if you can manage to get a Date object from both your textfields:

const getNumberOfDaysSinceEpoch = (numberOfSecondsSinceEpoch) => {
    return numberOfSecondsSinceEpoch/60/60/24;
}

const dateFromInDays = getNumberOfDaysSinceEpoch(dateFromObj.getTime());
const dateToInDays = getNumberOfDaysSinceEpoch(dateToObj.getTime())
if(dateToInDays - dateFromInDays > 365) {
   //it has been more than a year
}

where dateFromObj and dateToObj are the Date objects that I mentioned above.

Answer 2

You can use getFullYear(), getMonth() and getDate() methods of Date object. Or simply calculate distance between two dates using "-" operator.

const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");

const endDateChange = (evt) => {
    const _date = new Date(evt.target.value);
    const _startDate = new Date(startDate);
    // or try your date conversion
    const diffTime = Math.abs(_date - _startDate);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
    if (diffDays > 365) {
        console.log ("more than 1 year");
        // set manually limit date string
        _startDate.setFullYear(_startDate.getFullYear() + 1);
        // assume you converted date to string named strLimitDate

        setEndDate(strLimitDate);
    } else {
        setEndDate(evt.target.value);
    }
}

return(
    <TextField... value={startDate} onChange={startDateChange} />
    <TextField ... value={endDate} onChange={endDateChange} />
)

You need to try on child component of Field. So in your case, TextField would be correct

Answer 3

Finally I have used

moment(endDate).diff(startdate, 'years',true) > 1

true is being used to consider decimal values.