Calendário Material UI

React

Front-end

JavaScript Web

05/03/2024

Estou enfrentando um problema com uma atividade que estou realizando relacionada a uma escala mensal. Preciso integrar um componente de calendário do Material UI para selecionar múltiplas datas durante o mês. Já tenho um componente pronto para essa função, que exibe o calendário na tela. No entanto, ao tentar selecionar uma data, a tela fica em branco e no console aparece um erro indicando um loop infinito de renderizações. O erro específico é relatado no componente <ForwardRef(StaticDatePicker)>.



Segue o código do componente:


import * as React from "react";
import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
import { PickersDay } from "@mui/x-date-pickers";
import startOfDay from "date-fns/startOfDay";

const CustomPickersDay = styled(PickersDay, {
shouldForwardProp: (prop) => prop !== "selected",
})(({ theme, selected }) => ({
...(selected && {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
"&:hover, &:focus": {
backgroundColor: theme.palette.primary.dark,
},
borderTopLeftRadius: "50%",
borderBottomLeftRadius: "50%",
borderTopRightRadius: "50%",
borderBottomRightRadius: "50%",
}),
}));

export default function MultiDatePicker() {
const [values, setValues] = React.useState([]);
const findDate = (dates, date) => {
const dateTime = date.getTime();
return dates.find((item) => item.getTime() === dateTime);
};

const findIndexDate = (dates, date) => {
const dateTime = date.getTime();
return dates.findIndex((item) => item.getTime() === dateTime);
};

const renderPickerDay = (date, selectedDates, pickersDayProps) => {
if (!values) {
return <PickersDay {...pickersDayProps} />;
}

const selected = findDate(values, date);

return (
<CustomPickersDay
{...pickersDayProps}
disableMargin
selected=
/>
);
};

return (
<StaticDatePicker
displayStaticWrapperAs="desktop"
label="Week picker"
value=
onChange={(newValue) => {
const array = [...values];
const date = startOfDay(newValue);
const index = findIndexDate(array, date);
if (index >= 0) {
array.splice(index, 1);
} else {
array.push(date);
}
setValues(array);
}}
renderDay=
renderInput={(params) => <TextField {...params} />}
inputFormat="''Week of'' MMM d"
/>
);
}
Joilson

Joilson

Curtidas 0
POSTAR