如何在MUIX DatePicker的部分日期下方添加圆点？

要实现指定日期下方显示小圆点的效果，核心是通过自定义Day组件的渲染逻辑来添加标记，具体实现如下：

实现步骤 #

• 准备需要标记的日期集合：可用dayjs实例或格式化后的日期字符串，方便后续匹配。
• 自定义日期单元格组件：判断当前日期是否在标记集合中，若是则在日期数字下方添加圆点。
• 将自定义组件通过slotProps.day.renderDay传递给DatePicker，替换默认的日期渲染逻辑。

完整代码示例 #

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';

// 定义需要标记的日期
const markedDates = [dayjs('2024-05-10'), dayjs('2024-05-15')];

// 自定义日期渲染组件
const CustomDay = ({ day, ...otherProps }) => {
  // 判断当前日期是否需要标记
  const isMarked = markedDates.some(markedDay => markedDay.isSame(day, 'day'));

  return (
    <div style={{ 
      position: 'relative', 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center',
      width: '100%'
    }}>
      {/* 保留原日期的交互样式 */}
      <span {...otherProps}>{day.date()}</span>
      {/* 添加标记圆点 */}
      {isMarked && (
        <span style={{ 
          width: 6, 
          height: 6, 
          borderRadius: '50%', 
          backgroundColor: '#1976d2', // 可自定义颜色
          marginTop: 2
        }} />
      )}
    </div>
  );
};

export default function MarkedDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择日期"
        slotProps={{
          day: {
            renderDay: (day, _value, props) => <CustomDay day={day} {...props} />
          }
        }}
      />
    </LocalizationProvider>
  );
}

补充说明 #

• 样式自定义：圆点的颜色、大小、间距可根据需求调整，也可以用MUI的styled工具封装组件，替代内联样式。
• 日期匹配适配：如果使用原生Date对象，可将日期格式化为YYYY-MM-DD字符串进行匹配，示例如下：

  // 格式化日期为字符串
  const formatDate = (date) => date.toISOString().split('T')[0];
  const markedDates = ['2024-05-10', '2024-05-15'];
  
  // 在CustomDay中判断
  const isMarked = markedDates.includes(formatDate(day.toDate()));
  

• 交互保留：务必将DayComponentProps传递给自定义元素，以保留原有的选中、hover等交互样式。

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