ant mobile中的CalendarPicker 展开定位问题 以及开始结束显示问题

今天开始时候 使用了ant mobile中的CalendarPicker 结果发现
问题多多啊 一步一坑
现在总结下我遇到的问题 希望对你有帮助
使用组件图片

一：需求描述：
时间跨度 当前时间的前后5年 默认选中时间时前三个月以及未来一个月
出现问题：

展开 日历组件时无法定位到默认选中的时间位置

  	
  	// 获取当前时间
    const now = dayjs();
    const defaultRange = [
        threeMonthsAgo,
        oneMonthLater
    ];
     // 三个月前的日期
    const threeMonthsAgo = now.subtract(3, 'month').format('YYYY-MM-DD');
    // 未来一个月的日期
    const oneMonthLater = now.add(1, 'month').format('YYYY-MM-DD');
    // 五年前
    const fiveYearsAgo = now.subtract(5, 'year').format('YYYY-MM-DD');
    // 五年后
    const fiveYearsAfter = now.add(5, 'year').format('YYYY-MM-DD');
     const [selectedDate, setSelectedDate] = useState(defaultRange);
     <CalendarPicker
     			visible={visibleCalendar}
                defaultValue={selectedDate}
                min={fiveYearsAgo} 
                max={fiveYearsAfter} 
            />

解决方案：
监听日历展开操作
将其滚动至开始选中元素的位置

    // 日历 点击确定后 调用onConfirm 后会立即调用onClose
    // 此时无法获取最新的visibleCalendar值 所以使用useEffect进行监听
    useEffect(() => {
        setSelectedDate(confirmDate);
        const elementCalendar = document.querySelector('.adm-calendar-picker-view-body');
        const element = document.querySelector('.adm-calendar-picker-view-cell-selected-begin');
        // 如果元素存在，获取其位置
        // if (element) {
        //     console.log(element, 'element--', element?.offsetTop, elementCalendar?.offsetTop);
        //     console.dir(element);
        //     console.dir(elementCalendar);
        // }
        setTimeout(() => {
            if (elementCalendar?.scrollHeight) {
                elementCalendar.scrollTop = element.offsetTop - 200;
            }
        }, 100);
        onCalendarClose();
    }, [visibleCalendar]);

二 问题描述：
点击取消时 会保存选中的值
使用value 将其变为受控组件
但是会

出现 开始 和 结束选中的位置 倒置问题

解决方法：在onchange中添加判断

 const dateFormat = (date, format = 'YYYY-MM-DD') => dayjs(date).format(format);
   <CalendarPicker
                ref={calendarPicker}
                visible={visibleCalendar}
                defaultValue={selectedDate}
                value={selectedDate}
                min={fiveYearsAgo} 
                max={fiveYearsAfter} 
                selectionMode='range'
                onClose={() => {
                    setVisibleCalendar(false);
                }}
                onChange={(val) => {
                 const zeroTime = dateFormat(val[0]);
                 const oneTime = dateFormat(val[1]);
					 if (zeroTime < oneTime || zeroTime == oneTime) {
                        // debugger;
                        const Array = [zeroTime, oneTime];
                        setSelectedDate(Array);
                    } else {
                        // debugger;
                        const Array = [oneTime, zeroTime];
                        setSelectedDate(Array);
                    }                }}
                onConfirm={(date) => {
                    const Array = [dateFormat(date[0]),
                     		      dateFormat(date[1])];
                    setConfirmDate(Array);
                    setSelectedDate(Array);
                    setVisibleCalendar(false);
                }
                }
            />