feat: add excludeDisabled prop for range mode (#2290)

* feat: add excludeDisabled for range mode

* Update test

CHANGELOG.md

@@ -20,7 +20,7 @@ npm install react-day-picker@latest
 - Added support for [UTC dates](https://daypicker.dev/docs/localization#utc-dates) and [Jalali Calendar](https://daypicker.dev/docs/localization#jalali-calendar).
 - [Enhanced accessibility](https://daypicker.dev/docs/accessibility) to better comply with [WCAG 2.1](https://www.w3.org/TR/WCAG21/) recommendations.
 - [Simplified styles](https://daypicker.dev/docs/styling) and new CSS variables for easier customization.
-- Improved selection logic for [range mode](https://daypicker.dev/docs/selection-modes).
+- New `excludeDisabled` prop for [range mode](https://daypicker.dev/docs/selection-modes#exclude-disabled).
 - New `dropdown-years` and `dropdown-months` caption layouts.
 - New `hideWeekdayRow` and `hideNavigation` props.
 - Updated for a complete [custom components](https://daypicker.dev/guides/custom-components) support.

examples/ModifiersDisabled.test.tsx

@@ -5,13 +5,20 @@ import { render } from "@/test/render";
 
 import { ModifiersDisabled } from "./ModifiersDisabled";
 
+const today = new Date(2024, 6, 22);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
 const days = [
- new Date(2024, 5, 2),
- new Date(2024, 5, 9),
- new Date(2024, 5, 29)
+ new Date(2024, 6, 6),
+ new Date(2024, 6, 13),
+ new Date(2024, 6, 20),
+ new Date(2024, 6, 27)
 ];
 
 test.each(days)("the day %s should be disabled", (day) => {
  render(<ModifiersDisabled />);
+ // return all month's
  expect(dateButton(day)).toBeDisabled();
 });

examples/ModifiersDisabled.tsx

@@ -3,11 +3,5 @@ import React from "react";
 import { DayPicker } from "react-day-picker";
 
 export function ModifiersDisabled() {
- return (
- <DayPicker
- defaultMonth={new Date(2024, 5, 10)}
- mode="range"
- disabled={{ dayOfWeek: [0, 6] }}
- />
- );
+ return <DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />;
 }

examples/RangeExcludeDisabled.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function RangeExcludeDisabled() {
+ return (
+ <DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} excludeDisabled />
+ );
+}

examples/index.ts

@@ -43,6 +43,7 @@ export * from "./MultipleMonthsPaged";
 export * from "./NumberingSystem";
 export * from "./OutsideDays";
 export * from "./Range";
+export * from "./RangeExcludeDisabled";
 export * from "./RangeMinMax";
 export * from "./RangeShiftKey";
 export * from "./Rtl";

src/selection/useRange.test.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { act, renderHook } from "@/test/render";
+
+import { dateLib } from "../lib";
+
+import { useRange } from "./useRange";
+
+describe("useRange", () => {
+ test("initialize with initiallySelected date range", () => {
+ const initiallySelected = {
+ from: new Date(2023, 6, 1),
+ to: new Date(2023, 6, 5)
+ };
+ const { result } = renderHook(() =>
+ useRange(
+ { mode: "range", selected: initiallySelected, required: false },
+ dateLib
+ )
+ );
+
+ expect(result.current.selected).toEqual(initiallySelected);
+ });
+
+ test("update the selected range on select", () => {
+ const initiallySelected = {
+ from: new Date(2023, 6, 1),
+ to: new Date(2023, 6, 5)
+ };
+ const { result } = renderHook(() =>
+ useRange(
+ { mode: "range", selected: initiallySelected, required: false },
+ dateLib
+ )
+ );
+
+ act(() => {
+ result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
+ });
+
+ expect(result.current.selected).toEqual({
+ from: new Date(2023, 6, 1),
+ to: new Date(2023, 6, 10)
+ });
+ });
+
+ test("reset range if new range exceeds max days", () => {
+ const { result } = renderHook(() =>
+ useRange(
+ {
+ mode: "range",
+ selected: undefined,
+ required: false,
+ max: 5
+ },
+ dateLib
+ )
+ );
+
+ act(() => {
+ result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
+ result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
+ });
+
+ expect(result.current.selected).toEqual({
+ from: new Date(2023, 6, 10),
+ to: undefined
+ });
+ });
+
+ test("reset range if new range is less than min days", () => {
+ const { result } = renderHook(() =>
+ useRange(
+ { mode: "range", selected: undefined, required: false, min: 5 },
+ dateLib
+ )
+ );
+
+ act(() => {
+ result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
+ result.current.select?.(new Date(2023, 6, 3), {}, {} as any);
+ });
+
+ expect(result.current.selected).toEqual({
+ from: new Date(2023, 6, 3),
+ to: undefined
+ });
+ });
+
+ test("exclude disabled dates when selecting range", () => {
+ const disabled = [{ from: new Date(2023, 6, 5), to: new Date(2023, 6, 7) }];
+ const { result } = renderHook(() =>
+ useRange(
+ {
+ mode: "range",
+ selected: undefined,
+ required: false,
+ excludeDisabled: true,
+ disabled
+ },
+ dateLib
+ )
+ );
+
+ act(() => {
+ result.current.select?.(new Date(2023, 6, 1), {}, {} as any);
+ result.current.select?.(new Date(2023, 6, 10), {}, {} as any);
+ });
+
+ expect(result.current.selected).toEqual({
+ from: new Date(2023, 6, 10),
+ to: undefined
+ });
+ });
+});

src/selection/useRange.tsx

@@ -18,6 +18,7 @@ export function useRange<T extends DayPickerProps>(
  const {
  mode,
  disabled,
+ excludeDisabled,
  selected: initiallySelected,
  required,
  onSelect
@@ -74,7 +75,11 @@ export function useRange<T extends DayPickerProps>(
  let newDate = newRange.from;
  while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
  newDate = dateLib.addDays(newDate, 1);
- if (disabled && dateMatchModifiers(newDate, disabled, dateLib)) {
+ if (
+ excludeDisabled &&
+ disabled &&
+ dateMatchModifiers(newDate, disabled, dateLib)
+ ) {
  newRange.from = triggerDate;
  newRange.to = undefined;
  break;

src/types/props.ts

@@ -546,6 +546,12 @@ export interface PropsRangeRequired {
  mode: "range";
  required: true;
  disabled?: Matcher | Matcher[] | undefined;
+ /**
+ * When `true`, the range will reset when including a disabled day.
+ *
+ * @since V9.0.2
+ */
+ excludeDisabled?: boolean | undefined;
  /** The selected range. */
  selected: DateRange;
  /** Event handler when a range is selected. */
@@ -569,6 +575,12 @@ export interface PropsRange {
  mode: "range";
  required?: false | undefined;
  disabled?: Matcher | Matcher[] | undefined;
+ /**
+ * When `true`, the range will reset when including a disabled day.
+ *
+ * @since V9.0.2
+ */
+ excludeDisabled?: boolean | undefined;
  /** The selected range. */
  selected?: DateRange | undefined;
  /** Event handler when the selection changes. */

test/render.tsx

@@ -1 +1,7 @@
-export { screen, act, within, render } from "@testing-library/react";
+export {
+ screen,
+ act,
+ within,
+ render,
+ renderHook
+} from "@testing-library/react";

website/docs/docs/selection-modes.mdx

@@ -194,17 +194,38 @@ export function RangeMinMax() {
 
 ## Disabling Dates
 
-To disable specific days, use the `disabled` prop. The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers that can be used to make some days not selectable.
+To disable specific days, use the `disabled` prop. Disabled dates cannot be selected.
+
+The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers that can be used to make some days not selectable.
+
+```tsx
+// disable today
+<DayPicker mode="single" disabled={ new Date() } />
+
+// disable weekends
+<DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
+```
+
+<BrowserWindow>
+ <Examples.ModifiersDisabled />
+</BrowserWindow>
+
+### Excluding Disabled Dates from Range {#exclude-disabled}
+
+When using the `range` mode, disabled dates will be included in the selected range. Use the `excludeDisabled` prop to prevent this behavior. The range will reset when a disabled date is included.
 
 ```tsx
 <DayPicker
  mode="range"
- disabled={{ dayOfWeek: [0, 6] }} // Disable including Sundays and Saturdays in range
+ // Disable weekends
+ disabled={{ dayOfWeek: [0, 6] }}
+ // Reset range when a disabled date is included
+ excludeDisabled
 />
 ```
 
 <BrowserWindow>
- <Examples.ModifiersDisabled />
+ <Examples.RangeExcludeDisabled />
 </BrowserWindow>
 
 ## Customizing Selections