如何在MUI X DatePicker的日期下方添加自定义百分比数值？

要在MUI X DatePicker的特定日期下方添加自定义百分比，核心是利用组件提供的renderDay属性自定义日期单元格的渲染内容，具体步骤如下：

1. 准备日期-百分比映射数据 #

先定义好需要显示百分比的日期及其对应数值，示例如下：

// 键为YYYY-MM-DD格式的日期字符串，值为要显示的百分比
const datePercentages = {
  '2024-05-10': '25%',
  '2024-05-15': '60%',
  '2024-05-20': '85%'
};

2. 自定义日期渲染函数 #

实现renderDay函数，该函数会接收当前日期、选中状态等参数，返回自定义的日期单元格结构：

import Box from '@mui/material/Box';
import dayjs from 'dayjs'; // 需提前安装dayjs或其他日期处理库

const renderDay = (day, selected, disabled, dayComponentProps) => {
  // 将日期格式化为统一格式，匹配映射数据的键
  const dateStr = dayjs(day).format('YYYY-MM-DD');
  const percentage = datePercentages[dateStr];

  return (
    <Box 
      {...dayComponentProps} 
      sx={{ 
        display: 'flex', 
        flexDirection: 'column', 
        alignItems: 'center',
        padding: '2px 0' // 可根据需求调整内边距
      }}
    >
      {/* 渲染原始日期数字 */}
      <span>{day.getDate()}</span>
      {/* 有对应百分比时渲染 */}
      {percentage && (
        <span sx={{ fontSize: '0.7rem', color: '#666', marginTop: '2px' }}>
          {percentage}
        </span>
      )}
    </Box>
  );
};

3. 配置DatePicker组件 #

在你的DatePicker实例中添加renderDay属性，指向上述自定义函数：

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

// ... 你的其他业务代码 ...

<DatePicker
  maxDate={created_at__lte}
  format={DATE_FORMAT}
  variant="inline"
  name="settlements-from-date-picker"
  value={created_at__gte}
  autoOk
  mask="__-__-____"
  onChange={onFilterByFromDate}
  renderDay={renderDay} // 新增属性，绑定自定义渲染函数
  renderInput={params => ( <TextField data-sdet="settlements-from-date-picker" {...params} />)}
/>

注意事项 #

• 确保已安装日期处理库（如dayjs或date-fns），用于统一日期格式
• 可通过修改sx属性调整百分比文本的样式（颜色、字号、间距等）
• 若百分比数据为动态获取，只需更新datePercentages对象，组件会自动重新渲染对应日期的内容

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