Javascript 如何使用反应日期选择日历的开始日期和结束日期？

我想在日历上选择开始和结束

最初在用户选择日历上的日期之前，开始日期和结束日期为空。当用户单击开始日期时，请说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);
   }

constuserangedates=（）=>{
常量[startDate，setStartDate]=React.useState（null）；
const[endDate，setEndDate]=React.useState（null）；
const[focusedInput，setFocusedInput]=React.useState（'startDate'）；
const isOutsideRange=（天：时刻）=>{
如果（！startDate | |！endDate）返回false；
如果（开始日期和结束日期和开始日期===结束日期）{
常量maxEndDate=力矩（起始日期）
.添加（4个“周”）
.减去（1，'天'）；
return startDate.isAfter（day'd'）| | maxEndDate.isBefore（day'd'）；
}
};
const updateStartDate=（newStartDate:any）=>{
如果（！newStartDate）{
返回；
}
const validStartDateFormat=newStartDate.isValid（）；
const isAfterCurrentEnd=endDate&&newStartDate.isAfter（endDate，'d'）；
如果（validStartDateFormat）{
如果（isAfterCurrentEnd）{
setEndDate（空）；
}
setFocusedInput（'endDate'）；
设置开始日期（newStartDate）；
}
};
const updateStartEnd=（newEndDate:any）=>{
如果（！newEndDate）{
返回；
}
常量validEndDateFormat=newEndDate.isValid（）；
常数在当前开始之前=
startDate&&newEndDate.isBefore（startDate，'d'）；
如果（ValidEndDataFormat&！isBeforeCurrentStart）{
setEndDate（newEndDate）；
}

})

const onDatesChange=（新日期：{ 起始日期：时刻。时刻|空； endDate:moment.moment | null； }) => { updateStartDate（newDates.startDate）； if（newDates.endDate！==null）{ updateStartEnd（newDates.endDate）； }否则{ updateStartEnd（newDates.startDate）； } })

返回{ 聚焦输入， 翁达特桑奇， 等外边距， 开始日期， 结束日期， onFocusChange：（聚焦：字符串）=>{ setFocusedInput（！聚焦？'startDate'：聚焦）； }, }; };

函数CreationForm（{onCreate，onCancel}:Props）{
常数{
聚焦输入，
翁达特桑奇，
等外边距，
开始日期，
结束日期，
onFocusChange，
}=useRangeDates（）；
返回(
);
}
函数选择器（道具：道具）{
返回(
);
}

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

我怎样才能解决这个问题。有人能帮我吗。谢谢

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}
        />
    );
}