I am using material-ui v0.20.0 for React js This is my DatePicker component
<Field
name='appointmentDate'
label="Select Date"
component={this.renderDatePicker}
/>
renderDatePicker = ({ input, label, meta: { touched, error }, ...custom,props }) => {
return (
<DatePicker
{...input}
{...custom}
autoOk={true}
floatingLabelText={label}
dateForm='MM/DD/YYYY'
shouldDisableDate={this.disabledDate}
minDate={ new Date()}
value={ input.value !== '' ? input.value : null }
onChange={(event, value) => input.onChange(value)}
/>
);
};
What should I write in disabledDate(){...} if I want to disable any of the day/s ?
Here is the sample code that needed to be added. You can refer this link for more details - https://material-ui.com/components/pickers/#date-time-pickers
You can add condition according to your need in order to disable date.
import React from 'react';
import DatePicker from 'material-ui/DatePicker';
function disableWeekends(date) {
return date.getDay() === 0 || date.getDay() === 6;
}
function disableRandomDates() {
return Math.random() > 0.7;
}
/**
* `DatePicker` can disable specific dates based on the return value of a callback.
*/
const DatePickerExampleDisableDates = () => (
<div>
<DatePicker hintText="Weekends Disabled" shouldDisableDate={disableWeekends} />
<DatePicker hintText="Random Dates Disabled" shouldDisableDate={disableRandomDates} />
</div>
);
export default DatePickerExampleDisableDates;