reactjs - React Mui DateRangePicker inkludera kalenderikon

Jag vill implementera en DateRangePicker från Material UI med en kalenderikon, till exempel det ska se ut så här:

Enligt API-dokumentationen borde det fungera med

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

men det gör det inte. Se codesandbock.

Jag försökte också genom att lägga till en ikon manuellt i TextField som visar en ikon men inte öppnar PopupMenu när man klickar på ikonen.

InputProps={{
  endAdornment: (
    <InputAdornment position="end">
      <IconButton>
        <CalendarTodayIcon />
      </IconButton>
    </InputAdornment>
  )
}}

Någon som har en idé om hur man implementerar det? Jag använder mui 5.1.0 och mui/lab 5.0.0-alpha.50

Svar #1

Jag vet inte om detta fortfarande är ett problem för dig, men jag lyckades göra det korrekt med slotProps:

<DateRangePicker
  slotProps={{
    textField: {
      InputProps: { endAdornment: <CalendarTodayRoundedIcon /> },
    },
  }}
/>

Svar #2

Jag har inte använt komponenten från biblioteket, men du har rätt enligt dokumentationen

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

Borde fungera men det gör det inte.

I din lösning tillhandahåller du ingenting på IconButton onClick-händelsehanteraren, så naturligtvis gör ikonen ingenting när den klickas.

Det du behöver göra är att fokusera på inputfältet varje gång ikonen klickas. Du kan uppnå det genom att använda useRef-hooken i ditt inputfält och sedan kalla på current.focus()-metoden inne i onClick-handlaren för IconButton.

  const startInputRef = React.useRef();

<TextField
              inputRef={startInputRef}
              {...startProps}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton
                      onClick={() => {
                        startInputRef.current.focus();
                      }}
                    >
                      <CalendarTodayIcon />
                    </IconButton>
                  </InputAdornment>
                )
              }}
            />

Se codesandbox för ett fungerande exempel.

Jag tycker fortfarande att detta är en kladdig lösning, så jag skulle föreslå att öppna ett ärende på bibliotekets GitHub-repo för att få instruktioner.