InputBase dell'interfaccia utente del materiale di stile con selettori di data e ora

Aug 21 2020

Sto cercando di modellare una delle opzioni per i selettori di data e ora che si trovano nell'interfaccia utente del materiale. Ho creato un input in stile che mi piaceva e stavo cercando di usarlo come base. L'aggiunta type="datetime-local"dell'elica al componente aggiunge la funzionalità di cui ho bisogno, ma non riesco a trovare un modo per modellare il pulsante icona e la finestra di dialogo.

Ecco il mio esperimento nella sandbox del codice:

Il codice per il componente ha questo aspetto:

<Paper component="form" className={classes.paper} elevation={0}>
  <InputBase
    className={classes.input}
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
  />
</Paper>

I classNames forniscono lo stile che mi piace per il componente:

Ma ho bisogno di cambiare il colore per l'icona del calendario a destra e, se possibile, lo stile del selettore di date per un tema scuro.

Come lo posso fare? Grazie in anticipo.

Risposte

1 GiovanniEsposito Aug 21 2020 at 04:10

Ciao, purtroppo non puoi cambiare il colore dell'icona (in bianco se ho capito bene). Ho provato a sovrascrivere &.MuiInputBase-inputanche la classe CSS, ma l'unica cosa che ho ottenuto è stata cambiare il colore del testo.

Ma puoi fare qualcosa di più (se vuoi). Puoi usare DatePickerda @material-ui/pickers. Questo è ovviamente più personalizzabile (e penso più interessante).

Di che cosa hai bisogno?

  1. @ date-io / moment (versione 1.x prestare attenzione a questo);
  2. @ material-ui / pickers;
  3. @ date-io / moment;
  4. momento;

Installate queste librerie puoi fare qualcosa del genere:

  1. Definisci un tema:

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

    const theme = createMuiTheme(Theme);
    
  3. Usa 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. Avvolgi DatePickerin a ThemeProvider(per passare Themea DatePicker) e in a MuiPickersUtilsProvider(per gestire l'appuntamento 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>
    

E ora se fai clic sull'inserimento della data hai questo:

Un DatePicker con uno stile scuro. Questa è una finestra di dialogo per la selezione della data, ma puoi anche avere un selettore della data in linea (usando KeyboardDatePicker).

Qui puoi trovare tutte le versioni del selettore di date fornite da MaterialUI.

Lo so, è un po 'complicato la prima volta (quante cose devo fare per un semplice selettore di date !!!) ma il risultato è graficamente più bello.

Ecco un esempio di codeandbox DatePicker.