Material UI v5 为<DatePicker />添加“Today”按钮及showTodayButton无效问题

MUI v5的DatePicker（归属@mui/x-date-pickers包）原生不支持showTodayButton属性，所以你之前的配置不生效，可通过组件提供的自定义插槽实现需求，具体方案如下：

实现方式1：底部操作栏添加（推荐） #

通过actionBar插槽在弹窗底部加Today按钮，和默认的取消、确认按钮同区域：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Button } from '@mui/material';
import dayjs from 'dayjs';

function CustomDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <DatePicker
      label="选择日期"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      slots={{
        actionBar: (props) => {
          return (
            <div style={{ padding: '8px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Button
                size="small"
                onClick={() => {
                  // 选中今日日期
                  props.onChange(dayjs());
                  // 可选：选中后直接关闭弹窗
                  props.onAccept();
                }}
              >
                Today
              </Button>
              {/* 保留默认的取消、确认按钮 */}
              {props.children}
            </div>
          )
        }
      }}
    />
  )
}

实现方式2：顶部区域添加 #

如果要放在你提到的红框（日历头部）位置，可通过toolbar插槽注入：

<DatePicker
  label="选择日期"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  slots={{
    toolbar: (props) => {
      return (
        <div>
          <div style={{ padding: '8px 12px', display: 'flex', justifyContent: 'flex-end' }}>
            <Button
              size="small"
              onClick={() => props.onChange(dayjs())}
            >
              Today
            </Button>
          </div>
          {/* 保留默认的日期预览工具栏 */}
          {props.children}
        </div>
      )
    }
  }}
/>

补充配置说明 #

• 如果项目用moment.js而非dayjs，把代码里的dayjs()替换为moment()即可
• 按钮样式可直接给Button组件加sx属性自定义，适配你的项目设计规范
• 上述配置对DesktopDatePicker、MobileDatePicker变体完全通用，无需额外修改

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