javascriptreactjsmaterial-uimaterial-designmui-x-date-picker

Style Material UI InputBase with Date & Time pickers


I am trying to style one of the options for date time pickers found in material ui. I made a styled Input I liked, and was trying to use that as a base. Adding the type="datetime-local" prop to the component adds the functionality I need, but I can't find a way to style the icon button and the dialog.

Here is my experiment in code sandbox:

The code for the component looks like this:

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

The classNames provide the styling I like for the component: enter image description here

enter image description here

But I need to change the color for the calendar icon on the right and if possible the style of the date picker for a dark theme.

How can I do that? Thanks in advance.


Solution

  • Ciao, unfortunately you cannot change icon color (to white if I understood correctly). I tried to override &.MuiInputBase-input css class also but the only thing I achieved was change text color.

    But you can do something more (if you want). You can use DatePicker from @material-ui/pickers. This is of course more customizable (and I think more cool).

    What do you need?

    1. @date-io/moment (1.x version pay attention on this);
    2. @material-ui/pickers;
    3. @date-io/moment;
    4. moment;

    Installed this libraries you can do something like that:

    1. Define a Theme:

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

      const theme = createMuiTheme(Theme);
      
    3. Use a 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. Wrap DatePicker into a ThemeProvider (to pass Theme to DatePicker) and into a MuiPickersUtilsProvider (to manage date with 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>
      

    And now if you click on date input you got this:

    enter image description here

    A DatePicker with a dark style. This is a date picker dialog but you can also have a date picker inline (using KeyboardDatePicker).

    Here you can find all the date picker versions provided by MaterialUI.

    I know, it's a little bit tricky the first time (how many stuff I have to do for a simple date picker!!!) but the result is graphically more beautiful.

    Here a codesandbox example of DatePicker.