Question 205369 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

enter image description here

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

Tags:

2

Answers


  1. 0

    Changes are not enabled because elements with classes MuiPickersToolbarText-root and MuiDateTimePickerToolbar-separator are not nested from MobileDateTimePicker in the DOM, they are in a portal dialog.

    You can do:

    <MobileDateTimePicker
   {...your props}
   slotProps={{
      toolbar: {
         sx: {
            // You sx here
         }
      }
   }}
/>

    Source:
    Material UI Documentation:
    https://mui.com/x/api/date-pickers/mobile-date-time-picker/

    Login or Signup to reply.
  2. 0

    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")}
    slotProps={{
      toolbar: {
        sx: {
          "& .MuiPickersToolbarText-root": {
            color: "red"
          }
        }
      },
      day: {
        sx: {
          color: "red"
        }
      }
    }}
  />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search