Recientemente comencé a usar material-ui en mi proyecto React + TypeScript. El siguiente código se escribió en base al código de muestra del sitio web oficial.
import AdapterDateFns from '@mui/lab/AdapterDateFns'; import DatePicker from '@mui/lab/DatePicker'; import LocalizationProvider from '@mui/lab/LocalizationProvider'; import TextField from '@mui/material/TextField'; import React, { useState } from 'react'; const SampleDatePickerOriginal = () => { const [date, setDate] = useState<Date>(new Date()); const onChangeHandler = (_date: Date | null, keyboardInputValue?: string) => { if (_date) { setDate(_date); } }; return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker onChange={onChangeHandler} value={date} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider> ); }; export default SampleDatePickerOriginal;Quería usar el elemento de entrada en lugar de TextField en este código. Así que me referí al problema de material-ui ( https://github.com/mui/material-ui-pickers/issues/1751 ) y escribí el código a continuación.
import AdapterDateFns from '@mui/lab/AdapterDateFns'; import DatePicker from '@mui/lab/DatePicker'; import LocalizationProvider from '@mui/lab/LocalizationProvider'; import React, { useState } from 'react'; const SampleDatePickerCustom = () => { const [date, setDate] = useState<Date>(new Date()); const [isOpen, setIsOpen] = useState<boolean>(false); const onChangeHandler = (_date: Date | null, keyboardInputValue?: string) => { if(_date){ setDate(_date); } }; return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker onChange={onChangeHandler} onClose={() => {setIsOpen(false);}} open={isOpen} value={date} renderInput={({ ref, inputProps, disabled, onChange, value, ...other }) => ( <div ref={ref}> <input style={{ display: 'none' }} value={date.toISOString()} onChange={onChange} disabled={disabled} {...inputProps} /> <button onClick={() => {setIsOpen(!isOpen);}}> OPEN </button> </div>)} /> </LocalizationProvider> ); }; export default SampleDatePickerCustom;Este código funciona bien, pero el calendario que se abre está en la esquina superior izquierda. ¿Cómo puedo hacer que aparezca justo debajo del botón como cuando uso TextField?
Estaba atascado en el mismo problema aquí hoy y, afortunadamente, ahora me funcionó.
La idea es que debe pasar un elemento de anclaje al componente Material UI Popper, que es básicamente el envoltorio para su Datepicker Popup. Eso significa que debe crear un objeto ref para su entrada personalizada y pasarlo al objeto emergente como anchorEl . Si consulta la documentación de MaterialUI X para la API Datepicker , puede verla en la sección Props como PropperProps .
Tu código entonces se vería así:
import React, { useState, useRef } from 'react'; const SampleDatePickerCustom = () => { const [date, setDate] = useState<Date>(new Date()); const [isOpen, setIsOpen] = useState<boolean>(false); const customInputRef = useRef(); const onChangeHandler = (_date: Date | null, keyboardInputValue?: string) => { if(_date){ setDate(_date); } }; return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker onChange={onChangeHandler} onClose={() => {setIsOpen(false);}} open={isOpen} value={date} PopperProps={{ anchorEl: customInputRef.current }} renderInput={({ ref, inputProps, disabled, onChange, value, ...other }) => ( <div ref={ref}> <input style={{ display: 'none' }} value={date.toISOString()} onChange={onChange} disabled={disabled} ref={customInputRef} {...inputProps} /> <button onClick={() => {setIsOpen(!isOpen);}}> OPEN </button> </div>)} /> </LocalizationProvider> ); }; Las únicas cosas que agregué son el objeto customInputRef , que se asigna como una referencia a su entrada y el objeto PropperProps en su Selector de fechas, que solo tiene una propiedad, el elemento customInputRef.current . Eso debería hacer que el Popper esté anclado en el elemento de entrada personalizado proporcionado. No escribí las adiciones, ya que no soy el mejor en TS, pero espero que sea suficiente para entender cómo funciona :)
Pude solucionarlo usando TextField pero ocultándolo con estilos... <TextField style={{ opacity: 0, width: 0, height: 0 }} {...params} />
<LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker open={calendarOpen} onClose={() => setCalendarOpen(false)} value={date} onChange={(newValue) => setDate(newValue)} renderInput={(params) => ( <div> {/* HACK: this next line was needed to get the calendar to render in the right position */} <TextField style={{ opacity: 0, width: 0, height: 0 }} {...params} /> <Button className="p-1" variant="outlined" onClick={() => setCalendarOpen((calendarOpen) => !calendarOpen)}> <CalendarIcon /> </Button> </div> )} /> </LocalizationProvider>