Style Material UI InputBase with Date & Time pickers

1

votes

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:

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.

javascriptreactjsmaterial-uimaterial-design

3

votes

Fortunately, you CAN change the icon.

It's a platform native element, so you need to reference the underlying tag.

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

0

votes

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?

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

Installed this libraries you can do something like that:

Define a Theme:

const Theme = {
  palette: {
    primary: {  // primary color
    contrastText: "#FFFFFF",
    dark: "#000000",  
    main: "#000000",  // black
    light: "#000000"
  }
}
};

Create a Mui theme:
```
const theme = createMuiTheme(Theme);
```

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}
   />

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:

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.

Style Material UI InputBase with Date & Time pickers

2 Answers