Repository: gpbl/react-day-picker
Pull request #2197 (2024-06-08 10:10:04)

feat: remove fromDate, toDate props

github-actions[bot]: ## Pull request title linting :rotating_light:

In order to merge this pull request, the title of the pull request should be prefixed by one of the available types.

### Available types:

- **feat**: A new feature
- **fix**: A bug fix
- **docs**: Documentation only changes
- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **perf**: A code change that improves performance
- **test**: Adding missing tests or correcting existing tests
- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
- **chore**: Other changes that don't modify src or test files
- **revert**: Reverts a previous commit

---

<details>
<summary>Examples</summary>

```
feat(grpc): add new endpoint
refactor: combine class A and class B
ci: update pull request linter
style: change format of strings
```

</details>

:tipping_hand_person: For more examples, visit https://www.conventionalcommits.org/en/v1.0.0/#examples.

Patch:
diff --git a/examples/FromToMonth.tsx b/examples/FromToMonth.tsx
index 68705ead9..4c0b2825e 100644
--- a/examples/FromToMonth.tsx
+++ b/examples/FromToMonth.tsx
@@ -8,7 +8,7 @@ export function FromToMonth() {
     <DayPicker
       defaultMonth={defaultMonth}
       fromMonth={defaultMonth}
-      toDate={new Date(2015, 10, 20)}
+      toMonth={new Date(2015, 10, 20)}
     />
   );
 }
diff --git a/src/contexts/calendar.tsx b/src/contexts/calendar.tsx
index 9bc7392b1..8d94f452c 100644
--- a/src/contexts/calendar.tsx
+++ b/src/contexts/calendar.tsx
@@ -112,7 +112,7 @@ export function CalendarProvider(providerProps: { children?: ReactNode }) {
   const lastMonth = displayMonths[displayMonths.length - 1];
 
   /** An array of the dates displayed in the calendar. */
-  const dates = getDates(displayMonths, props.toDate, props);
+  const dates = getDates(displayMonths, props.toMonth, props);
 
   /** An array of the Months displayed in the calendar. */
   const months = getMonths(displayMonths, dates, props);
@@ -139,13 +139,13 @@ export function CalendarProvider(providerProps: { children?: ReactNode }) {
       return;
     }
     let newMonth = startOfMonth(date);
-    // if month is before fromDate, use the first month instead
-    if (props.fromDate && newMonth < startOfMonth(props.fromDate)) {
-      newMonth = startOfMonth(props.fromDate);
+    // if month is before fromMonth, use the first month instead
+    if (props.fromMonth && newMonth < startOfMonth(props.fromMonth)) {
+      newMonth = startOfMonth(props.fromMonth);
     }
-    // if month is after toDate, use the last month instead
-    if (props.toDate && newMonth > startOfMonth(props.toDate)) {
-      newMonth = startOfMonth(props.toDate);
+    // if month is after toMonth, use the last month instead
+    if (props.toMonth && newMonth > startOfMonth(props.toMonth)) {
+      newMonth = startOfMonth(props.toMonth);
     }
     setFirstMonth(newMonth);
     props.onMonthChange?.(newMonth);
diff --git a/src/contexts/props.tsx b/src/contexts/props.tsx
index d8f57fd07..6c5d45320 100644
--- a/src/contexts/props.tsx
+++ b/src/contexts/props.tsx
@@ -8,7 +8,7 @@ import React, {
 import { getDataAttributes } from "../helpers/getDataAttributes";
 import { getDefaultClassNames } from "../helpers/getDefaultClassNames";
 import { getFormatters } from "../helpers/getFormatters";
-import { getFromToDate } from "../helpers/getFromToDate";
+import { getStartEndMonths } from "../helpers/getStartEndMonths";
 import * as defaultLabels from "../labels";
 import type {
   ClassNames,
@@ -40,7 +40,7 @@ export interface PropsContext<
   /** The `data-*` attributes passed to `<DayPicker />`. */
   dataAttributes: DataAttributes;
   formatters: Formatters;
-  fromDate: Date | undefined;
+  fromMonth: Date | undefined;
   id: string;
   labels: Labels;
   max: number | undefined;
@@ -48,7 +48,7 @@ export interface PropsContext<
   mode: T;
   numberOfMonths: number;
   required: boolean;
-  toDate: Date | undefined;
+  toMonth: Date | undefined;
   today: Date;
   /** The currently selected value. */
   selected: Selected<Mode, R> | undefined;
@@ -72,14 +72,14 @@ export const PropsProvider = <T extends Mode, R extends boolean>(
   const reactId = useId();
   const { children, ...restProps } = props;
 
-  const { fromDate, toDate } = getFromToDate(props);
+  const { fromMonth, toMonth } = getStartEndMonths(props);
 
   const context = {
     ...restProps,
     classNames: { ...getDefaultClassNames(), ...restProps.classNames },
     dataAttributes: getDataAttributes(props),
     formatters: getFormatters(props.formatters),
-    fromDate,
+    fromMonth,
     id: props.id ?? reactId,
     labels: { ...defaultLabels, ...restProps.labels },
     required: "required" in props ? props.required ?? false : false,
@@ -88,7 +88,7 @@ export const PropsProvider = <T extends Mode, R extends boolean>(
     mode: props.mode ?? ("default" as Mode),
     numberOfMonths: props.numberOfMonths ?? 1,
     today: props.today ?? new Date(),
-    toDate,
+    toMonth,
     selected: "selected" in props ? props.selected : undefined,
     defaultSelected:
       "defaultSelected" in props ? props.defaultSelected : undefined,
diff --git a/src/helpers/calculateMonthWeeks.ts b/src/helpers/calculateMonthWeeks.ts
index 8e81cd345..d3756354b 100644
--- a/src/helpers/calculateMonthWeeks.ts
+++ b/src/helpers/calculateMonthWeeks.ts
@@ -14,8 +14,8 @@ import { MonthWeek } from "./getMonthWeeks";
 
 /** Return the weeks between two dates. */
 export function calculateMonthWeeks(
-  fromDate: Date,
-  toDate: Date,
+  startDate: Date,
+  endDate: Date,
   options?: {
     ISOWeek?: boolean;
     locale?: Locale;
@@ -24,11 +24,11 @@ export function calculateMonthWeeks(
   }
 ): MonthWeek[] {
   const toWeek = options?.ISOWeek
-    ? endOfISOWeek(toDate)
-    : endOfWeek(toDate, options);
+    ? endOfISOWeek(endDate)
+    : endOfWeek(endDate, options);
   const fromWeek = options?.ISOWeek
-    ? startOfISOWeek(fromDate)
-    : startOfWeek(fromDate, options);
+    ? startOfISOWeek(startDate)
+    : startOfWeek(startDate, options);
 
   const nOfDays = differenceInCalendarDays(toWeek, fromWeek);
   const days: Date[] = [];
diff --git a/src/helpers/getDropdownMonths.ts b/src/helpers/getDropdownMonths.ts
index 1303c8bd4..2e5d07291 100644
--- a/src/helpers/getDropdownMonths.ts
+++ b/src/helpers/getDropdownMonths.ts
@@ -9,15 +9,18 @@ import { Formatters, Mode } from "../types";
 
 /** Return the months to show in the dropdown. */
 export function getDropdownMonths(
-  props: Pick<PropsContext<Mode, boolean>, "fromDate" | "toDate" | "locale"> & {
+  props: Pick<
+    PropsContext<Mode, boolean>,
+    "fromMonth" | "toMonth" | "locale"
+  > & {
     formatters: Pick<Formatters, "formatMonthDropdown">;
   },
   year?: number | undefined
 ): DropdownOption[] | undefined {
-  if (!props.fromDate) return undefined;
-  if (!props.toDate) return undefined;
-  const navStartMonth = startOfMonth(props.fromDate);
-  const navEndMonth = startOfMonth(props.toDate);
+  if (!props.fromMonth) return undefined;
+  if (!props.toMonth) return undefined;
+  const navStartMonth = startOfMonth(props.fromMonth);
+  const navEndMonth = startOfMonth(props.toMonth);
 
   const months: number[] = [];
   let month = navStartMonth;
@@ -35,11 +38,11 @@ export function getDropdownMonths(
     );
     const disabled =
       (year &&
-        props.fromDate &&
-        new Date(year, value) < startOfMonth(props.fromDate)) ||
+        props.fromMonth &&
+        new Date(year, value) < startOfMonth(props.fromMonth)) ||
       (year &&
-        props.toDate &&
-        new Date(year, value) > startOfMonth(props.toDate)) ||
+        props.toMonth &&
+        new Date(year, value) > startOfMonth(props.toMonth)) ||
       false;
     return { value, label, disabled };
   });
diff --git a/src/helpers/getDropdownYears.ts b/src/helpers/getDropdownYears.ts
index f3e08a197..fc61cb0a3 100644
--- a/src/helpers/getDropdownYears.ts
+++ b/src/helpers/getDropdownYears.ts
@@ -11,15 +11,15 @@ import type { Formatters, Mode } from "../types";
 
 /** Return the years to show in the dropdown. */
 export function getDropdownYears(
-  props: Pick<PropsContext<Mode>, "fromDate" | "toDate"> & {
+  props: Pick<PropsContext<Mode>, "fromMonth" | "toMonth"> & {
     formatters: Pick<Formatters, "formatYearDropdown">;
   },
   month?: number | undefined
 ): DropdownOption[] | undefined {
-  if (!props.fromDate) return undefined;
-  if (!props.toDate) return undefined;
-  const firstNavYear = startOfYear(props.fromDate);
-  const lastNavYear = endOfYear(props.toDate);
+  if (!props.fromMonth) return undefined;
+  if (!props.toMonth) return undefined;
+  const firstNavYear = startOfYear(props.fromMonth);
+  const lastNavYear = endOfYear(props.toMonth);
   const years: number[] = [];
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
@@ -29,11 +29,11 @@ export function getDropdownYears(
   return years.map((value) => {
     const disabled =
       (month &&
-        props.fromDate &&
-        new Date(value, month) < startOfMonth(props.fromDate)) ||
+        props.fromMonth &&
+        new Date(value, month) < startOfMonth(props.fromMonth)) ||
       (month &&
-        props.toDate &&
-        new Date(value, month) > startOfMonth(props.toDate)) ||
+        props.toMonth &&
+        new Date(value, month) > startOfMonth(props.toMonth)) ||
       false;
     const label = props.formatters.formatYearDropdown(value);
     return {
diff --git a/src/helpers/getFirstLastMonths.ts b/src/helpers/getFirstLastMonths.ts
index 2d08d0e23..869567641 100644
--- a/src/helpers/getFirstLastMonths.ts
+++ b/src/helpers/getFirstLastMonths.ts
@@ -4,7 +4,7 @@ import { startOfMonth } from "date-fns/startOfMonth";
 
 import { PropsBase } from "../types";
 
-import { getFromToDate } from "./getFromToDate";
+import { getStartEndMonths } from "./getStartEndMonths";
 
 /**
  * Return the first and, if the navigation is constrained, last months according
@@ -17,8 +17,6 @@ export function getFirstLastMonths(
       PropsBase,
       | "fromYear"
       | "toYear"
-      | "fromDate"
-      | "toDate"
       | "fromMonth"
       | "toMonth"
       | "month"
@@ -30,16 +28,16 @@ export function getFirstLastMonths(
 ): [firstMonth: Date, lastMonth?: Date] {
   const { month, defaultMonth, today, numberOfMonths = 1 } = props;
   let initialMonth = month || defaultMonth || today || new Date();
-  const { fromDate, toDate } = getFromToDate(props);
+  const { fromMonth, toMonth } = getStartEndMonths(props);
 
   // Fix the initialMonth if is after the to-date
-  if (toDate && differenceInCalendarMonths(toDate, initialMonth) < 0) {
+  if (toMonth && differenceInCalendarMonths(toMonth, initialMonth) < 0) {
     const offset = -1 * (numberOfMonths - 1);
-    initialMonth = addMonths(toDate, offset);
+    initialMonth = addMonths(toMonth, offset);
   }
   // Fix the initialMonth if is before the from-date
-  if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
-    initialMonth = fromDate;
+  if (fromMonth && differenceInCalendarMonths(initialMonth, fromMonth) < 0) {
+    initialMonth = fromMonth;
   }
-  return [startOfMonth(initialMonth), toDate];
+  return [startOfMonth(initialMonth), toMonth];
 }
diff --git a/src/helpers/getFromToDate.ts b/src/helpers/getFromToDate.ts
deleted file mode 100644
index 71feeb769..000000000
--- a/src/helpers/getFromToDate.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { addYears } from "date-fns/addYears";
-import { endOfMonth } from "date-fns/endOfMonth";
-import { endOfYear } from "date-fns/endOfYear";
-import { startOfDay } from "date-fns/startOfDay";
-import { startOfMonth } from "date-fns/startOfMonth";
-import { startOfYear } from "date-fns/startOfYear";
-
-import type { DayPickerProps, Mode } from "../types";
-
-/**
- * Return the `fromDate` and `toDate` prop values values parsing the DayPicker
- * props.
- */
-export function getFromToDate(
-  props: Pick<
-    DayPickerProps<Mode, boolean>,
-    | "fromYear"
-    | "toYear"
-    | "fromDate"
-    | "toDate"
-    | "fromMonth"
-    | "toMonth"
-    | "today"
-    | "captionLayout"
-  >
-): Pick<DayPickerProps<Mode, boolean>, "fromDate" | "toDate"> {
-  const { fromYear, toYear, fromMonth, toMonth } = props;
-  let { fromDate, toDate } = props;
-  const hasDropdowns = props.captionLayout?.startsWith("dropdown");
-  if (fromMonth) {
-    fromDate = startOfMonth(fromMonth);
-  } else if (fromYear) {
-    fromDate = new Date(fromYear, 0, 1);
-  } else if (!fromDate && hasDropdowns) {
-    fromDate = startOfYear(addYears(props.today ?? new Date(), -100));
-  }
-  if (toMonth) {
-    toDate = endOfMonth(toMonth);
-  } else if (toYear) {
-    toDate = new Date(toYear, 11, 31);
-  } else if (!toDate && hasDropdowns) {
-    toDate = endOfYear(props.today ?? new Date());
-  }
-  return {
-    fromDate: fromDate ? startOfDay(fromDate) : undefined,
-    toDate: toDate ? startOfDay(toDate) : undefined
-  };
-}
diff --git a/src/helpers/getInitialMonth.ts b/src/helpers/getInitialMonth.ts
index e4befa598..c4b07a93c 100644
--- a/src/helpers/getInitialMonth.ts
+++ b/src/helpers/getInitialMonth.ts
@@ -10,16 +10,16 @@ export function getInitialMonth(
   const { month, defaultMonth, today } = context;
   let initialMonth = month || defaultMonth || today || new Date();
 
-  const { toDate, fromDate, numberOfMonths = 1 } = context;
+  const { toMonth, fromMonth, numberOfMonths = 1 } = context;
 
   // Fix the initialMonth if is after the to-date
-  if (toDate && differenceInCalendarMonths(toDate, initialMonth) < 0) {
+  if (toMonth && differenceInCalendarMonths(toMonth, initialMonth) < 0) {
     const offset = -1 * (numberOfMonths - 1);
-    initialMonth = addMonths(toDate, offset);
+    initialMonth = addMonths(toMonth, offset);
   }
   // Fix the initialMonth if is before the from-date
-  if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
-    initialMonth = fromDate;
+  if (fromMonth && differenceInCalendarMonths(initialMonth, fromMonth) < 0) {
+    initialMonth = fromMonth;
   }
   return startOfMonth(initialMonth);
 }
diff --git a/src/helpers/getNextFocus.tsx b/src/helpers/getNextFocus.tsx
index bdc642326..12deb89a0 100644
--- a/src/helpers/getNextFocus.tsx
+++ b/src/helpers/getNextFocus.tsx
@@ -10,7 +10,7 @@ import { getPossibleFocusDate } from "./getPossibleFocusDate";
 
 export type Options = Pick<
   PropsContext<Mode, boolean>,
-  "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "fromDate" | "toDate"
+  "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "fromMonth" | "toMonth"
 >;
 
 export function getNextFocus(
@@ -26,8 +26,8 @@ export function getNextFocus(
     | "locale"
     | "ISOWeek"
     | "weekStartsOn"
-    | "fromDate"
-    | "toDate"
+    | "fromMonth"
+    | "toMonth"
   >,
   attempt: number = 0
 ): CalendarDay | undefined {
diff --git a/src/helpers/getNextMonth.ts b/src/helpers/getNextMonth.ts
index d4a02074b..26360f966 100644
--- a/src/helpers/getNextMonth.ts
+++ b/src/helpers/getNextMonth.ts
@@ -8,15 +8,15 @@ import { startOfMonth } from "date-fns/startOfMonth";
  *
  * Please note that the next month is not always the next calendar month:
  *
- * - If after the `toDate` range, is `undefined`;
+ * - If after the `toMonth` range, is `undefined`;
  * - If the navigation is paged , is the number of months displayed ahead.
  */
 export function getNextMonth(
   firstMonth: Date,
   options: {
     numberOfMonths?: number;
-    fromDate?: Date;
-    toDate?: Date;
+    fromMonth?: Date;
+    toMonth?: Date;
     pagedNavigation?: boolean;
     today?: Date;
     disableNavigation?: boolean;
@@ -25,15 +25,15 @@ export function getNextMonth(
   if (options.disableNavigation) {
     return undefined;
   }
-  const { toDate, pagedNavigation, numberOfMonths = 1 } = options;
+  const { toMonth, pagedNavigation, numberOfMonths = 1 } = options;
   const offset = pagedNavigation ? numberOfMonths : 1;
   const month = startOfMonth(firstMonth);
 
-  if (!toDate) {
+  if (!toMonth) {
     return addMonths(month, offset);
   }
 
-  const monthsDiff = differenceInCalendarMonths(toDate, firstMonth);
+  const monthsDiff = differenceInCalendarMonths(toMonth, firstMonth);
 
   if (monthsDiff < numberOfMonths) {
     return undefined;
diff --git a/src/helpers/getPossibleFocusDate.ts b/src/helpers/getPossibleFocusDate.ts
index 38deb90ad..d0e687da3 100644
--- a/src/helpers/getPossibleFocusDate.ts
+++ b/src/helpers/getPossibleFocusDate.ts
@@ -20,10 +20,10 @@ export function getPossibleFocusDate(
   focusedDate: Date,
   options: Pick<
     PropsContext<Mode, boolean>,
-    "locale" | "ISOWeek" | "weekStartsOn" | "fromDate" | "toDate"
+    "locale" | "ISOWeek" | "weekStartsOn" | "fromMonth" | "toMonth"
   >
 ): Date {
-  const { weekStartsOn, fromDate, toDate, locale, ISOWeek } = options;
+  const { weekStartsOn, fromMonth, toMonth, locale, ISOWeek } = options;
 
   const moveFns = {
     day: addDays,
@@ -42,10 +42,10 @@ export function getPossibleFocusDate(
     focusedDate,
     moveDir === "after" ? 1 : -1
   );
-  if (moveDir === "before" && fromDate) {
-    nextFocusedDate = max([fromDate, nextFocusedDate]);
-  } else if (moveDir === "after" && toDate) {
-    nextFocusedDate = min([toDate, nextFocusedDate]);
+  if (moveDir === "before" && fromMonth) {
+    nextFocusedDate = max([fromMonth, nextFocusedDate]);
+  } else if (moveDir === "after" && toMonth) {
+    nextFocusedDate = min([toMonth, nextFocusedDate]);
   }
   return nextFocusedDate;
 }
diff --git a/src/helpers/getPreviousMonth.ts b/src/helpers/getPreviousMonth.ts
index 3b8979244..94963ae37 100644
--- a/src/helpers/getPreviousMonth.ts
+++ b/src/helpers/getPreviousMonth.ts
@@ -9,15 +9,15 @@ import { startOfMonth } from "date-fns/startOfMonth";
  * Please note that the previous month is not always the previous calendar
  * month:
  *
- * - If before the `fromDate` date, is `undefined`;
+ * - If before the `fromMonth` date, is `undefined`;
  * - If the navigation is paged, is the number of months displayed before.
  */
 export function getPreviousMonth(
   startingMonth: Date,
   options: {
     numberOfMonths?: number;
-    fromDate?: Date;
-    toDate?: Date;
+    fromMonth?: Date;
+    toMonth?: Date;
     pagedNavigation?: boolean;
     today?: Date;
     disableNavigation?: boolean;
@@ -26,13 +26,13 @@ export function getPreviousMonth(
   if (options.disableNavigation) {
     return undefined;
   }
-  const { fromDate, pagedNavigation, numberOfMonths = 1 } = options;
+  const { fromMonth, pagedNavigation, numberOfMonths = 1 } = options;
   const offset = pagedNavigation ? numberOfMonths : 1;
   const month = startOfMonth(startingMonth);
-  if (!fromDate) {
+  if (!fromMonth) {
     return addMonths(month, -offset);
   }
-  const monthsDiff = differenceInCalendarMonths(month, fromDate);
+  const monthsDiff = differenceInCalendarMonths(month, fromMonth);
 
   if (monthsDiff <= 0) {
     return undefined;
diff --git a/src/helpers/getStartEndMonths.ts b/src/helpers/getStartEndMonths.ts
new file mode 100644
index 000000000..ca4d828e9
--- /dev/null
+++ b/src/helpers/getStartEndMonths.ts
@@ -0,0 +1,41 @@
+import { addYears } from "date-fns/addYears";
+import { endOfMonth } from "date-fns/endOfMonth";
+import { endOfYear } from "date-fns/endOfYear";
+import { startOfDay } from "date-fns/startOfDay";
+import { startOfMonth } from "date-fns/startOfMonth";
+import { startOfYear } from "date-fns/startOfYear";
+
+import type { DayPickerProps, Mode } from "../types";
+
+/**
+ * Return the `fromMonth` and `toMonth` prop values values parsing the DayPicker
+ * props.
+ */
+export function getStartEndMonths(
+  props: Pick<
+    DayPickerProps<Mode, boolean>,
+    "fromYear" | "toYear" | "fromMonth" | "toMonth" | "today" | "captionLayout"
+  >
+): Pick<DayPickerProps<Mode, boolean>, "fromMonth" | "toMonth"> {
+  const { fromYear, toYear } = props;
+  let { fromMonth, toMonth } = props;
+  const hasDropdowns = props.captionLayout?.startsWith("dropdown");
+  if (fromMonth) {
+    fromMonth = startOfMonth(fromMonth);
+  } else if (fromYear) {
+    fromMonth = new Date(fromYear, 0, 1);
+  } else if (!fromMonth && hasDropdowns) {
+    fromMonth = startOfYear(addYears(props.today ?? new Date(), -100));
+  }
+  if (toMonth) {
+    toMonth = endOfMonth(toMonth);
+  } else if (toYear) {
+    toMonth = new Date(toYear, 11, 31);
+  } else if (!toMonth && hasDropdowns) {
+    toMonth = endOfYear(props.today ?? new Date());
+  }
+  return {
+    fromMonth: fromMonth ? startOfDay(fromMonth) : undefined,
+    toMonth: toMonth ? startOfDay(toMonth) : undefined
+  };
+}
diff --git a/src/helpers/getStartMonth.ts b/src/helpers/getStartMonth.ts
index ed44fcde5..3cffd588b 100644
--- a/src/helpers/getStartMonth.ts
+++ b/src/helpers/getStartMonth.ts
@@ -4,7 +4,7 @@ import { startOfMonth } from "date-fns/startOfMonth";
 
 import { PropsBase } from "../types";
 
-import { getFromToDate } from "./getFromToDate";
+import { getStartEndMonths } from "./getStartEndMonths";
 
 /** Return the start month based on the props passed to DayPicker. */
 
@@ -14,8 +14,6 @@ export function getStartMonth(
       PropsBase,
       | "fromYear"
       | "toYear"
-      | "fromDate"
-      | "toDate"
       | "fromMonth"
       | "toMonth"
       | "month"
@@ -27,16 +25,16 @@ export function getStartMonth(
 ): Date {
   const { month, defaultMonth, today, numberOfMonths = 1 } = props;
   let initialMonth = month || defaultMonth || today || new Date();
-  const { fromDate, toDate } = getFromToDate(props);
+  const { fromMonth, toMonth } = getStartEndMonths(props);
 
   // Fix the initialMonth if is after the to-date
-  if (toDate && differenceInCalendarMonths(toDate, initialMonth) < 0) {
+  if (toMonth && differenceInCalendarMonths(toMonth, initialMonth) < 0) {
     const offset = -1 * (numberOfMonths - 1);
-    initialMonth = addMonths(toDate, offset);
+    initialMonth = addMonths(toMonth, offset);
   }
   // Fix the initialMonth if is before the from-date
-  if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
-    initialMonth = fromDate;
+  if (fromMonth && differenceInCalendarMonths(initialMonth, fromMonth) < 0) {
+    initialMonth = fromMonth;
   }
   return startOfMonth(initialMonth);
 }
diff --git a/src/types.ts b/src/types.ts
index 8e36b732b..54f37ce64 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -129,10 +129,6 @@ export interface PropsBase {
    * @defaultValue 1
    */
   numberOfMonths?: number;
-  /** The earliest day to start the month navigation. */
-  fromDate?: Date;
-  /** The latest day to end the month navigation. */
-  toDate?: Date;
   /** The earliest month to start the month navigation. */
   fromMonth?: Date;
   /** The latest month to end the month navigation. */


Test patch:
diff --git a/examples/FromToYear.test.tsx b/examples/FromToYear.test.tsx
index 70cd4fc94..0e65b4d61 100644
--- a/examples/FromToYear.test.tsx
+++ b/examples/FromToYear.test.tsx
@@ -8,8 +8,8 @@ import { user } from "@/test/user";
 
 import { FromToYear } from "./FromToYear";
 
-const fromDate = new Date(2024, 0);
-const toDate = new Date(2026, 11);
+const fromMonth = new Date(2024, 0);
+const toMonth = new Date(2026, 11);
 const today = new Date(2025, 10, 25);
 jest.useFakeTimers().setSystemTime(today);
 
@@ -25,7 +25,7 @@ test("the next month button should not be disabled", () => {
 });
 
 describe("when navigating to the last month", () => {
-  const nOfMonths = differenceInMonths(toDate, fromDate);
+  const nOfMonths = differenceInMonths(toMonth, fromMonth);
   beforeEach(async () => {
     for (let i = 0; i < nOfMonths; i++) {
       await act(() => user.click(nextButton()));
diff --git a/examples/Testcase1567.tsx b/examples/Testcase1567.tsx
index e5988e223..95b686407 100644
--- a/examples/Testcase1567.tsx
+++ b/examples/Testcase1567.tsx
@@ -26,7 +26,7 @@ export function TestCase1567() {
         numberOfMonths={2}
         showOutsideDays
         selected={selected}
-        fromDate={new Date(2020, 5)}
+        fromMonth={new Date(2020, 5)}
       />
       <button>I should be focusable</button>
     </div>
diff --git a/src/contexts/calendar.test.tsx b/src/contexts/calendar.test.tsx
index 1e51637d1..cb5b5231d 100644
--- a/src/contexts/calendar.test.tsx
+++ b/src/contexts/calendar.test.tsx
@@ -19,22 +19,22 @@ it("should return the previous month", () => {
 });
 
 describe("dropdown", () => {
-  it("should return undefined if no fromDate is provided", () => {
+  it("should return undefined if no fromMonth is provided", () => {
     const { result } = renderHook(useCalendar, {
-      fromDate: undefined
+      fromMonth: undefined
     });
     expect(result.current.dropdownOptions.months).toBeUndefined();
   });
 
-  it("should return undefined if no toDate is provided", () => {
-    const { result } = renderHook(useCalendar, { toDate: undefined });
+  it("should return undefined if no toMonth is provided", () => {
+    const { result } = renderHook(useCalendar, { toMonth: undefined });
     expect(result.current.dropdownOptions.months).toBeUndefined();
   });
 
-  it("should return an array of months between the fromDate and toDate", () => {
+  it("should return an array of months between the fromMonth and toMonth", () => {
     const dayPicker = {
-      fromDate: new Date(2020, 1, 1),
-      toDate: new Date(2023, 2, 1)
+      fromMonth: new Date(2020, 1, 1),
+      toMonth: new Date(2023, 2, 1)
     };
     const { result } = renderHook(useCalendar, dayPicker);
     const months = result.current.dropdownOptions.months;
diff --git a/src/helpers/getDropdownMonths.test.ts b/src/helpers/getDropdownMonths.test.ts
index 7f679c4fd..43ff50f4b 100644
--- a/src/helpers/getDropdownMonths.test.ts
+++ b/src/helpers/getDropdownMonths.test.ts
@@ -2,31 +2,31 @@ import * as formatters from "../formatters";
 
 import { getDropdownMonths } from "./getDropdownMonths";
 
-test("returns undefined if `fromDate` is not defined", () => {
+test("returns undefined if `fromMonth` is not defined", () => {
   const result = getDropdownMonths({
-    fromDate: undefined,
-    toDate: new Date(),
+    fromMonth: undefined,
+    toMonth: new Date(),
     formatters
   });
   expect(result).toBeUndefined();
 });
 
-test("returns undefined if `toDate` is not defined", () => {
+test("returns undefined if `toMonth` is not defined", () => {
   const result = getDropdownMonths({
-    fromDate: new Date(),
-    toDate: undefined,
+    fromMonth: new Date(),
+    toMonth: undefined,
     formatters
   });
   expect(result).toBeUndefined();
 });
 
-test("returns sorted months between `fromDate` and `toDate`", () => {
-  const fromDate = new Date(2023, 0, 1);
-  const toDate = new Date(2023, 11, 31);
+test("returns sorted months between `fromMonth` and `toMonth`", () => {
+  const fromMonth = new Date(2023, 0, 1);
+  const toMonth = new Date(2023, 11, 31);
 
   const result = getDropdownMonths(
-    { fromDate, toDate, formatters },
-    fromDate.getFullYear()
+    { fromMonth, toMonth, formatters },
+    fromMonth.getFullYear()
   );
 
   expect(result).toBeDefined();
@@ -38,11 +38,11 @@ test("returns sorted months between `fromDate` and `toDate`", () => {
 });
 
 test("formats month labels correctly", () => {
-  const fromDate = new Date(2023, 3, 1);
-  const toDate = new Date(2023, 11, 31);
+  const fromMonth = new Date(2023, 3, 1);
+  const toMonth = new Date(2023, 11, 31);
   const result = getDropdownMonths(
-    { fromDate, toDate, formatters },
-    fromDate.getFullYear()
+    { fromMonth, toMonth, formatters },
+    fromMonth.getFullYear()
   );
   if (!result) throw new Error("Unexpected undefined result");
   expect(result[0]).toEqual({ disabled: false, label: "April", value: 3 });
@@ -51,17 +51,17 @@ test("formats month labels correctly", () => {
 
 describe("when using a custom formatter", () => {
   test("formats month labels correctly", () => {
-    const fromDate = new Date(2023, 0, 1);
-    const toDate = new Date(2023, 11, 31);
+    const fromMonth = new Date(2023, 0, 1);
+    const toMonth = new Date(2023, 11, 31);
     const result = getDropdownMonths(
       {
-        fromDate,
-        toDate,
+        fromMonth,
+        toMonth,
         formatters: {
           formatMonthDropdown: (month) => `Month ${month.toString()}`
         }
       },
-      fromDate.getFullYear()
+      fromMonth.getFullYear()
     );
     if (!result) throw new Error("Unexpected undefined result");
     expect(result[0]).toEqual({ disabled: false, label: "Month 0", value: 0 });
diff --git a/src/helpers/getDropdownYears.test.ts b/src/helpers/getDropdownYears.test.ts
index 6daa7f141..7acbc3ff9 100644
--- a/src/helpers/getDropdownYears.test.ts
+++ b/src/helpers/getDropdownYears.test.ts
@@ -2,30 +2,30 @@ import { formatYearDropdown } from "../formatters";
 
 import { getDropdownYears } from "./getDropdownYears";
 
-it("returns undefined if fromDate is not defined", () => {
+it("returns undefined if fromMonth is not defined", () => {
   const result = getDropdownYears({
-    toDate: new Date(),
-    fromDate: undefined,
+    toMonth: new Date(),
+    fromMonth: undefined,
     formatters: { formatYearDropdown }
   });
   expect(result).toBeUndefined();
 });
 
-it("returns undefined if `toDate` is not defined", () => {
+it("returns undefined if `toMonth` is not defined", () => {
   const result = getDropdownYears({
-    fromDate: new Date(),
-    toDate: undefined,
+    fromMonth: new Date(),
+    toMonth: undefined,
     formatters: { formatYearDropdown }
   });
   expect(result).toBeUndefined();
 });
 
-it("returns an array of years between `fromDate` and `toDate`", () => {
-  const fromDate = new Date(2020, 0, 1);
-  const toDate = new Date(2022, 11, 31);
+it("returns an array of years between `fromMonth` and `toMonth`", () => {
+  const fromMonth = new Date(2020, 0, 1);
+  const toMonth = new Date(2022, 11, 31);
   const result = getDropdownYears({
-    fromDate,
-    toDate,
+    fromMonth,
+    toMonth,
     formatters: {
       formatYearDropdown: (year: number): string =>
         `Formatted ${year.toString()}`
@@ -51,11 +51,11 @@ it("returns an array of years between `fromDate` and `toDate`", () => {
   ]);
 });
 
-it("handles same year for fromDate and toDate", () => {
+it("handles same year for fromMonth and toMonth", () => {
   const year = new Date(2021, 5, 15);
   const result = getDropdownYears({
-    fromDate: year,
-    toDate: year,
+    fromMonth: year,
+    toMonth: year,
     formatters: {
       formatYearDropdown: (year: number): string =>
         `Formatted ${year.toString()}`
diff --git a/src/helpers/getFirstLastMonths.test.ts b/src/helpers/getFirstLastMonths.test.ts
index 774a3280e..0cdcbedd5 100644
--- a/src/helpers/getFirstLastMonths.test.ts
+++ b/src/helpers/getFirstLastMonths.test.ts
@@ -2,7 +2,7 @@ import { addMonths, isSameMonth } from "date-fns";
 
 import { getFirstLastMonths } from "./getFirstLastMonths";
 
-describe("when no toDate is given", () => {
+describe("when no toMonth is given", () => {
   describe("when month is in context", () => {
     const month = new Date(2010, 11, 12);
     it("return that month", () => {
@@ -25,30 +25,30 @@ describe("when no toDate is given", () => {
     });
   });
 });
-describe("when toDate is given", () => {
-  describe("when toDate is before the default initial date", () => {
+describe("when toMonth is given", () => {
+  describe("when toMonth is before the default initial date", () => {
     const month = new Date(2010, 11, 12);
-    const toDate = addMonths(month, -2);
+    const toMonth = addMonths(month, -2);
     describe("when the number of month is 1", () => {
       const numberOfMonths = 1;
-      it("return the toDate", () => {
+      it("return the toMonth", () => {
         const [firstMonth] = getFirstLastMonths({
           month,
-          toDate,
+          toMonth,
           numberOfMonths
         });
-        expect(isSameMonth(firstMonth, toDate)).toBe(true);
+        expect(isSameMonth(firstMonth, toMonth)).toBe(true);
       });
     });
     describe("when the number of month is 3", () => {
       const numberOfMonths = 3;
-      it("return the toDate plus the number of months", () => {
+      it("return the toMonth plus the number of months", () => {
         const [firstMonth] = getFirstLastMonths({
           month,
-          toDate,
+          toMonth,
           numberOfMonths
         });
-        const expectedMonth = addMonths(toDate, -1 * (numberOfMonths - 1));
+        const expectedMonth = addMonths(toMonth, -1 * (numberOfMonths - 1));
         expect(isSameMonth(firstMonth, expectedMonth)).toBe(true);
       });
     });
diff --git a/src/helpers/getFromToDate.test.ts b/src/helpers/getFromToDate.test.ts
deleted file mode 100644
index fab7b0433..000000000
--- a/src/helpers/getFromToDate.test.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { getFromToDate } from "./getFromToDate";
-
-describe('when "fromMonth" is not passed in', () => {
-  test('"fromDate" should be undefined', () => {
-    const { fromDate } = getFromToDate({});
-    expect(fromDate).toBeUndefined();
-  });
-});
-describe('when "fromMonth" is passed in', () => {
-  const fromMonth = new Date(2021, 4, 3);
-  const expectedFromDate = new Date(2021, 4, 1);
-  const { fromDate } = getFromToDate({ fromMonth });
-  test('"fromDate" should be the start of that month', () => {
-    expect(fromDate).toEqual(expectedFromDate);
-  });
-  describe('when "fromYear" is passed in', () => {
-    test('"fromDate" should be the start of that month', () => {
-      expect(fromDate).toEqual(expectedFromDate);
-    });
-  });
-});
-describe('when "fromYear" is passed in', () => {
-  const fromYear = 2021;
-  const expectedFromDate = new Date(2021, 0, 1);
-  const { fromDate } = getFromToDate({ fromYear });
-  test('"fromDate" should be the start of that year', () => {
-    expect(fromDate).toEqual(expectedFromDate);
-  });
-});
-describe('when "toMonth" is passed in', () => {
-  const toMonth = new Date(2021, 4, 3);
-  const expectedToDate = new Date(2021, 4, 31);
-  const { toDate } = getFromToDate({ toMonth });
-  test('"toDate" should be the end of that month', () => {
-    expect(toDate).toEqual(expectedToDate);
-  });
-  describe('when "fromYear" is passed in', () => {
-    test('"toDate" should be the end of that month', () => {
-      expect(toDate).toEqual(expectedToDate);
-    });
-  });
-});
-
-describe('when "toYear" is passed in', () => {
-  const toYear = 2021;
-  const expectedToDate = new Date(2021, 11, 31);
-  const { toDate } = getFromToDate({ toYear });
-  test('"toDate" should be the end of that year', () => {
-    expect(toDate).toEqual(expectedToDate);
-  });
-});
-
-describe('when "captionLayout" is dropdown', () => {
-  const today = new Date(2024, 4, 3);
-  const { fromDate, toDate } = getFromToDate({
-    captionLayout: "dropdown",
-    today
-  });
-  test('"fromDate" should be 100 years ago', () => {
-    expect(fromDate).toEqual(new Date(1924, 0, 1));
-  });
-  test('"toDate" should be the end of this year', () => {
-    expect(toDate).toEqual(new Date(2024, 11, 31));
-  });
-  describe('when "fromYear" is set', () => {
-    const today = new Date(2024, 4, 3);
-    const fromYear = 2022;
-    const { fromDate, toDate } = getFromToDate({
-      captionLayout: "dropdown",
-      fromYear,
-      today
-    });
-    test('"fromDate" should be equal to the "fromYear"', () => {
-      expect(fromDate).toEqual(new Date(2022, 0, 1));
-    });
-    test('"toDate" should be the end of this year', () => {
-      expect(toDate).toEqual(new Date(2024, 11, 31));
-    });
-  });
-  describe('when "toYear" is set', () => {
-    const today = new Date(2021, 4, 3);
-    const toYear = 2022;
-    const { toDate, fromDate } = getFromToDate({
-      captionLayout: "dropdown",
-      toYear,
-      today
-    });
-    test('"fromDate" should be 100 years ago', () => {
-      expect(fromDate).toEqual(new Date(1921, 0, 1));
-    });
-    test('"toDate" should be equal to "toYear"', () => {
-      expect(toDate).toEqual(new Date(2022, 11, 31));
-    });
-  });
-});
diff --git a/src/helpers/getInitialMonth.test.ts b/src/helpers/getInitialMonth.test.ts
index bf26eb76e..d72c7b37b 100644
--- a/src/helpers/getInitialMonth.test.ts
+++ b/src/helpers/getInitialMonth.test.ts
@@ -2,7 +2,7 @@ import { addMonths, isSameMonth } from "date-fns";
 
 import { getInitialMonth } from "./getInitialMonth";
 
-describe("when no toDate is given", () => {
+describe("when no toMonth is given", () => {
   describe("when month is in context", () => {
     const month = new Date(2010, 11, 12);
     it("return that month", () => {
@@ -25,30 +25,30 @@ describe("when no toDate is given", () => {
     });
   });
 });
-describe("when toDate is given", () => {
-  describe("when toDate is before the default initial date", () => {
+describe("when toMonth is given", () => {
+  describe("when toMonth is before the default initial date", () => {
     const month = new Date(2010, 11, 12);
-    const toDate = addMonths(month, -2);
+    const toMonth = addMonths(month, -2);
     describe("when the number of month is 1", () => {
       const numberOfMonths = 1;
-      it("return the toDate", () => {
+      it("return the toMonth", () => {
         const initialMonth = getInitialMonth({
           month,
-          toDate,
+          toMonth,
           numberOfMonths
         });
-        expect(isSameMonth(initialMonth, toDate)).toBe(true);
+        expect(isSameMonth(initialMonth, toMonth)).toBe(true);
       });
     });
     describe("when the number of month is 3", () => {
       const numberOfMonths = 3;
-      it("return the toDate plus the number of months", () => {
+      it("return the toMonth plus the number of months", () => {
         const initialMonth = getInitialMonth({
           month,
-          toDate,
+          toMonth,
           numberOfMonths
         });
-        const expectedMonth = addMonths(toDate, -1 * (numberOfMonths - 1));
+        const expectedMonth = addMonths(toMonth, -1 * (numberOfMonths - 1));
         expect(isSameMonth(initialMonth, expectedMonth)).toBe(true);
       });
     });
diff --git a/src/helpers/getNextFocus.test.tsx b/src/helpers/getNextFocus.test.tsx
index b1254d58b..594364be6 100644
--- a/src/helpers/getNextFocus.test.tsx
+++ b/src/helpers/getNextFocus.test.tsx
@@ -9,12 +9,12 @@ import { getNextFocus } from "./getNextFocus";
 
 const defaultDayPicker: Pick<
   PropsContext<Mode, boolean>,
-  "disabled" | "hidden" | "fromDate" | "toDate"
+  "disabled" | "hidden" | "fromMonth" | "toMonth"
 > = {
   disabled: [],
   hidden: [],
-  fromDate: undefined,
-  toDate: undefined
+  fromMonth: undefined,
+  toMonth: undefined
 };
 
 it("should return `undefined` if `attempt` exceeds 365", () => {
diff --git a/src/helpers/getNextMonth.test.ts b/src/helpers/getNextMonth.test.ts
index d115462f6..1a785f8c3 100644
--- a/src/helpers/getNextMonth.test.ts
+++ b/src/helpers/getNextMonth.test.ts
@@ -13,17 +13,17 @@ describe("when number of months is 1", () => {
     });
   });
   describe("when in the navigable range", () => {
-    const toDate = addMonths(startingMonth, 3);
+    const toMonth = addMonths(startingMonth, 3);
     it("the next month is not undefined", () => {
-      const result = getNextMonth(startingMonth, { toDate });
+      const result = getNextMonth(startingMonth, { toMonth });
       const expectedNextMonth = addMonths(startingMonth, 1);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
     });
   });
   describe("when not in the navigable range", () => {
-    const toDate = startingMonth;
+    const toMonth = startingMonth;
     it("the next month is undefined", () => {
-      const result = getNextMonth(startingMonth, { toDate });
+      const result = getNextMonth(startingMonth, { toMonth });
       expect(result).toBe(undefined);
     });
   });
@@ -45,7 +45,7 @@ describe("when displaying 3 months", () => {
         const result = getNextMonth(startingMonth, {
           numberOfMonths,
           pagedNavigation,
-          toDate: addMonths(startingMonth, 1)
+          toMonth: addMonths(startingMonth, 1)
         });
         expect(result).toBe(undefined);
       });
@@ -66,7 +66,7 @@ describe("when displaying 3 months", () => {
         const result = getNextMonth(startingMonth, {
           numberOfMonths,
           pagedNavigation,
-          toDate: addMonths(startingMonth, 2)
+          toMonth: addMonths(startingMonth, 2)
         });
         expect(result).toBe(undefined);
       });
diff --git a/src/helpers/getPossibleFocusDate.test.ts b/src/helpers/getPossibleFocusDate.test.ts
index b5a7d03c1..666c98be7 100644
--- a/src/helpers/getPossibleFocusDate.test.ts
+++ b/src/helpers/getPossibleFocusDate.test.ts
@@ -20,13 +20,13 @@ import { getPossibleFocusDate } from "./getPossibleFocusDate";
 const baseDate = new Date(2023, 0, 1); // Jan 1, 2023
 const options: Pick<
   PropsContext<Mode, boolean>,
-  "locale" | "ISOWeek" | "weekStartsOn" | "fromDate" | "toDate"
+  "locale" | "ISOWeek" | "weekStartsOn" | "fromMonth" | "toMonth"
 > = {
   locale: undefined,
   ISOWeek: false,
   weekStartsOn: 0, // Sunday
-  fromDate: new Date(2022, 0, 1), // Jan 1, 2022
-  toDate: new Date(2024, 0, 1) // Jan 1, 2024
+  fromMonth: new Date(2022, 0, 1), // Jan 1, 2022
+  toMonth: new Date(2024, 0, 1) // Jan 1, 2024
 };
 
 const testCases: {
@@ -98,22 +98,22 @@ ISOWeekTestCases.forEach(({ moveBy, moveDir, expectedFn }) => {
   });
 });
 
-test("should not move before fromDate", () => {
+test("should not move before fromMonth", () => {
   const result = getPossibleFocusDate(
     "day",
     "before",
     new Date(2022, 0, 2),
     options
   );
-  expect(result).toEqual(options.fromDate);
+  expect(result).toEqual(options.fromMonth);
 });
 
-test("should not move after toDate", () => {
+test("should not move after toMonth", () => {
   const result = getPossibleFocusDate(
     "day",
     "after",
     new Date(2023, 11, 31),
     options
   );
-  expect(result).toEqual(options.toDate);
+  expect(result).toEqual(options.toMonth);
 });
diff --git a/src/helpers/getPreviousMonth.test.ts b/src/helpers/getPreviousMonth.test.ts
index 3f345cddf..ba4d7d28b 100644
--- a/src/helpers/getPreviousMonth.test.ts
+++ b/src/helpers/getPreviousMonth.test.ts
@@ -13,17 +13,17 @@ describe("when number of months is 1", () => {
     });
   });
   describe("when in the navigable range", () => {
-    const fromDate = addMonths(startingMonth, -3);
+    const fromMonth = addMonths(startingMonth, -3);
     it("the previous month is not undefined", () => {
-      const result = getPreviousMonth(startingMonth, { fromDate });
+      const result = getPreviousMonth(startingMonth, { fromMonth });
       const expectedPrevMonth = addMonths(startingMonth, -1);
       expect(result && isSameMonth(result, expectedPrevMonth)).toBeTruthy();
     });
   });
   describe("when not in the navigable range", () => {
-    const fromDate = startingMonth;
+    const fromMonth = startingMonth;
     it("the previous month is undefined", () => {
-      const result = getPreviousMonth(startingMonth, { fromDate });
+      const result = getPreviousMonth(startingMonth, { fromMonth });
       expect(result).toBe(undefined);
     });
   });
diff --git a/src/helpers/getStartEndMonths.test.ts b/src/helpers/getStartEndMonths.test.ts
new file mode 100644
index 000000000..3db2e825b
--- /dev/null
+++ b/src/helpers/getStartEndMonths.test.ts
@@ -0,0 +1,89 @@
+import { getStartEndMonths } from "./getStartEndMonths";
+
+describe('when "fromMonth" is not passed in', () => {
+  test('"fromMonth" should be undefined', () => {
+    const { fromMonth } = getStartEndMonths({});
+    expect(fromMonth).toBeUndefined();
+  });
+});
+describe('when "fromMonth" is passed in', () => {
+  const { fromMonth } = getStartEndMonths({ fromMonth: new Date(2021, 4, 3) });
+  test('"fromMonth" should be the start of that month', () => {
+    expect(fromMonth).toEqual(new Date(2021, 4, 1));
+  });
+  describe('when "fromYear" is passed in', () => {
+    test('"fromMonth" should be the start of that month', () => {
+      expect(fromMonth).toEqual(new Date(2021, 4, 1));
+    });
+  });
+});
+describe('when "fromYear" is passed in', () => {
+  const { fromMonth } = getStartEndMonths({ fromYear: 2021 });
+  test('"fromMonth" should be the start of that year', () => {
+    expect(fromMonth).toEqual(new Date(2021, 0, 1));
+  });
+});
+describe('when "toMonth" is passed in', () => {
+  const { toMonth } = getStartEndMonths({ toMonth: new Date(2021, 4, 3) });
+  test('"toMonth" should be the end of that month', () => {
+    expect(toMonth).toEqual(new Date(2021, 4, 31));
+  });
+  describe('when "fromYear" is passed in', () => {
+    test('"toMonth" should be the end of that month', () => {
+      expect(toMonth).toEqual(new Date(2021, 4, 31));
+    });
+  });
+});
+
+describe('when "toYear" is passed in', () => {
+  const toYear = 2021;
+  const expectedtoMonth = new Date(2021, 11, 31);
+  const { toMonth } = getStartEndMonths({ toYear });
+  test('"toMonth" should be the end of that year', () => {
+    expect(toMonth).toEqual(expectedtoMonth);
+  });
+});
+
+describe('when "captionLayout" is dropdown', () => {
+  const today = new Date(2024, 4, 3);
+  const { fromMonth, toMonth } = getStartEndMonths({
+    captionLayout: "dropdown",
+    today
+  });
+  test('"fromMonth" should be 100 years ago', () => {
+    expect(fromMonth).toEqual(new Date(1924, 0, 1));
+  });
+  test('"toMonth" should be the end of this year', () => {
+    expect(toMonth).toEqual(new Date(2024, 11, 31));
+  });
+  describe('when "fromYear" is set', () => {
+    const today = new Date(2024, 4, 3);
+    const fromYear = 2022;
+    const { fromMonth, toMonth } = getStartEndMonths({
+      captionLayout: "dropdown",
+      fromYear,
+      today
+    });
+    test('"fromMonth" should be equal to the "fromYear"', () => {
+      expect(fromMonth).toEqual(new Date(2022, 0, 1));
+    });
+    test('"toMonth" should be the end of this year', () => {
+      expect(toMonth).toEqual(new Date(2024, 11, 31));
+    });
+  });
+  describe('when "toYear" is set', () => {
+    const today = new Date(2021, 4, 3);
+    const toYear = 2022;
+    const { toMonth, fromMonth } = getStartEndMonths({
+      captionLayout: "dropdown",
+      toYear,
+      today
+    });
+    test('"fromMonth" should be 100 years ago', () => {
+      expect(fromMonth).toEqual(new Date(1921, 0, 1));
+    });
+    test('"toMonth" should be equal to "toYear"', () => {
+      expect(toMonth).toEqual(new Date(2022, 11, 31));
+    });
+  });
+});
diff --git a/src/helpers/getStartMonth.test.ts b/src/helpers/getStartMonth.test.ts
index 946235933..f4c433d11 100644
--- a/src/helpers/getStartMonth.test.ts
+++ b/src/helpers/getStartMonth.test.ts
@@ -2,7 +2,7 @@ import { addMonths, isSameMonth } from "date-fns";
 
 import { getStartMonth } from "./getStartMonth";
 
-describe("when no toDate is given", () => {
+describe("when no toMonth is given", () => {
   describe("when month is in context", () => {
     const month = new Date(2010, 11, 12);
     it("return that month", () => {
@@ -25,30 +25,30 @@ describe("when no toDate is given", () => {
     });
   });
 });
-describe("when toDate is given", () => {
-  describe("when toDate is before the default initial date", () => {
+describe("when toMonth is given", () => {
+  describe("when toMonth is before the default initial date", () => {
     const month = new Date(2010, 11, 12);
-    const toDate = addMonths(month, -2);
+    const toMonth = addMonths(month, -2);
     describe("when the number of month is 1", () => {
       const numberOfMonths = 1;
-      it("return the toDate", () => {
+      it("return the toMonth", () => {
         const startMonth = getStartMonth({
           month,
-          toDate,
+          toMonth,
           numberOfMonths
         });
-        expect(isSameMonth(startMonth, toDate)).toBe(true);
+        expect(isSameMonth(startMonth, toMonth)).toBe(true);
       });
     });
     describe("when the number of month is 3", () => {
       const numberOfMonths = 3;
-      it("return the toDate plus the number of months", () => {
+      it("return the toMonth plus the number of months", () => {
         const startMonth = getStartMonth({
           month,
-          toDate,
+          toMonth,
           numberOfMonths
         });
-        const expectedMonth = addMonths(toDate, -1 * (numberOfMonths - 1));
+        const expectedMonth = addMonths(toMonth, -1 * (numberOfMonths - 1));
         expect(isSameMonth(startMonth, expectedMonth)).toBe(true);
       });
     });
diff --git a/src/types.test.tsx b/src/types.test.tsx
index 0f190a238..0c8b35fc8 100644
--- a/src/types.test.tsx
+++ b/src/types.test.tsx
@@ -1,38 +1,46 @@
 import React from "react";
 
-import { render } from "@testing-library/react";
-
 import { DayPicker } from "./DayPicker";
 
 const Test = () => {
   return (
     <>
       <DayPicker />
-      <DayPicker mode="single" selected={new Date()} onSelect={() => {}} />
+      <DayPicker mode="default" />
+      <DayPicker
+        mode="single"
+        selected={new Date()}
+        onSelect={(date: Date | undefined) => {}}
+      />
+      <DayPicker
+        mode="single"
+        required={true}
+        /* // @ts-expect-error Missing `selected` *. */
+        selected={undefined}
+        onSelect={(selected: Date, date: Date, modifiers) => {}}
+      />
       {/** @ts-expect-error Wrong selected prop */}
       <DayPicker mode="multi" selected={new Date()} />
       <DayPicker
         mode="multiple"
         // @ts-expect-error Wrong `onSelect`
-        // eslint-disable-next-line no-console
-        onSelect={(date: Date) => console.log(date.getYear())}
+        onSelect={(date: Date) => {}}
       />
-      <DayPicker />
+
       {/** @ts-expect-error Extra `selected` */}
       <DayPicker mode="default" selected={new Date()} />
-      <DayPicker mode="default" />
 
-      {/* <DayPicker
-        mode="custom"
+      <DayPicker
+        mode="default"
         modifiers={{ selected: new Date() }}
-        onDayClick={() => console.log(1)}
+        onDayClick={() => {}}
       />
       <DayPicker
-        mode="custom"
+        mode="default"
         // @ts-expect-error Extra `selected`
         selected={new Date()}
-        onDayClick={() => console.log(1)}
-      /> */}
+        onDayClick={() => {}}
+      />
       {/* <DayPicker mode="custom" selected={undefined} /> */}
       {/* <DayPicker mode="custom" onSelect={() => console.log(1)} /> */}
     </>
@@ -40,6 +48,5 @@ const Test = () => {
 };
 
 it("should type-check", () => {
-  render(<Test />);
   expect(true).toBeTruthy();
 });