-1

My Datepicker always pop in bottom left of my input. how can i change direction to calendar icon instead. i have try for many hours

enter image description here

<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 direction to calendar icon instead.

Sarawut Nangyam
  • 3
  • 1

1 Answers1

0

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' }}}/>
idmitrov
  • 464
  • 1
  • 5
  • 13
  • thank you very much! that's help in addition how can i custom datepicker input or calendar example focus,border in Input, size of calendar or bg color? – Sarawut Nangyam Sep 03 '23 at 05:27