Open Yueyanc opened 7 months ago
暂时可以这样:
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>
}}
/>
牛的,完美解决问题
暂时可以这样:
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 可能为空,就无法跳转过去了
改造了一下
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>
}}
/>
改造了一下
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
Version of antd-mobile
No response
What is this feature about?
希望日历组件能自动滚动到当前选中日期