CODEWITHSUNDEEP
material-uireact-forwardrefmui-x-date-picker
Samir Pm
Samir Pm

Reputation: 1

mui datepicker forward ref function to open

this is my code :

  <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>

i just want to open the datepicker whenever click on the calenderMonth icon.In this part<IconButton onClick={()=>DateRef.current.openCalendar()}, actually 'current.openCalendar' is not really the function to open. so i appreciate the correct answer from your side guys.....

Upvotes: 0

Views: 174

Answers (1)

discovrer
discovrer

Reputation: 302

The event which opens DatePicker pop up is on InputAdornment's IconButton. So, you'll need to fire click event on the IconButton from Calender Month button. Use

<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>

Upvotes: 0

Related Questions