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');
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>