KeyboardDatePicker grayout days - reactjs

Question

So I have this KeyboardDatePicker and I want to gray out past days and some feature days that. those grayed should not be clickable.
here how my looks now
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="dd/MM/yyyy"
margin="normal"
id="date-picker-inline"
label="Select Date"
value={this.state.selectedDate}
onChange={(e) => {this.getTimeSchedule(e); this.handleChangeDate(e)}}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
autoOk={true}
/>
</MuiPickersUtilsProvider>
I read few explanation on the internet on how it can be done here enter link description here
it should look like this
renderDay={(day, selectedDate, dayInCurrentMonth, dayComponent) => {
if (isHoliday) {
return 'Special component';
} else {
return dayComponent;
}
}}
however I am confused on how to make "Special component"

Answer 1

You don't have to use a custom renderer, you can use the following KeyboardDatePicker props:
disablePast will disable the past dates
shouldDisableDate will allow you to use your own rule to disable dates
In the following example I disable all the past dates (with disablePast) and all the sundays (with shouldDisableDate):
function disableSundays(date) {
if (date.getDay() == 0) return true;
}
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="dd/MM/yyyy"
margin="normal"
id="date-picker-inline"
label="Select Date"
value={this.state.selectedDate}
onChange={(e) => {this.getTimeSchedule(e); this.handleChangeDate(e)}}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
autoOk={true}
disablePast={true}
shouldDisableDate={disableSundays}
/>
</MuiPickersUtilsProvider>
);