reactjs 如何突出一些特定的日子?

iqxoj9l9  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(81)

我想使用multi-x-date-pickers来突出显示Date数组中的某些特定日期(使用new Date),就像一个绿色填充的圆圈围绕着日期数字一样。我如何才能实现这一点?
这是我现在的代码:

<DatePicker
            label="Date du jour à visualiser"
            openTo="day"
            views={["day", "month", "year"]}
            value={value}
            format="dd.MM.yyyy"
/>

提前感谢您的回答。

kupeojn6

kupeojn61#

下面是我的代码:

import { isSameDay } from "date-fns";
import { PickersDay, PickersDayProps } from "@mui/x-date-pickers";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import React from "react";

const highlightedDays: Array<Date> = [new Date("1970-01-01")];

const CustomDay = (props: PickersDayProps<Date>) => {
    console.log(JSON.stringify(props));
    const matchedStyles = highlightedDays.reduce((a, v) => {
        const date = new Date(props.day);
        return isSameDay(date, v) ? { backgroundColor: "#004b95" } : a;
    }, {});

    return <PickersDay {...props} sx={{ ...matchedStyles }} />;
};

return (<DatePicker
    label="Date du jour à visualiser"
    openTo="day"
    views={["day", "month", "year"]}
    value={value}
    format="dd.MM.yyyy"
    slots={{ day: CustomDay }}
/>);

相关问题