Good day to everyone.
I encountered the problem of customization of the DateRangePicker component from the @material-ui library. In particular, I'm trying to add 3 buttons Button under the calendar. That's how I came out now (image 1).
I already swore all the documentation and I miss knowledge to cope with this task. Please tell me how it can be done, at least words. I went to a deschanted way to add these buttons to the native (not controlled react) in the way, but I ran into a problem that I cannot suspend event handlers to start a REACT-REDUX ecosystem. I understand that the appeal to the elements should be done through the ref, but I don't even know how to get a DataPicker calendar component.
Image 1. 
As I did at the moment - it's horror. I make marking when opening the calendar onopen, which does not allow me to further attach an event differential and interact with local states (or at least with Dispatch).
<Grid item lg={3} md={5} sm={12}>
<MuiDateRangePicker
startText="От"
endText="До"
mask="__.__.____"
calendars={1}
value={selectedDate}
okText={"Okk"}
showDaysOutsideCurrentMonth={true}
showTodayButton={true}
showToolbar={false}
todayText={"Сегодня!"}
PopperProps={{id:'filter-data-range-picker', ref: calendarPopupRef}}
onOpen={() => {
console.log(`ff `,calendarPopupRef.current);
let calendarWrapper = calendarPopupRef?.current?.querySelector('.MuiPickersDesktopDateRangeCalendar-rangeCalendarContainer');
let panel = calendarWrapper?.querySelector('.calendar-bottom-panel');
if (!panel) {
let div = document.createElement('div');
div.innerHTML = `
<div class="calendar-bottom-panel" style="display: grid; grid-gap: 10px; grid-template-columns: auto auto auto; padding: 0 14px 14px">
<button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button" onClick=""><span class="MuiButton-label">День</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button" onClick=""><span class="MuiButton-label">Неделя</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button" onClick=""><span class="MuiButton-label">Месяц</span><span class="MuiTouchRipple-root"></span></button>
</div>
`;
calendarWrapper?.appendChild(div);
}
}}
onClose={() => console.log('close calendar')}
onChange={date => {
handleDateChange(date);
dispatch(changeValueFilterByKeyNameOfTreeAction("lastConversationTime", date as any))
}}
ToolbarComponent={(props) => (
<div {...props}>
Test
</div>
)}
renderInput={(startProps, endProps) => (
<>
<TextField
{...startProps}
variant="filled"
helperText=""
inputProps={{...startProps.inputProps, placeholder:"дд.мм.гггг"}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{selectedDate[0] !== null && (
<IconButton size="small" onClick={() => {
const date = [null, selectedDate[1]]
handleDateChange(date)
dispatch(changeValueFilterByKeyNameOfTreeAction("lastConversationTime", date as any))
}}>
<ClearIcon fontSize="small"/>
</IconButton>
)}
<DateRangeIcon fontSize="small" />
</InputAdornment>
),
}}
/>
<TextField
{...endProps}
variant="filled"
helperText=""
inputProps={{...endProps.inputProps, placeholder:"дд.мм.гггг"}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{selectedDate[1] !== null && (
<IconButton size="small" onClick={() => {
const date = [selectedDate[0], null]
handleDateChange(date)
dispatch(changeValueFilterByKeyNameOfTreeAction("lastConversationTime", date as any))
}}>
<ClearIcon fontSize="small"/>
</IconButton>
)}
<DateRangeIcon fontSize="small" />
</InputAdornment>
),
}}
/>
</>
)}
/>
</Grid>