如何让MUI DatePicker仅显示可点击的日历图标？

方法一：使用renderInput自定义触发按钮（推荐） #

直接通过renderInput替换默认输入框，返回仅含日历图标的可点击按钮，代码简洁直观：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { IconButton } from '@mui/material';
import CalendarIcon from '@mui/icons-material/Calendar';
import dayjs, { Dayjs } from 'dayjs';

// 组件内使用
<DatePicker
  name="goalDateDatePicker"
  minDate={dayjs(new Date()).add(1, 'days')}
  onChange={(v: Dayjs | null) => {
    // 处理选中日期逻辑，比如存入组件状态
    if (v) {
      console.log('选中日期:', v.format('YYYY-MM-DD'));
    }
  }}
  // 自定义触发组件，仅显示日历图标按钮
  renderInput={() => (
    <IconButton>
      <CalendarIcon />
    </IconButton>
  )}
/>

说明： #

• renderInput是MUI DatePicker的核心自定义属性，可完全替换默认输入框组件
• 返回的IconButton会自动绑定日历弹窗触发逻辑，点击图标即可唤起日期选择器
• 保留原minDate和onChange逻辑，正常处理日期范围和选中事件

方法二：通过样式隐藏输入框及边框 #

若需基于原有slotProps调整，可通过SX样式隐藏输入框和边框，仅保留图标：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { IconButton } from '@mui/material';
import CalendarIcon from '@mui/icons-material/Calendar';
import dayjs, { Dayjs } from 'dayjs';

// 组件内使用
<DatePicker
  name="goalDateDatePicker"
  minDate={dayjs(new Date()).add(1, 'days')}
  onChange={(v: Dayjs | null) => {
    // 处理选中日期逻辑
    if (v) {
      console.log('选中日期:', v.format('YYYY-MM-DD'));
    }
  }}
  slotProps={{
    textField: {
      sx: {
        border: 'none',
        background: 'transparent',
        // 移除输入框容器的边框
        '& .MuiOutlinedInput-root': {
          '& fieldset': { border: 'none' },
          '&:hover fieldset': { border: 'none' },
          '&.Mui-focused fieldset': { border: 'none' },
        },
        // 隐藏输入框文本和占位符
        '& input': {
          opacity: 0,
          width: 0,
          padding: 0,
        },
        '& .MuiInputBase-placeholder': {
          opacity: 0,
        },
      },
      InputProps: {
        startAdornment: (
          <IconButton>
            <CalendarIcon />
          </IconButton>
        ),
      },
    },
  }}
/>

说明： #

• 通过SX样式逐层隐藏输入框的边框、文本和占位符
• 保留startAdornment中的图标按钮作为触发元素
• 适合需要保留TextField底层逻辑，但仅隐藏视觉元素的场景

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