reactjsmaterial-uidatepickermui-x

Mui DatePicker v6: How to change default icon and its position through slots


I need this: enter image description here

instead of this: enter image description here

But now the date picker(@mui/x-date-pickers 6.x) has switched to slots, and there are very few examples on the Web.


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'
        }
      }}
    />