Disabling Dates

Use the disabled prop to prevent specific dates from being selected in any mode.

Matchers Types

The prop accepts a Matcher or an array of matchers to specify which dates should be disabled.

Matcher Type	Description
boolean	Disable all dates.
Date	Matches a specific date.
Date[]	Matches any date in the array of dates.
DateRange	Matches a range of dates, including the start and end dates.
DateBefore	Matches all dates before a specific date (exclusive).
DateAfter	Matches all dates after a specific date (exclusive).
DateInterval	Matches dates between two dates (exclusive of the start and end dates).
DayOfWeek	Matches specific days of the week (e.g., Sunday is 0, Saturday is 6).
(date: Date) => boolean	A function that returns true if the given date matches the condition.
Matcher[]	An array of the matchers listed above.

// Disable all dates
<DayPicker disabled />

// Disable a specific date
<DayPicker disabled={new Date(2023, 9, 1)} />

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

// Disable a range of dates
<DayPicker disabled={{ from: new Date(2023, 9, 1), to: new Date(2023, 9, 5) }} />

// Disable specific days of the week
<DayPicker disabled={{ dayOfWeek: [0, 6] }} /> // disable weekends

// Disable dates before a specific date
<DayPicker disabled={{ before: new Date(2023, 9, 1) }} />

// Disable dates after a specific date
<DayPicker disabled={{ after: new Date(2023, 9, 5) }} />

// Disable dates between two dates
<DayPicker disabled={{ before: new Date(2023, 9, 1), after: new Date(2023, 9, 5) }} />

Disabling Weekends

Use the dayOfWeek matcher, where 0 is Sunday and 6 is Saturday.

<DayPicker disabled={{ dayOfWeek: [0, 6] }} />

Disabling Dates in the Past

Use the before matcher to disable all dates before today.

<DayPicker mode="single" disabled={{ before: new Date() }} />

Excluding Disabled Dates from Range

In range mode, disabled dates are included in the selected range by default. To exclude disabled dates from the range, use the excludeDisabled prop. If a disabled date is selected, the range will reset.

<DayPicker
  mode="range"
  // Disable weekends
  disabled={{ dayOfWeek: [0, 6] }}
  // Reset range when a disabled date is included
  excludeDisabled
/>