website/docs/selections/disabling-dates.mdx

---
sidebar_position: 5
---

# Disabling Dates {#disabled}

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

## Matchers Types

The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) 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`](../api/type-aliases/DateRange.md)       | Matches a range of dates, including the start and end dates.              |
| [`DateBefore`](../api/type-aliases/DateBefore.md)     | Matches all dates before a specific date (exclusive).                     |
| [`DateAfter`](../api/type-aliases/DateAfter.md)       | Matches all dates after a specific date (exclusive).                      |
| [`DateInterval`](../api/type-aliases/DateInterval.md) | Matches dates between two dates (exclusive of the start and end dates).   |
| [`DayOfWeek`](../api/type-aliases/DayOfWeek.md)       | 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[]`](../api/type-aliases/Matcher.md)         | An array of the matchers listed above.                                    |

```tsx
// 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.

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

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/ModifiersDisabled.tsx">
  <Examples.ModifiersDisabled />
</BrowserWindow>

## Disabling Dates in the Past

Use the `before` matcher to disable all dates before today.

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

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/PastDatesDisabled.tsx">
  <Examples.PastDatesDisabled />
</BrowserWindow>

## Excluding Disabled Dates from Range {#exclude-disabled}

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.

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

<BrowserWindow sourceUrl="https://github.com/gpbl/react-day-picker/blob/main/examples/RangeExcludeDisabled.tsx">
  <Examples.RangeExcludeDisabled />
</BrowserWindow>