In Mui x datepicker how can i set popper direction of Datepicker?

Question

My Datepicker always pops in the bottom left of my input. how can I change the direction of the calendar icon instead? I have tried for many hours

Image

<LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
              sx={{
                width: 453,
                marginBottom: 5,
                "& .MuiInputBase-root": {
                  height: 48,
                  borderRadius: "0.5rem",
                  border: "1px solid #CBD5E0",
                },
              }}
              components={{
                OpenPickerIcon: () => (
                  <img
                    src={calendarIcon}
                    alt="Calendar Icon"
                    className="w-[24px] h-[24px] mx-[4px]"
                  />
                ),
              }}
              format="DD-MM-YYYY"
            />
          </LocalizationProvider>

How can I change the direction to the calendar icon instead?

Answer 1

The Datepicker has a prop slotProps - documentation https://mui.com/x/api/date-pickers/date-picker/#DatePicker-prop-slotProps So you use slotProps prop to override the popper component and change the placement per your choice - check the available placement options here: https://mui.com/material-ui/api/popper/#Popper-prop-placement

e.g.

<DatePicker label="Basic date picker" slotProps={{ popper: { placement: 'bottom-end' }}}/>