I have Laravel app that returns a json response of dates and days of the week that should be disabled in the datepicker
For example this is my datesOff constant when I console.log() it ['2022-05-08', '2022-05-11', '2022-05-19']
And This is daysOff constant when I console.log() it [3, 6]
So how do I disable both returned dates and days(wednesday and sunday in this case)
useEffect(() => {
axios.get(bookingUrl).then((response) => {
setDaysOff(response.data.daysOff);
setDatesOff(response.data.datesOff);
setBooked(response.data.booked);
})
}, []);
<LocalizationProvider locale={hr} dateAdapter={AdapterDateFns}>
<DatePicker
label="Date"
disablePast={true}
minDate={minDate}
maxDate={maxDate}
value={date}
shouldDisableDate={//What do i to here
}
onChange={(newDate) => {
setDate(newDate);
}}
renderInput={(params) => <TextField {...params} />}
DatePicker has renderDay prop which we can use to customize the day cells of the calendar. It takes 3 arguments, the first one is the Date object, which we can use to compare with the array of dates that should be disabled:
const dates = ["2022-05-08", "2022-05-11", "2022-05-19"];
const customDayRenderer = (
date: Date,
selectedDates: Array<Date | null>,
pickersDayProps: PickersDayProps<Date>
) => {
const stringifiedDate = date.toISOString().slice(0, 10);
if (dates.includes(stringifiedDate)) {
return <PickersDay {...pickersDayProps} disabled />;
}
return <PickersDay {...pickersDayProps} />;
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
renderDay={customDayRenderer}
/>
</LocalizationProvider>
);