如何为MUI X v6 Mobile Date Picker添加日历图标？

你的方案无效是因为自定义textField插槽时，没有接收并传递MobileDatePicker组件传递给TextField的核心props（比如value、onChange、label等），导致自定义的TextField和日期选择器失去了关联。下面给两种可行的解决方法：

方法一：推荐用slotProps配置（更简洁） #

不需要替换整个textField组件，直接通过slotProps给内置的TextField添加图标：

import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import Calendar from '@mui/icons-material/Calendar';

// 你的组件内部代码
<MobileDatePicker
  label="Start Date"
  format="MM/dd/yyyy"
  value={new Date(values.startDate)}
  onChange={(e) => handleDateChange(e, 'startDate')}
  slotProps={{
    textField: {
      InputProps: {
        endAdornment: (
          <InputAdornment position="end">
            <Calendar />
          </InputAdornment>
        ),
      },
    },
  }}
/>

方法二：自定义textField插槽（需传递props） #

如果一定要自定义整个textField组件，必须把MobileDatePicker传递的所有props转发给TextField，同时保留原有InputProps的配置（比如清除按钮）：

import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import Calendar from '@mui/icons-material/Calendar';

// 自定义带图标的TextField组件
const customOpenPickerIcon = (props) => {
  return (
    <TextField
      {...props} // 转发DatePicker传递的所有props
      InputProps={{
        ...props.InputProps, // 保留原有InputProps配置
        endAdornment: (
          <>
            {props.InputProps?.endAdornment} {/* 保留默认的清除按钮等装饰 */}
            <InputAdornment position="end">
              <Calendar />
            </InputAdornment>
          </>
        ),
      }}
    />
  );
};

// 使用自定义插槽
<MobileDatePicker
  label="Start Date"
  format="MM/dd/yyyy"
  value={new Date(values.startDate)}
  onChange={(e) => handleDateChange(e, 'startDate')}
  slots={{
    textField: customOpenPickerIcon,
  }}
/>

关键说明 #

• 方法一的slotProps是MUI官方推荐的局部配置方式，不需要破坏原有组件的联动逻辑，代码更简洁。
• 方法二中如果不传递...props，自定义的TextField只是一个独立输入框，无法和日期选择器的选中值、事件绑定关联，这就是你原来方案失效的核心原因。

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