如何使用react-dates选择日历的开始和结束日期？

编程问答 2022-08-12

问题描述

我想选择日历的开始和结束。

最初在用户选择日历上的日期之前，开始日期和结束日期为空。当用户单击开始日期时，说11月1日。结束日期也设置为11月1日，开始日期之前的日期（即11月1日）将被禁止选择，并且从开始日期起4周之后的日期也将被禁止选择。

现在，当用户选择结束日期（例如11月4日）时，11月1日至4日之间的日期将以绿色突出显示。并启用了之前被禁用的日期（即，从开始日期到11月1日之前的日期和4周之后的天数）。

现在，当用户单击日期（例如10月31日）时，结束日期也应设置为10月31日，并且应禁用10月31日之前的日期以及自10月31日起4周之后的日期。当用户选择结束日期时，例如说11月1日，则应启用所有日期。

要实现上述功能，我已经在下面尝试过代码，

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

    const isOutsideRange = (day: Moment) => {
        if (!startDate || !endDate) return false;
        if (startDate && endDate && startDate === endDate) {
            const maxEndDate = moment(startDate)
                .add(4,'weeks')
                .subtract(1,'day');
            return startDate.isAfter(day,'d') || maxEndDate.isBefore(day,'d');
        }
    };

    const updateStartDate = (newStartDate: any) => {
        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 = (newEndDate: any) => {
    if (!newEndDate) {
        return;
    }

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

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

};

const onDatesChange =（newDates：{ startDate：瞬间。空值; endDate：时刻。空值; }）=> { updateStartDate（newDates.startDate）; 如果（newDates.endDate！== null）{ updateStartEnd（newDates.endDate）; }其他{ updateStartEnd（newDates.startDate）; } };

返回{ focusInput， onDatesChange， isOutsideRange， 开始日期， 结束日期， onFocusChange：（focused：string）=> { setFocusedInput（！focused？'startDate'：focus）; }， }; }; 

function CreationForm({ onCreate,onCancel }: Props) {
    const{
        focusedInput,onDatesChange,isOutsideRange,startDate,endDate,onFocusChange,} = useRangeDates();

    return (
        <Picker
            focusedInput={focusedInput}
            isOutsideRange={isOutsideRange}
            startDate={startDate}
            endDate={endDate}
            onFocusChange={onFocuseChange}
        />
    );
}


function Picker(props: Props) {
    return (
      
        <DayPickerRangeController
            focusedInput={focusedInput}
            isOutsideRange={isOutsideRange}
            onFocusChange={onFocusChange}
        />
    );
}

这很好。但这是问题，如果我选择开始和结束日期，并且如果我单击当前开始日期之前的开始日期，那么这不会将开始日期和结束日期设置为相同。

我该如何解决。有人可以帮我吗谢谢。

解决方法

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

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

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

javascriptreact-datesreactjsreactjsreactjsreactjstypescripttypescripttypescript