如何监听MUI X StaticDatePicker箭头点击以触发函数？

核心思路 #

StaticDatePicker没有直接暴露箭头按钮的点击事件，但可以通过监听显示月份的变化实现需求——点击箭头本质就是切换显示月份，组件提供了onDisplayedMonthChange回调来捕获这个动作。

实现步骤及代码示例 #

1. 引入所需组件与日期处理工具
2. 用状态管理当前显示的月份
3. 给StaticDatePicker绑定onDisplayedMonthChange更新状态
4. 将状态传递给旁侧日历组件实现同步

import { useState } from 'react';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { Calendar } from '@mui/x-date-pickers/Calendar';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';

export default function SyncDatePickers() {
  // 初始化显示月份为当前月份
  const [displayedMonth, setDisplayedMonth] = useState(dayjs());

  // 捕获StaticDatePicker的月份切换事件
  const handleMonthChange = (newMonth) => {
    setDisplayedMonth(newMonth);
    // 此处可添加你需要触发的其他自定义逻辑
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div style={{ display: 'flex', gap: '20px' }}>
        <StaticDatePicker
          // 绑定月份变化回调
          onDisplayedMonthChange={handleMonthChange}
          // 同步初始显示月份
          displayedMonth={displayedMonth}
          renderInput={(params) => <input {...params} />}
        />
        {/* 旁侧日历组件，同步显示月份 */}
        <Calendar
          value={displayedMonth}
          onChange={() => {}}
          // 同步当前显示月份
          displayedMonth={displayedMonth}
        />
      </div>
    </LocalizationProvider>
  );
}

关键点说明 #

• onDisplayedMonthChange：每次点击StaticDatePicker的左右箭头切换月份时，该回调会触发，参数为切换后的月份（dayjs对象）
• 状态displayedMonth：同时控制StaticDatePicker和Calendar的显示月份，确保两者同步
• 必须用LocalizationProvider包裹组件，并传入适配的日期库（示例用dayjs，也可使用date-fns等）

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