能否让MUI X StaticDateRangePicker在value变更时自动滚动到选中范围？

可以通过监听value变化，结合DOM操作和组件ref实现自动滚动需求，具体方案如下：

核心实现思路 #

• 给StaticDateRangePicker绑定ref，用于获取组件内部的日历容器DOM
• 监听value的变化，当选中日期范围更新时，定位到起始和结束日期对应的DOM节点
• 判断选中范围是否完整显示在容器可视区内：若超出则滚动到结束日期位置；若完整显示则将范围居中

代码示例 #

import { useState, useEffect, useRef } from 'react';
import { StaticDateRangePicker } from '@mui/x-date-pickers/StaticDateRangePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

export default function ScrollableDateRangePicker() {
  const [value, setValue] = useState([null, null]);
  const pickerRef = useRef(null);

  useEffect(() => {
    if (!value[0] || !value[1]) return;

    // 获取日历容器与选中日期节点
    const calendarContainer = pickerRef.current?.querySelector('.MuiCalendarPicker-root');
    const startDateEl = calendarContainer?.querySelector(`[data-day="${value[0].format('YYYY-MM-DD')}"]`);
    const endDateEl = calendarContainer?.querySelector(`[data-day="${value[1].format('YYYY-MM-DD')}"]`);

    if (!startDateEl || !endDateEl || !calendarContainer) return;

    // 获取容器与日期节点的位置信息
    const containerRect = calendarContainer.getBoundingClientRect();
    const startRect = startDateEl.getBoundingClientRect();
    const endRect = endDateEl.getBoundingClientRect();

    // 判断选中范围是否完全在可视区内
    const isRangeVisible = startRect.left >= containerRect.left && endRect.right <= containerRect.right;

    if (!isRangeVisible) {
      // 范围超出时滚动到结束日期
      endDateEl.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center'
      });
    } else {
      // 范围完整显示时居中
      const centerOffset = (startRect.left + endRect.right) / 2 - containerRect.left;
      calendarContainer.scrollLeft = centerOffset - containerRect.width / 2;
    }
  }, [value]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        ref={pickerRef}
        value={value}
        onChange={(newValue) => setValue(newValue)}
        displayStaticWrapperAs="desktop"
      />
    </LocalizationProvider>
  );
}

关键细节说明 #

• 利用MUI日历组件默认给日期单元格添加的data-day属性（格式为YYYY-MM-DD）定位选中节点
• 使用scrollIntoView实现平滑滚动，确保结束日期能快速进入用户视野
• 完整显示范围时通过计算偏移量让选中区域居中，优化视觉体验

内容的提问来源于stack exchange，提问作者Camilo