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