微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何使用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 举报,一经查实,本站将立刻删除。