Disable all days before and after given dates

Question

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!

Replace `disabledDays={{ ... }}` with the props like, `dayPickerProps={{ disabledDays: { before: new Date(props.startdate), after: new Date(props.enddate) } }}` — Maniraj Murugan, Jul 15 '22 at 08:48
@ManirajMurugan thank for the response, this doesn't seem to have changed anything though :( — Alex Morrison, Jul 15 '22 at 08:54
maybe you can add a minimal working project on codesandbox.io. It's easier and faster to reproduce the issue and therefore to help you. — m_wer, Jul 15 '22 at 08:59
@AlexMorrison, I think you need to do something like this https://codesandbox.io/s/smoosh-dust-ejv4o1?file=/src/DatePicker.tsx . Here you need to split year, month and date separately and assign from and to and then pass down as props.. Refer the docs here: https://react-day-picker.js.org/basics/modifiers#disabling-days — Maniraj Murugan, Jul 15 '22 at 09:12
@m_wer just created one here https://codesandbox.io/s/kind-parm-xvpj0p?file=/src/App.js — Alex Morrison, Jul 15 '22 at 09:14
@ManirajMurugan thank you for that, I can see the greyed out disabled days works. However the 'from' and 'to' properties will make it difficult as I need to disable everything before and after certain dates — Alex Morrison, Jul 15 '22 at 09:21

score 1 · Accepted Answer · answered Jul 15 '22 at 09:37

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)} />
  );
}

Disable all days before and after given dates

1 Answers1