为什么使用react-dates和typescript无法单击日历中的日期？

问题描述

我无法使用react-dates和Typescript在日历上选择日期。

始终startDate和endDate为null。不知道我要去哪里错了。

我要做什么？ 我想显示显示从当前日期起3个月的日历，以及当用户在日历中选择一个日期作为开始日期时的日历。

，并且由于结束日期不能在开始日期之前，所以我们禁用开始日期之前的天数。从所选开始日期开始超过6周的日期也将被禁用。

我正在努力实现以上目标。

下面是我的代码，

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

        const isOutsideRange = (date: any | null) =>
            !date.isBetween(moment().subtract(LIMIT_RANGE_DAYS,'d'),moment(),'d');

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

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

            if (!newStartDate) {
                return;
            } 

            const validStartDateFormat =
                newStartDate.isValid() && !isOutsideRange(newStartDate);
                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() && !isOutsideRange(newEndDate);
                    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,// startDateString: (startDate && startDate.format('L')) || '',// endDateString: (endDate && endDate.format('L')) || '',onFocusChange: (focused: any) => {
                   setFocusedInput(!focused ? 'startDate' : focused);
               },};
       };

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

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


   type Props = Omit<
       DayPickerRangeControllerShape,'numberOfMonths' | 'hideKeyboardShortcutsPanel' | 'noBorder'
   >;

   function DaterangePicker({props}: Props) {
       return (
           <DayPickerRangeController
               {...props}
               numberOfMonths={3}
               hideKeyboardShortcutsPanel
               noBorder
               horizontalMonthPadding={32}
               transitionDuration={0} 
               navNext={
                   <Clickable $left={true}>
                       <Icon name="triangle-right" size={12} color={theme.colors.white} />
                   </Clickable>
               }
               navPrev={
                   <Clickable $left={false}>
                       <Icon name="triangle-left" size={12} color={theme.colors.white} />
                   </Clickable>
               }
           />
       );
   }

我不确定为什么即使用户单击日历上的某些日期并且所有日期都是禁用颜色，startDate和endDate为何始终为null。

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

解决方法

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

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

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