在 MUI StaticDatePicker 日曆中反白顯示日期
P粉513316221
P粉513316221 2023-08-30 17:38:38
0
1
592
<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>            
P粉513316221
P粉513316221

全部回覆(1)
P粉818306280

就像 steve 所說的 在新版本中不接受 renderDay 屬性。相反必須使用插槽。 StaticDatePicker 的程式碼

import React, { useState } from "react";
import dayjs from "dayjs";
import { useReadAllEvent } from "../hooks/useEvent.mjs";
import { Box } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Loading } from "../pages/index.mjs";
import { EventCard } from "./index.mjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { PickersDay } from "@mui/x-date-pickers/PickersDay";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";

const HighlightedDay = styled(PickersDay)(({ theme }) => ({
  "&.Mui-selected": {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
  },
}));

//higlight the dates in highlightedDays arra
const ServerDay = (props) => {
  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;

  const isSelected =
    !props.outsideCurrentMonth &&
    highlightedDays.includes(day.format("YYYY-MM-DD"));

  return (
    <HighlightedDay
      {...other}
      outsideCurrentMonth={outsideCurrentMonth}
      day={day}
      selected={isSelected}
    />
  );
};

const SessionBooking = ({ doctor }) => {
  const [value, setValue] = useState("");
  const [highlightedDays, setHighlitedDays] = useState([
    "2023-07-01",
    "2023-07-09",
    "2023-07-21",
    "2024-07-12",
  ]);


  const today = dayjs();

  return (
    
      <Box>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            defaultValue={today}
            minDate={today}
            maxDate={today.add(1, "month")}
            slots={{
              day: ServerDay,
            }}
            slotProps={{
              day: {
                highlightedDays,
              },
            }}
          />
        </LocalizationProvider>
      </Box>
  );
};

export default SessionBooking;
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板