Reactjs 在物料界面的组件DateRangePicker中添加按钮或自定义DateRangePicker

大家好。 我遇到了从

@materialui

库自定义组件的问题。特别是，我试图在日历下添加3个按钮

按钮
。我就是这样出来的（图1）。
我已经发誓所有的文件，我错过了处理这项任务的知识。请告诉我怎么做，至少用几句话。我采用了一种描述的方式，以这种方式将这些按钮添加到本机（不是受控的react），但我遇到了一个问题，即我无法挂起事件处理程序来启动react-REDUX生态系统。我知道对元素的调用应该通过
ref
完成，但我甚至不知道如何获得数据采集器日历组件

图1

正如我当时所做的那样——这太可怕了。我在打开日历时进行标记，这不允许我进一步附加事件差异并与本地状态交互（或至少与调度交互）


{
log（`ff`，calendarPopupRef.current）；
让calendarWrapper=calendarPopupRef？.current？.querySelector（'.MuipickerDesktopDateRangeCendarRangeCendarContainer'）；
let panel=calendarWrapper？.querySelector（“.calendar bottom panel”）；
如果（！面板）{
设div=document.createElement（'div'）；
div.innerHTML=`
День
Неделя
Месяц
`;
calendarWrapper？.appendChild（div）；
}
}}
onClose={（）=>console.log（'close calendar'）}
onChange={date=>{
处理日期变更（日期）；
分派（ChangeValueFilterByNameoftreaction（“lastConversationTime”，日期，如有））
}}
工具栏组件={（道具）=>(
试验
)}
renderInput={（startProps，endProps）=>(
)}
),
}}
/>
)}
),
}}
/>
)}
/>
Default material ui的日期选择器绝对不可自定义。我想你应该换个更合适的。例如，
react dates
。“至少我走了那条路，永远走下去。”阿列克索谢谢你的建议。我仔细查看了库，它允许您根据需要实现底部面板。我有一个小问题：是否可以在Material UI下自定义此库？不幸的是，它没有使用Material UI的组件。虽然它是高度可定制的，您可以使它看起来像您的其他组件，而无需太多的努力。
<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>