Skip to content

disabling-dates.mdx

Latest commit

 

History

History
92 lines (67 loc) · 3.86 KB

disabling-dates.mdx

File metadata and controls

92 lines (67 loc) · 3.86 KB
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 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 {#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.

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