如何使用mui-x-date-pickers高亮指定日期？

要给指定日期添加绿色实心圆圈高亮，核心是通过自定义日期单元格的渲染逻辑实现，MUI X DatePicker提供了slotProps配置项来修改日期单元格的样式与内容，具体步骤如下：

1. 准备高亮日期数组与判断逻辑 #

先定义需要高亮的Date数组，同时编写日期匹配函数（忽略时分秒，避免因时间差异导致匹配失败）：

// 示例高亮日期数组
const highlightedDates = [
  new Date(2024, 4, 10), // 2024年5月10日
  new Date(2024, 4, 15), // 2024年5月15日
  new Date(2024, 4, 20)  // 2024年5月20日
];

// 判断两个日期是否为同一天（忽略时分秒）
const isSameDay = (dateA, dateB) => {
  return (
    dateA.getFullYear() === dateB.getFullYear() &&
    dateA.getMonth() === dateB.getMonth() &&
    dateA.getDate() === dateB.getDate()
  );
};

// 判断当前日期是否需要高亮
const isHighlightedDate = (date) => {
  return highlightedDates.some(highlightedDate => isSameDay(date, highlightedDate));
};

2. 配置DatePicker自定义日期单元格 #

通过slotProps.day自定义日期单元格的渲染，添加高亮样式：

import { useState } from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

export default function HighlightedDatePicker() {
  const [value, setValue] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="Date du jour à visualiser"
        openTo="day"
        views={["day", "month", "year"]}
        value={value}
        onChange={(newValue) => setValue(newValue)}
        format="dd.MM.yyyy"
        slotProps={{
          day: {
            render: ({ day, selected, disabled, ...otherProps }) => {
              const isHighlighted = isHighlightedDate(day);
              return (
                <div
                  {...otherProps}
                  sx={{
                    position: 'relative',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '36px',
                    height: '36px',
                    borderRadius: '50%',
                    // 高亮样式：绿色实心圆圈
                    ...(isHighlighted && {
                      backgroundColor: '#4ade80',
                      color: 'white',
                    }),
                    // 选中状态优先级高于高亮，避免样式冲突
                    ...(selected && {
                      backgroundColor: 'primary.main',
                    })
                  }}
                >
                  {day.getDate()}
                </div>
              );
            }
          }
        }}
      />
    </LocalizationProvider>
  );
}

关键说明 #

• 日期匹配逻辑：必须忽略Date对象的时分秒部分，否则同一日期但不同时间的Date实例会被判定为不同日期。
• 样式优先级：选中状态的样式需要覆盖高亮样式，保证交互视觉的一致性。
• 依赖要求：需提前安装@mui/x-date-pickers和date-fns（或其他适配库如dayjs）。

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