<p>我正在嘗試將 MUI StaticDatePicker 實作到我的 React 網站。我想要的是使用藍色圓圈或徽章突出顯示日曆中的幾天。我嘗試了各種方法來實現這一點,但我無法獲得日曆中突出顯示的日期輸出。如果有人知道該怎麼做,請幫幫我。在下面的程式碼中,我嘗試突出顯示日曆中的highlightDays狀態值。 </p>
<p>我在我的網站中使用了dayjs庫處理時間和日期相關的資料。但無論出於什麼原因,我看不到我的 renderDay 正在運行。最後,我想要實現的是阻止今天之前的日期,即當前日期之前的日期,並在日曆中突出顯示即將發生的活動日期。</p>
從「react」匯入 { React, useState };
從“dayjs”導入dayjs;
從“@mui/material”導入{Box,TextField};
從“../pages/index.mjs”導入{載入};
從“./index.mjs”導入{EventCard};
從“@mui/x-date-pickers/AdapterDayjs”導入{ AdapterDayjs };
從「@mui/x-date-pickers/LocalizationProvider」匯入{ LocalizationProvider };
從「@mui/x-date-pickers/StaticDatePicker」匯入{ StaticDatePicker };
從“../hooks/useEvent.mjs”導入{useReadAllEvent};
從“@mui/x-date-pickers”導入{ PickersDay };
從“@mui/material”導入{徽章};
const SessionBooking = ({ 醫生 }) =>; {
const [值,setValue] = useState(“”);
const [highlightDays, setHighlightDays] = useState([
“2023年6月1日”,
“2023年6月2日”,
“2023年6月4日”,
]);
控制台.log(值);
const { 資料: eventSet, isLoading } = useReadAllEvent({
onSuccess: (訊息) => {},
onError: (訊息) => {},
會話:{ id:醫生,今天:dayjs().format(“YYYY-MM-DD”) },
});
if (isLoading) return <正在載入/>;
控制台.log(事件集);
常數事件 = eventSet.map(
({ key, countPatient, start, end, maxPatients }) =>; (
<活動卡
鍵={鍵}
開始={開始}
結束={結束}
患者={countPatient}
最大值={最大患者}
>>
)
);
返回 (
<盒子
MT={2}
SX={{
顯示:“網格”,
網格模板列:{
xs: "重複(1, 1fr)",
sm: "重複(1, 1fr)",
md: "重複(2, 1fr)",
},
間隙:1,
}}
>
<盒子>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<靜態日期選擇器
方向=“縱向”
openTo="日";
值={值}
onChange={(newValue) =>; {
設定值(新值);
}}
renderInput={(params) =>; }
renderDay={(day, _value, DayComponentProps) =>; {
const isSelected =
!DayComponentProps.outsideCurrentMonth &&
highlightDays.includes(dayjs(day).format(“YYYY-MM-DD”));
返回 (
<徽章
key={day.toString()}
重疊=“圓形”
徽章內容={已選擇? “-” : 不明確的}顏色=“原色”
>
/>
</徽章>
);
}}
>>
</本地化提供者>
</框>
{事件}
</框>
);
};
導出預設SessionBooking;</pre>
<pre class="brush:php;toolbar:false;"></pre></p>
就像 steve 所說的
在新版本中不接受 renderDay 屬性。相反必須使用插槽。 StaticDatePicker 的程式碼