How do I combine disabled days using react-day-picker-input

Question

I am using the NPM package react-day-picker and there seems to be minimal documentation on the react-day-picker-input element. It mentions a prop called dayPickerProps which takes an object called disabledDays. I can't figure out how to disable weekends and specific days combined. I got it to disable weekends and the days individually but when combined only the first is taken. The documentation discusses how to implement this for the regular day picker but not the day picker input component which takes different props. Does anyone familiar with this package know how I can accomplish this task?

Heres my Fiddle

Notice how removing the before key enables the daysOfWeek key to work. Any help is appreciated thanks.

score 13 · Accepted Answer · answered Aug 09 '18 at 00:28

Try this instead

dayPickerProps={{
      modifiers: {
        disabled: [
          {
            daysOfWeek: [0, 6]
          },
          {
            before: new Date(2018, 7, 8)
          }
        ]
      }
    }}

https://codesandbox.io/s/537qkxy4wn

score 1 · Answer 2 · answered Jun 27 '20 at 23:18

1

If you only use DayPicker, you can just pass modifiers as props like this

<DayPicker
  modifiers={{
    disabled: [
      {
        daysOfWeek: [0, 6]
      },
      {
        before: today
      }
    ]
  }}
/>

answered Jun 27 '20 at 23:18

Najib TAHAR-BERRABAH

71
1
1
5

How do I combine disabled days using react-day-picker-input

2 Answers2