如何在MUI X Date Picker中渲染自定义值？

问题描述 #

我想要编写一个React TS组件，返回MUI X DatePicker，且在选择新日期时，让自定义组件<Badge>显示在值字段中。我已通过Material UI Select实现该功能：

return (
    <div css={styles.wrapper}>
      <MaterialSelect
        value={value || ''}
        renderValue={(selected) => {
          if (selected === '' && placeholder) {
            return <span css={styles.placeholder}>{placeholder}</span>;
          }
          return (
            <Badge
              customText={placeholder}
            />
          );
        }}
      >
        {options.map((option) => (
          <MenuItem value={option.value} key={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </MaterialSelect>
    </div>
  );
};

但在@mui/x-date-pickers/DatePicker中无法使用renderValue，仅能通过slots和slotProps编辑字段。我尝试了如下方式：

return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <MUIDatePicker
        label={label}
        value={dateValue}
        open={open}
        onClose={closePicker}
        onOpen={openPicker}
        onChange={handleChange}
        css={styles.root}
        views={yearOnly ? ['year'] : ['year', 'day']}
        slotProps={{
          textField: {
            value: <Badge type={BadgeType.DELAYED} customText="Test" />,
          },
        }}
      />
    </LocalizationProvider>
  );

但这会修改字段值，我希望保留value为dateValue，且未在slots、slotProps中找到类似renderValue的属性。请问是否有可行的实现方法？

解决方案 #

可以通过DatePicker的renderInput属性自定义输入框的显示逻辑，这是替代renderValue的最优方案，既能维持dateValue的原始绑定，又能自由渲染自定义内容（比如你的<Badge>组件）。

实现代码示例 #

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';
import moment from 'moment';

// 自定义Badge组件（示例）
const Badge = ({ customText, children }: { customText: string; children?: React.ReactNode }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    {children}
    <span style={{ backgroundColor: '#ff4444', color: '#fff', padding: '2px 6px', borderRadius: '4px', fontSize: '12px' }}>
      {customText}
    </span>
  </div>
);

const CustomDatePicker = ({
  label,
  dateValue,
  open,
  closePicker,
  openPicker,
  handleChange,
  yearOnly,
  placeholder
}: {
  label: string;
  dateValue: moment.Moment | null;
  open: boolean;
  closePicker: () => void;
  openPicker: () => void;
  handleChange: (newValue: moment.Moment | null) => void;
  yearOnly: boolean;
  placeholder?: string;
}) => {
  // 根据需求格式化日期显示
  const formattedDate = dateValue ? dateValue.format(yearOnly ? 'YYYY' : 'YYYY-MM-DD') : '';

  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker
        label={label}
        value={dateValue}
        open={open}
        onClose={closePicker}
        onOpen={openPicker}
        onChange={handleChange}
        views={yearOnly ? ['year'] : ['year', 'day']}
        // 自定义输入框渲染逻辑
        renderInput={(params) => {
          const displayContent = formattedDate ? (
            <Badge customText={placeholder || '自定义标记'}>
              {formattedDate}
            </Badge>
          ) : (
            <span>{placeholder || '请选择日期'}</span>
          );

          return (
            <TextField
              {...params}
              InputProps={{
                ...params.InputProps,
                inputProps: {
                  ...params.InputProps.inputProps,
                  // 隐藏原生input文本，避免和自定义内容冲突
                  style: { display: 'none' }
                },
                // 替换输入框显示内容为自定义组件
                children: displayContent
              }}
            />
          );
        }}
      />
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

核心要点 #

• renderInput的作用：该属性允许完全控制DatePicker绑定的TextField渲染，和Select的renderValue逻辑一致，是自定义显示内容的官方推荐方式。
• 保留值绑定：DatePicker的value仍绑定dateValue，自定义显示内容不会影响日期选择的核心逻辑。
• 处理空值/占位符：通过判断dateValue是否存在，分别渲染占位符或带Badge的日期内容。
• 避免内容冲突：将原生input设为隐藏，防止原始格式化文本和自定义Badge同时显示。

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