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

Posted 2023-03-13

【中文标题】MUI - 在 DatePicker 中更改特定日期颜色

【英文标题】：MUI - Change specific day color in 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>
  );

【参考方案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

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

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