Estoy usando Material-UI en mi proyecto React y estoy usando su componente selector de fecha para representar los elementos de fecha. pero el estilo predeterminado no es adecuado para mi necesidad, quiero usar el selector como una visualización de fecha en el cuadro de diálogo del selector de fecha, reemplazando su campo de texto. Después de ver la API relacionada con el selector de fechas de Material-UI, no puedo encontrar formas adecuadas. ¿Alguien puede ayudar? eso será muy útil.
La siguiente imagen es el estilo del selector de fecha que quiero representar:
La siguiente imagen es su estilo predeterminado, el predeterminado es texto:
el código de la siguiente manera:
import { useState } from "react"; import { makeStyles } from "@material-ui/styles"; import { MuiPickersUtilsProvider, KeyboardDatePicker } from "@material-ui/pickers"; import DateFnsUtils from "@date-io/date-fns"; const useStyle = makeStyles({ root: { marginBottom: "3rem", }, }); const CustomizeDatePicker = () => { const classes = useStyle(); const [selectedDate, setSelectedDate] = useState(new Date()); return ( <div className={classes.root}> <MuiPickersUtilsProvider utils={DateFnsUtils}> <KeyboardDatePicker autoOk label="end date" format="yyyy-MM-dd" views={["year", "month", "date"]} openTo="date" value={selectedDate} onChange={setSelectedDate} /> </MuiPickersUtilsProvider> </div> ); }; export default CustomizeDatePicker;En primer lugar, las bibliotecas de terceros generalmente no son tan flexibles como usted quiere que sean. Si solo tiene estilo, se puede sobrescribir con su css usando sus nombres de clase y diseñarlo en consecuencia. Lamentablemente, cuando se trata de funcionalidad, independientemente de lo que expongan, puede usarlo. En casos excepcionales, permiten crear prototipos de sus componentes con funcionalidad extendida, pero este no es el caso aquí.
Sugeriría usar https://material-ui-pickers.dev/ como material-ui incluso lo sugiere, debido a la funcionalidad extendida.
Luego mire su API y lo que puede hacer https://material-ui-pickers.dev/api/DatePicker
La única solución posible para usted es crear su propio selector de fechas.