MUI - 在 DatePicker 中更改特定日期颜色答案

【问题标题】：MUI - Change specific day color in DatePickerMUI - 在 DatePicker 中更改特定日期颜色
【发布时间】：2021-11-27 07:43:51
【问题描述】：

有人向 MUI DatePicker 添加了事件吗？或者有人知道更改选定日期的背景？例如更改所选日期的颜色？或者为选定的日期添加生日？

我的代码：

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 isWeekend from "date-fns/isWeekend";

export default function DatePicker() {
  const [value, setValue] = React.useState<Date | null>(new Date());
  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} />}
        />
      </LocalizationProvider>
    </div>
  );
}

【问题讨论】：

标签： reactjs typescript react-native react-redux material-ui

【解决方案1】：

您可以创建一个自定义的PickersDay 组件并像这样覆盖选定的日期背景颜色：

import DatePicker from "@mui/lab/DatePicker";
import PickersDay, {
  PickersDayProps,
  pickersDayClasses
} from "@mui/lab/PickersDay";

const renderWeekPickerDay = (
  date: Date,
  selectedDates: Array<Date | null>,
  pickersDayProps: PickersDayProps<Date>
) => {
  return (
    <PickersDay
      {...pickersDayProps}
      sx={{
        [`&&.${pickersDayClasses.selected}`]: {
          backgroundColor: "green"
        }
      }}
    />
  );
};

然后覆盖DatePicker中的renderDay回调：

<DatePicker
  renderDay={renderWeekPickerDay}
  {...}
/>

编辑：如果您想用不同的样式突出显示多天：

type HighlightedDay = {
  date: Date;
  styles: React.CSSProperties;
};
const highlightedDays: HighlightedDay[] = [
  {
    date: birthday,
    styles: { color: "red" }
  },
  {
    date: addDays(new Date(), 6),
    styles: { /* ... */ }
  },
  {
    date: addDays(new Date(), 9),
    styles: { /* ... */ }
  },
  {
    date: addDays(new Date(), 12),
    styles: { /* ... */ }
  }
];

const renderWeekPickerDay = (
  date: Date,
  selectedDates: Array<Date | null>,
  pickersDayProps: PickersDayProps<Date>
) => {
  const matchedStyles = highlightedDays.reduce((a, v) => {
    return isSameDay(date, v.date) ? v.styles : a;
  }, {});

  return (
    <PickersDay
      {...pickersDayProps}
      sx={{
        ...matchedStyles,
        [`&&.${pickersDayClasses.selected}`]: {
          backgroundColor: "green"
        }
      }}
    />
  );
};

现场演示

参考

https://mui.com/components/date-picker/#customized-day-rendering

【讨论】：

谢谢，这是我一直在寻找的解决方案。我还有一个问题。为什么是“const 生日 = addDays(new Date(), 3);”将日期设置为 2021 年 10 月 4 日？
如果我想多天换色怎么办？
@kacper3671 查看我更新的答案。关于您的第一条评论，请通过记录 new Date() 检查您的系统时间，addDays() 在我的机器上按预期工作。

【解决方案2】：

您可以尝试导入DatePicker 并检查。

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
import 'bootstrap-daterangepicker/daterangepicker.css';

在您的代码中使用它，如下所示：

<DatePicker
     selected={this.state.fromDate}
     onChange={this.handleFilterFromMonthChange}
     dateFormat="MM/yyyy"
     showMonthYearPicker
     className="form-control"
/>

当你安装日期选择器时，你会在节点模块中找到文件

react-datepicker.css 即。 react-datepicker -> dist -> react-datepicker.css,

daterangepicker.css 即。 bootstrap-daterangepicker -> daterangepicker.css

也许您可以对这些文件进行一些更改，您可能会得到您正在搜索的内容。你可以试试这个，让我知道它是否解决了。

如果没有，那么我会尝试找到不同的方法来解决您的问题

【讨论】：