I am trying to limit the user to be able to choose from a very small range of dates using react day picker. All other dates before and after should be disabled to prevent them from being selected. Below is my DateRange component with props which passes the values as strings such as 2022-07-15. The method I have attempted was taken from some previous questions on here, perhaps I am implementing it wrong?
const DateRange = (props) => {
return (
<DayPicker
mode="single"
disabledDays={{ before: new Date(props.startdate), after: new Date(props.enddate) }}
/>
);
};
However no dates get visually disabled (greyed out) and the user can still select any date. Any help as to how to correct this would be much appreciated!
I made a sandbox, is this what you expect?
export default function App() {
function _DayPicker({ before, after }) {
const afterMatcher: DateAfter = { after };
const beforeMatcher: DateBefore = { before };
const disabledDays = [afterMatcher, beforeMatcher];
return (
<DayPicker
defaultMonth={new Date(2022, 5, 10)}
disabled={disabledDays}
mode="single"
/>
);
}
return (
<_DayPicker before={new Date(2022, 5, 10)} after={new Date(2022, 5, 28)} />
);
}