reactjsmaterial-uidatepickermui-x-date-picker

MUI X Date Picker v6: How to change default icon and its position through slots

I'm using @mui/x-date-pickers (version 6.x) and need to customize the Date Picker to match this:

enter image description here

instead of this:

enter image description here

In previous versions, modifying the Date Picker was easier using renderInput or custom components. However, in version 6.x, it has switched to the slots API, and I’m struggling to find clear examples or documentation on how to achieve this customization.

Solution

  • Codesandbox: https://codesandbox.io/s/mui-datepicker-change-icon-and-its-position-ylzn4n?file=/demo.tsx

    Code for adding startAdornment for your field:

    import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import BugReportIcon from "@mui/icons-material/BugReport";

//...

<DatePicker
  label="mui datapicker"
  slotProps={{
    textField: {
      InputProps: { startAdornment: <BugReportIcon /> }
    }
  }}
/>

    Code for changing the default date picker icon:

       <DatePicker
     slots={{
       inputAdornment: BugReportIcon
     }}
   />

    Code for change icon and its position:

    <DatePicker
  slots={{
    inputAdornment: BugReportIcon
  }}
  slotProps={{
    inputAdornment: {
      position: 'start'
    }
  }}
/>