React Mui DateRangePicker include Calendar Icon

user_11603006 0
Viewed 702

I want to implement a DateRangePicker from Material UI with a calendar icon, e.g. it should look like that: enter image description here

According to the Api documentation it should work with

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

but it doesn't. See codesandbock.

I also tried it by adding an Icon manually to the TextField which shows an Icon but doesn't open the PopupMenu when clicking on the Icon.

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

Anyone an idea how to implement that? I am using mui 5.1.0 and mui/lab 5.0.0-alpha.50

react-typescript material-ui typescript reactjs
1 Answers

I haven't used the Component from the library but you're right according to the documentation

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

Should work but it doesn't.

In your workaround, you're not supplying anything on the IconButton onClick event handler so naturally, the icon does nothing when clicked.

What you need to do is focus on the input whenever the Icon is clicked. You can achieve that by using the useRef hook in your input and then calling the current.focus() method inside the onClick handler of the IconButton.

  const startInputRef = React.useRef();

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

See codesandbox for a working example.

I still think this is a hacky workaround though so I'd suggest opening an issue on the library's github repo to get instructions.

user_62621620
Related