reactjs: MUI5 : MobileDateTimePicker API: How to customize the text in the calendar

Question

I am using "@mui/x-date-pickers": "^6.9.2", for the showing datetime picket

Now i want to do some styling chages to the popup which helps to select date and time.

How can i do it

I tried

<MobileDateTimePicker
  label="End DateTime"
  inputRef={ref}
  minDate={subDays(new Date(), 90)}
  disableFuture
  {...field}
  sx={{
    "& .MuiPickersToolbarText-root.Mui-selected": {
      color: "#fff",
      backgroundColor: "#e91e63",
      fontWeight: "600",
      WebkitTransition:
        "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
      transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
      borderRadius: "50%",
      fontSize: "0.75rem",
      width: "36px",
      height: "36px",
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
    },
    "& .MuiDateTimePickerToolbar-separator": {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
    },
  }}
/>

But its not able to do any changes to the dialog open

EDIT

I am using the below and it solves my purpose of not allowing to open years and months view buti am facing another thing

views={["day", "hours", "minutes"]}

I want to full date time in the box just as

Answer 1

You can use slotProps property of MobileDateTimePicker. And you can also use minDate and maxDate props to block clicking on months or years.

For example:

<MobileDateTimePicker
    defaultValue={dayjs("2022-04-17T15:30")}
    minDate={dayjs("2022-04-01")}
    maxDate={dayjs("2022-04-30")}
    views={["month", "day"]}
    format="YYYY-MM-DD"
    slotProps={{
      toolbar: {
        sx: {
          "& .MuiPickersToolbarText-root": {
            color: "red"
          }
        }
      },
      day: {
        sx: {
          color: "red"
        }
      }
    }}
  />