javascript - Style Material UI InputBase with Date & Time pickers - Stack Overflow

admin管理员组

文章数量:1389762

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 ponent 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 ponent looks like this:

<Paper ponent="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 ponent:

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.

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 ponent 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 ponent looks like this:

<Paper ponent="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 ponent:

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.

• javascript
• reactjs
• material-ui
• material-design
• mui-x-date-picker

Share Improve this question Follow edited Mar 28 at 10:37 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Aug 20, 2020 at 17:17 DanfDanf 1,56933 gold badges2424 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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);
}

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:

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.

本文标签： javascriptStyle Material UI InputBase with Date amp Time pickersStack Overflow