如何使用react-dates库和打字稿禁用开始日期之前的日期选择？

问题描述

我想禁用从开始日期到开始日期之后的6周，直到用户选择结束日期为止的日期选择。用户选择结束日期后，便可以选择所有日期。

我想使用react-dates DayPickerRangeController做到这一点。

下面是我的代码，它禁止从开始日期起6周后选择日期。但这只会在用户选择结束日期之后发生。

const useRangeDates = () => {
    const [startDate,setStartDate] = React.useState(null);
    const [endDate,setEndDate] = React.useState(null);
    const [focusedInput,setFocusedInput] = React.useState('startDate');

    const isOutSideRange = (day: any) => {
        //start day < 6 weeks < end date
        if (!startDate || !endDate) return false;
        else {
            return startDate.diff(day,'week') <= -6;
        }
    };

    const converToMomentIfNeeded = (date: any) =>
        typeof date === 'string' ? moment(date,'L',true) : date;

    const updateStartDate = (start: any) => {
        const newStartDate = converToMomentIfNeeded(start);

        if (!newStartDate) {
            return;
        }

        const validStartDateFormat =  newStartDate.isValid();
        const isAfterCurrentEnd = endDate && newStartDate.isAfter(endDate,'d');

        if (validStartDateFormat) {
            if (isAfterCurrentEnd) {
                setEndDate(null);
            }

            setFocusedInput('endDate');
            setStartDate(newStartDate);
        }
    };

    const updateStartEnd = (end: any) => {
        const newEndDate = converToMomentIfNeeded(end);

        if (!newEndDate) {
            return;
        } else if (end === null && endDate) {
            setEndDate(null);
            return;
        }

        const validEndDateFormat = newEndDate.isValid();
        const isBeforeCurrentStart =
        startDate && newEndDate.isBefore(startDate,'d');

        if (validEndDateFormat && !isBeforeCurrentStart) {
            setEndDate(newEndDate);
        }
    };

    const onDatesChange = (newDates: any) => {
        updateStartDate(newDates.startDate);
        updateStartEnd(newDates.endDate);
    };

    return {
        focusedInput,onDatesChange,isOutSideRange,startDate,endDate,onFocusChange: focused => {
            setFocusedInput(!focused ? 'startDate' : focused);
        },};
};

function Parent() {
    const {
        focusedInput,onFocusChange,} = useRangeDates();

    return (
        <Daterange
            onDatesChange={onDatesChange}
            startDate={startDate}
            endDate={endDate}
            focusedInput={focusedInput}
            onFocusChange={onFocusChange}
            isOutSideRange={isOutSideRange}
        />
    );
} 

function Daterange(props: Props) {
    return (
        <DayPickerRangeController
            {...props}
            numberOfMonths={3}
            focusedInput={focusedInput}
            onFocusChange={onFocusChange}
            isOutsideRange={isOutSideRange}
        />
    );
}

我不确定如何禁用开始日期之前和开始日期之后6周之后的日期选择。 一旦选择了终止日期，则应该可以选择所有日期。

有人可以帮我这个忙吗？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）