Material de estilo UI InputBase con selectores de fecha y hora

Aug 21 2020

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

1 GiovanniEsposito Aug 21 2020 at 04:10

Ciao, desafortunadamente no puedes cambiar el color del ícono (a blanco si entendí correctamente). Intenté anular la &.MuiInputBase-inputclase css también, pero lo único que logré fue cambiar el color del texto.

Pero puedes hacer algo más (si quieres). Puede utilizar DatePickerdesde @material-ui/pickers. Esto, por supuesto, es más personalizable (y creo que es más genial).

¿Que necesitas?

  1. @ date-io / moment (la versión 1.x presta atención a esto);
  2. @ material-ui / pickers;
  3. @ fecha-io / momento;
  4. momento;

Instaladas estas bibliotecas, puedes hacer algo como eso:

  1. Definir un tema:

    const Theme = {
      palette: {
        primary: {  // primary color
        contrastText: "#FFFFFF",
        dark: "#000000",  
        main: "#000000",  // black
        light: "#000000"
      }
    }
    };
    
  2. Crea un tema de Mui:

    const theme = createMuiTheme(Theme);
    
  3. 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}
       />
    
  4. Envuelva DatePickeren un ThemeProvider(pasar Themea DatePicker) y en un MuiPickersUtilsProvider(administrar la fecha con moment):

     <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.