MUI DatePicker如何修改指定日期颜色并添加生日等事件标记

实现方案 #

MUI的StaticDatePicker提供了renderDay属性用来完全自定义每个日期单元格的渲染逻辑，不管是修改背景色、加特殊标记还是绑定自定义事件都可以通过这个属性实现。

完整修改后的代码

import React from "react";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import StaticDatePicker from "@mui/lab/StaticDatePicker";
import PickersDay from "@mui/lab/PickersDay"; // 引入默认日期单元格组件
import isWeekend from "date-fns/isWeekend";
import isSameDay from "date-fns/isSameDay"; // 用来判断两个日期是否是同一天

export default function DatePicker() {
  const [value, setValue] = React.useState<Date | null>(new Date());
  // 定义需要标记的生日日期列表，月份从0开始计数
  const birthdayList = [
    new Date(2024, 4, 12), 
    new Date(2024, 4, 20),
    new Date(2024, 4, 25)
  ];

  // 判断当前日期是否是生日
  const checkIsBirthday = (day: Date) => {
    return birthdayList.some(birthday => isSameDay(day, birthday));
  };

  // 自定义日期点击事件
  const handleDayClick = (day: Date, defaultOnClick: () => void) => {
    // 你自己的自定义逻辑
    if(checkIsBirthday(day)) {
      console.log('点击了生日日期：', day);
    }
    // 保留默认的选中逻辑
    defaultOnClick();
  };

  console.log(value);
  return (
    <div>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <StaticDatePicker<Date>
          orientation="portrait"
          openTo="day"
          value={value}
          shouldDisableDate={isWeekend}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} />}
          // 核心自定义逻辑
          renderDay={(day, selectedDate, pickersDayProps) => {
            const isBirthday = checkIsBirthday(day);
            return (
              <PickersDay
                {...pickersDayProps}
                sx={{
                  // 自定义选中日期的样式
                  "&.Mui-selected": {
                    backgroundColor: "#2196f3",
                    color: "#fff",
                    "&:hover": {
                      backgroundColor: "#1976d2",
                    }
                  },
                  // 自定义生日日期的样式：加橘色边框、底部加小红点
                  ...(isBirthday && {
                    backgroundColor: "#fff9c4",
                    border: "2px solid #ff9800",
                    position: "relative",
                    "&::after": {
                      content: '""',
                      position: "absolute",
                      bottom: "3px",
                      left: "50%",
                      transform: "translateX(-50%)",
                      width: "4px",
                      height: "4px",
                      borderRadius: "50%",
                      backgroundColor: "#f44336",
                    }
                  })
                }}
                // 绑定自定义点击事件
                onClick={(e) => handleDayClick(day, () => pickersDayProps.onClick?.(e))}
                // 还可以绑定其他自定义事件，比如onMouseEnter、onMouseLeave等
                onMouseEnter={() => isBirthday && console.log('悬浮到生日日期')}
              />
            )
          }}
        />
      </LocalizationProvider>
    </div>
  );
}

功能说明

• 自定义选中颜色：通过sx属性覆盖Mui-selected类的样式即可修改选中日期的背景色、文字色
• 指定日期加标记：先定义需要标记的日期列表，通过isSameDay判断当前渲染的日期是否在标记列表中，再给对应单元格加自定义样式、小标记点
• 自定义事件：在PickersDay组件上直接绑定需要的事件即可，注意如果需要保留日期选中的默认逻辑，要手动调用props里自带的对应事件

原问题附效果参考：

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