La ventana emergente del calendario no se cierra después de seleccionar la fecha y está envuelta en una etiqueta con una imagen y el componente del calendario. si elimino la etiqueta de la etiqueta, la etiqueta de la imagen no está activando la ventana emergente del calendario.
`<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>`así que intenté llamar al componente usando el evento onClick pero realmente no funciona. no se como hacerlo cualquier ayuda sería muy apreciada.
<> <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' }} /> </>manejo de clic???
const handleclick = () => {console.log('ello');debe envolverlo así, pero si presiono la fecha preseleccionada (fecha actual), no cerrará la ventana emergente, por lo que debo hacer clic para cerrarla.
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>