Material de estilo UI InputBase con selectores de fecha y hora
Estoy tratando de diseñar una de las opciones para los selectores de fecha y hora que se encuentran en material ui. Hice una entrada con estilo que me gustó y estaba tratando de usarla como base. Agregar el type="datetime-local"
accesorio al componente agrega la funcionalidad que necesito, pero no puedo encontrar una manera de diseñar el botón del icono y el cuadro de diálogo.
Aquí está mi experimento en la zona de pruebas de código:
El código del componente se ve así:
<Paper component="form" className={classes.paper} elevation={0}>
<InputBase
className={classes.input}
type="datetime-local"
defaultValue="2017-05-24T10:30"
/>
</Paper>
Los classNames proporcionan el estilo que me gusta para el componente:


Pero necesito cambiar el color del ícono de calendario a la derecha y, si es posible, el estilo del selector de fecha para un tema oscuro.
¿Cómo puedo hacer eso? Gracias por adelantado.
Respuestas
Ciao, desafortunadamente no puedes cambiar el color del ícono (a blanco si entendí correctamente). Intenté anular la &.MuiInputBase-input
clase css también, pero lo único que logré fue cambiar el color del texto.
Pero puedes hacer algo más (si quieres). Puede utilizar DatePicker
desde @material-ui/pickers
. Esto, por supuesto, es más personalizable (y creo que es más genial).
¿Que necesitas?
- @ date-io / moment (la versión 1.x presta atención a esto);
- @ material-ui / pickers;
- @ fecha-io / momento;
- momento;
Instaladas estas bibliotecas, puedes hacer algo como eso:
Definir un tema:
const Theme = { palette: { primary: { // primary color contrastText: "#FFFFFF", dark: "#000000", main: "#000000", // black light: "#000000" } } };
Crea un tema de Mui:
const theme = createMuiTheme(Theme);
Utilice un
DatePicker
:<DatePicker format={"DD-MM-YYYY"} // your date format label="my date" inputVariant="outlined" // if you want an outlined date input helperText="" size="small" value={myDate} onChange={setmyDate} />
Envuelva
DatePicker
en unThemeProvider
(pasarTheme
aDatePicker
) y en unMuiPickersUtilsProvider
(administrar la fecha conmoment
):<ThemeProvider theme={theme}> <MuiPickersUtilsProvider utils={MomentUtils}> <div className="App"> <DatePicker format={"DD-MM-YYYY"} label="my date" inputVariant="outlined" helperText="" size="small" value={myDate} onChange={setmyDate} /> </div> </MuiPickersUtilsProvider> </ThemeProvider>
Y ahora, si hace clic en la entrada de fecha, obtiene esto:

Un DatePicker con un estilo oscuro. Este es un cuadro de diálogo de selector de fechas, pero también puede tener un selector de fechas en línea (usando KeyboardDatePicker
).
Aquí puede encontrar todas las versiones del selector de fechas proporcionadas por MaterialUI.
Lo sé, es un poco complicado la primera vez (¡¡¡cuántas cosas tengo que hacer para un simple selector de fechas !!!) pero el resultado es gráficamente más hermoso.
Aquí un ejemplo de codeandbox de DatePicker
.