<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
fullWidth
value={dob}
label="Date of Birth"
format="dd / MM / yyyy"
margin="normal"
maxDate={new Date()}
InputProps={{ className: css.datepicker }}
></DatePicker>
</MuiPickersUtilsProvider>
.datepicker {
margin: 2px 0px 2px 0px;
height: 60px;
width: fit-content;
padding: 20px 15px 10px;
border-bottom: 2px solid $lightGrey;
background-color: #fff;
color: #2c2c2c;
width: 300px;
font-weight: 600;
}
Is it possible to style the Material UI date picker in my expected way of look as the image attached?
You just need to set property valueDefault={null} and the DatePicker will be blank.
You can set the value property as null and it will clear it.
Date pickers use a dialog window or an inline popover to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
After creating the React application, install the Material UI package by executing the below NPM command For using the Datepicker component, we also need to install the Material UI Pickers package Install the date-io package to perform various basic date operations Note: For material-ui-pickers v3 use v1.x version of @date-io adapters.
Using Datepicker Material UI Components There are a number of UI components provided by Material UI package modules. To use a component we first import it in the React Component. It can be a functional or class component.
Also, we need to import the DateFnsUtils used by MuiPickersUtilsProvider component as a utility method provider. Run the application by hitting $ npm start to see a default MaterialUI Datepicker. By default, it creates a popover varient type The variant property is used to change the style of the Datepicker.
defaultValue property of react-date-picker was not taking the value as an moment object rather it worked when passed as string only. Show activity on this post. Thanks for contributing an answer to Stack Overflow!
see demo in codesandbox here
code
function App() {
const [dob, setDob] = useState(null); //<--- pass initial value as null
const handleDateChange = date => {
setDob(date);
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
fullWidth
onChange={handleDateChange}
value={dob}
label="Date of Birth"
format="dd / MM / yyyy"
margin="normal"
maxDate={new Date()}
emptyLabel="custom label" //<--- custom placeholder when date is null
// InputProps={{ className: css.datepicker }}
/>
</MuiPickersUtilsProvider>
);
}
Edit: answering follow-up qns based on comment.
dob
has a valuelabel={dob && "Date of Birth"}
makeStyles
and InputProps
const useStyles = makeStyles(theme => ({
datepicker: {
margin: "2px 0px 2px 0px",
height: "60px",
// width: 'fit-content',
padding: "20px 15px 10px",
borderBottom: "2px solid blue",
backgroundColor: "#fff",
color: "#2c2c2c",
width: 300,
fontWeight: 600
}
}));
function App() {
const [dob, setDob] = useState(null); //<--- pass initial value as null
const classes = useStyles();
const handleDateChange = date => {
setDob(date);
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
fullWidth
onChange={handleDateChange}
value={dob}
label={dob && "Date of Birth"}
format="dd / MM / yyyy"
margin="normal"
maxDate={new Date()}
emptyLabel="custom label" //<--- custom placeholder when date is null
InputProps={{ className: !dob ? classes.datepicker : null }} //<----apply style when no date selected
/>
</MuiPickersUtilsProvider>
);
}
The codesandbox demo has been updated to reflect all the points above.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With