feature: CalendarPicker组件无法自动滚动到选中日期

[Yueyanc]

Version of antd-mobile

No response

What is this feature about?

希望日历组件能自动滚动到当前选中日期

[Yueyanc]

暂时可以这样：

  useEffect(() => {
    if (visible) {
      const el = document.getElementById(dayjs(saveDate).format('YYYY-MM-DD'))
      setTimeout(() => {
        el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }, 100)
    }
  }, [visible])


<CalendarPicker
renderDate={(date) => {
            return <div id={dayjs(date).format('YYYY-MM-DD')}>{date.getDate()}</div>
}}
/>

[crazyyoung1020]

牛的，完美解决问题

[sdwflmw]

暂时可以这样：

  useEffect(() => {
    if (visible) {
      const el = document.getElementById(dayjs(saveDate).format('YYYY-MM-DD'))
      setTimeout(() => {
        el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }, 100)
    }
  }, [visible])


<CalendarPicker
renderDate={(date) => {
            return <div id={dayjs(date).format('YYYY-MM-DD')}>{date.getDate()}</div>
}}
/>

当设置了min 且min 与现在日期相差较大时，默认在min页，然后el 可能为空，就无法跳转过去了

[sdwflmw]

改造了一下

const [minDate,setMinDate]=useState(null)
useEffect(() => {
    if (visible) {
          setTimeout(() => {
              setMinDate(new Date('2023-01-01'));
              const el = document.getElementById(dayjs(saveDate).format('YYYY-MM-DD'))
              setTimeout(() => {
                el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
              }, 100)
          }, 100);
    }else{
       setMinDate(null)
    }
  }, [visible])


<CalendarPicker
min={minDate}
renderDate={(date) => {
            return <div id={dayjs(date).format('YYYY-MM-DD')}>{date.getDate()}</div>
}}
/>

[yzqzy]

改造了一下

const [minDate,setMinDate]=useState(null)
useEffect(() => {
    if (visible) {
          setTimeout(() => {
              setMinDate(new Date('2023-01-01'));
              const el = document.getElementById(dayjs(saveDate).format('YYYY-MM-DD'))
              setTimeout(() => {
                el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
              }, 100)
          }, 100);
    }else{
       setMinDate(null)
    }
  }, [visible])


<CalendarPicker
min={minDate}
renderDate={(date) => {
            return <div id={dayjs(date).format('YYYY-MM-DD')}>{date.getDate()}</div>
}}
/>

6 6 6