Calendar popup needed to be closed after selecting the date

Question

The calendar popup is not getting closed after selecting the date and it's wrapped in a label tag with an image and the calendar component. if I'm removing the label tag image tag is not activating the calendar popup.

`<label style={{width:"100%"}}>
  <DatePicker
    dateFormat="dd/MM/yyyy"
    placeholderText="Select Date"
    onChange={onChange}
    minDate={props.minDate ? props.minDate : null}
    maxDate={props.maxDate ? props.maxDate : null}
    className={props.className}
    style={{ width: '100%', marginTop:"-10px" }}
    selected={props.value && props.value !== "" ? new Date(props.value) : null}
    showDisabledMonthNavigation
  />
  <img
    src="./images/calendar.png"
    className="custom-input-icon img-fluid"
    alt="c"
    style={{ top: '25px' }}
  />
</label>`

so I tried calling the component using onClick event but it's not really working. i don't know how to do it. any help would be much appreciated.

   <>
   <DatePicker
dateFormat="dd/MM/yyyy"
placeholderText="Select Date"
onChange={onChange}
minDate={props.minDate ? props.minDate : null}
maxDate={props.maxDate ? props.maxDate : null}
className={props.className}
style={{ width: '100%', marginTop:"-10px" }}
selected={props.value && props.value !== "" ? new Date(props.value) : null}
showDisabledMonthNavigation

/>

  <img onClick={handleclick}
    src="./images/calendar.png"
    className="custom-input-icon img-fluid"
    alt="c"
    style={{ top: '25px' }}
  />
</>

handling click???

const handleclick = () => {console.log('ello');

Answer 1

you need to wrap it like this but if i press the preselected date (current date) it won't close the popup so i need to click away to close it

import { DatePicker, LocalizationProvider } from '@mui/lab'
import roLocale from 'date-fns/locale/ro';
import DateAdapter from '@mui/lab/AdapterDateFns';
import { TextField } from '@mui/material';

const [error, setError] = useState(false)
const [value, setValue] = useState<Date | null>(null)

const handleChange = (newValue: Date | null) => {
    setValue(newValue)
}

{/* const handleValidation = () => {
    if (error) {
      alert(error)
    }
} */}

<LocalizationProvider dateAdapter={DateAdapter} locale={roLocale}>
        <DatePicker inputFormat="dd/MM/yyyy"
            label={label}
            openTo="year"
            value={value}
            // onError={err => setError(err ? true : false)}
            onChange={(newValue: Date | null) => handleChange(newValue)}
            maxDate={MIN_DATE}
            minDate={MAX_DATE}
            renderInput={(params) => <TextField variant="standard"
                // onBlur={handleValidation}
                fullWidth
                required={true}
                color="secondary"
                {...params} />} />
</LocalizationProvider>