Custom Months Navigation Component Example

[alessandro-dias-fcamara]

If anyone is looking for a custom months navigation example, maybe this could help.

Create the Nav component inside the <DayPicker components={} prop

<DayPicker
  mode="range"
  pagedNavigation
  components={{
    Nav: () => {
      return (
        <nav>
          <button
            type="button"
            onClick={handlePreviousClick}
            disabled={isPreviousMonthDisabled}
          >
            previous month
          </button>

          <button type="button" onClick={handleNextClick}>
            next month
          </button>
        </nav>
      );
    },
  }}
/>

Then you'll have access to the useDayPicker hook to get the previousMonth, nextMonth and goToMonth method:

const { nextMonth, previousMonth, goToMonth } = useDayPicker();

From there, you can write your own logic to handle months navigation, or to disable navigation to previous months before the current date. Here is what I had to do in my case:

// don't forget to import this to use in comparison function 
import { startOfMonth } from "date-fns";

const { nextMonth, previousMonth, goToMonth } = useDayPicker();
const [isPreviousMonthDisabled, setIsPreviousMonthDisabled] =
  useState(
    previousMonth
      ? startOfMonth(previousMonth) < startOfMonth(new Date())
      : true
  );

const handlePreviousClick = useCallback(() => {
  if (!previousMonth) return;
  goToMonth(previousMonth);
}, [previousMonth, goToMonth]);

const handleNextClick = useCallback(() => {
  if (!nextMonth) return;
  goToMonth(nextMonth);
}, [nextMonth, goToMonth]);

useEffect(() => {
  if (previousMonth) {
    setIsPreviousMonthDisabled(
      startOfMonth(previousMonth) < startOfMonth(new Date())
    );
  }
}, [previousMonth]);

Full Working Example:

// imports
import { useCallback, useEffect, useState } from "react";
import { startOfMonth } from "date-fns";
import { DayPicker, useDayPicker } from "react-day-picker";

<DayPicker
  mode="range"
  pagedNavigation
  components={{
    Nav: () => {
      const { nextMonth, previousMonth, goToMonth } = useDayPicker();
      const [isPreviousMonthDisabled, setIsPreviousMonthDisabled] =
        useState(
          previousMonth
            ? startOfMonth(previousMonth) < startOfMonth(new Date())
            : true
        );

      const handlePreviousClick = useCallback(() => {
        if (!previousMonth) return;
        goToMonth(previousMonth);
      }, [previousMonth, goToMonth]);

      const handleNextClick = useCallback(() => {
        if (!nextMonth) return;
        goToMonth(nextMonth);
      }, [nextMonth, goToMonth]);

      useEffect(() => {
        if (previousMonth) {
          setIsPreviousMonthDisabled(
            startOfMonth(previousMonth) < startOfMonth(new Date())
          );
        }
      }, [previousMonth]);

      return (
        <nav>
          <button
            type="button"
            onClick={handlePreviousClick}
            disabled={isPreviousMonthDisabled}
          >
            previous month
          </button>
          <button type="button" onClick={handleNextClick}>
            next month
          </button>
        </nav>
      );
    },
  }}
/>

You can abstract this to another component, to improve the logic and the readability.

Hope this can help someone ✌️