So I would expect that the relative elements onClick
handler would be disabled when providing some dates as disabledDays
prop. It seems to me that the react-day-picker
only changes the css of the elements. That seems obscure to me, so I suspect there is something wrong with my implementation.
Reading https://react-day-picker.js.org/examples/disabled/ seems to confirm that it is only styled with CSS. How would I achieve conditional disabling specific dates, would it be done in the onDayClick
? That seems like an inappropriate solution.
import React, { useState } from "react";
import "./styles.css";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
export default () => {
const [date, setDate] = useState(undefined);
let disabledDays = [
new Date("2020/09/12"),
new Date("2020/09/13"),
new Date("2020/09/16")
];
const modifiers = {
"specific-disabled": [...disabledDays]
};
disabledDays.push({ before: new Date() });
const disabledStyle = `.DayPicker-Day--specific-disabled {
color: white;
background-color: #FFCCCB;
cursor: default;
}`;
const onDayClick = (day, { selected }) => {
let date = selected ? undefined : day;
console.log(`clicked on ${date}`);
setStartDate(date);
};
return (
<div>
<style>{disabledStyle}</style>
<DayPicker
modifiers={modifiers}
showWeekNumbers
selectedDays={date}
onDayClick={onDayClick}
disabledDays={disabledDays}
/>
</div>
);
};
As per react-day-picker documentation, it won't disabled the click event. But actually you can achieve the "disabled" behavior using pointer-events: none; More info is here: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
const disabledStyle = `.DayPicker-Day--specific-disabled {
color: white;
background-color: #FFCCCB;
cursor: default;
pointer-events: none;//this will disable mouse event
}`;