Multiple disabled dates

[poseimus]

Hi, I couldn't find way to disable spesific dates, could be like

disabled={{ dates:["2025-04-20","2025-04-23","2025-04-24"] }}

is it possible? am I missing something or I can only give from - to props to achieve that but my disabled dates are not in sort can be multiple and can be in different month/year too

[surenachiron]

hi @poseimus.

As far as I know, the built-in disabled modifier does not currently support an array of specific dates out of the box like you mentioned.

However, you can achieve the same behavior using custom modifiers, similar to how the booked days example works. Here's how you could implement it:

const disabledDates = [
  new Date(2025, 3, 20),
  new Date(2025, 3, 23),
  new Date(2025, 3, 24),
];

export function DisabledDatesExample() {
  return (
    <DayPicker
      defaultMonth={disabledDates[0]}
      modifiers={{ disabled: disabledDates }}
      modifiersClassNames={{
        disabled: "pointer-events-none opacity-50", // optional styling
      }}
    />
  );
}

This way, you can disable arbitrary dates, even if they’re not in order or span multiple months/years.

[gpbl]

It is actually possible to use an array of dates to disable:

// Disable an array of dates
<DayPicker disabled={[new Date(2023, 9, 1), new Date(2023, 9, 2)]} />

I understand this was not clear enough from the docs, so I've updated them to be more explicit:

https://daypicker.dev/docs/selection-modes#disabled