CODEWITHSUNDEEP
reactjstypescriptmaterial-uireact-typescript
Jonathan
Jonathan

Reputation: 894

React Mui DateRangePicker include Calendar Icon

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

Upvotes: 2

Views: 2671

Answers (3)

saulodias
saulodias

Reputation: 34

Here is a complete example using also a SingleInputDateRangeField:

<DateRangePicker
    label="Date Range"
    value={selectedFilters.dueDateRange}
    onChange={(value) => handleDateRangeChange('dueDateRange', value)}
    slots={{
        field: SingleInputDateRangeField,
    }}
    slotProps={{
        textField: {
            size: 'small',
            InputProps: {
                startAdornment: (
                    <InputAdornment position="start">
                        <EventIcon />
                    </InputAdornment>
                ),
            },
        },
    }}
/>

Upvotes: 0

Samaan
Samaan

Reputation: 71

I don't know if this is still an issue for you but I managed to do it properly using the slotProps:

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

Upvotes: 3

SakisTsalk
SakisTsalk

Reputation: 865

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.

Upvotes: 2

Related Questions