mui datepicker前向引用功能开启

Question

这是我的代码：

  <Box display={'flex'} justifyContent={'space-between'}>
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker ref={DateRef} sx={{display:'none'}}/>
                </LocalizationProvider>
                <Box sx={{display:'flex',justifyContent:'center',alignItems:'center'}}>
                <Typography variant='h5' fontWeight={'bold'}>
                    Calender
                </Typography>
                </Box>
                <Box display={'flex'} gap={2}>
                    <IconButton onClick={()=>DateRef.current.openCalendar()} sx={{backgroundColor:'#D9D9D9',color:'black'}}>
  
                        <CalendarMonth/>
                    </IconButton>
                    <IconButton sx={{backgroundColor:'#D9D9D9',color:'black'}}>
                        <Close/>
                    </IconButton>
                </Box>
            </Box>

我只想在点击calenderMonth图标时打开日期选择器。在这部分DateRef.current.openCalendar()}中，实际上'current.openCalendar'并不是真正要打开的函数。所以我很感谢你们这边的正确答案......

Answer 1

打开

DatePicker

弹出窗口的活动在

InputAdornment

的

IconButton

上。因此，您需要在日历月按钮的

IconButton

上触发单击事件。 使用

<Box display={'flex'} justifyContent={'space-between'}>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
                sx={{display: 'block'}}
                slots={{
                    openPickerIcon: ()=><Event ref={DateRef}/>
                }}
            />
        </LocalizationProvider>
        <Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
            <Typography variant='h5' fontWeight={'bold'}>
                Calender
            </Typography>
        </Box>
        <Box display={'flex'} gap={2}>
            <IconButton onClick={() => DateRef.current?.parentElement.click()} sx={{backgroundColor: '#D9D9D9', color: 'black'}}>
                <CalendarMonth/>
            </IconButton>
            <IconButton sx={{backgroundColor: '#D9D9D9', color: 'black'}}>
                <Close/>
            </IconButton>
        </Box>
    </Box>