Months Navigation

Default Month

By default, DayPicker renders the current month. You can change the default month by setting the defaultMonth prop to a specific date.

Prop Name	Type	Description
defaultMonth	Date	The initial month to show in the calendar. Default is the current month.

For example, to render a calendar starting from September 1979:

<DayPicker defaultMonth={new Date(1979, 8)} />

Controlling the Month

To programmatically control the month displayed when navigating, use the month and onMonthChange props.

Prop Name	Type	Description
month	Date	The month displayed in the calendar.
onMonthChange	MonthChangeEventHandler	Callback when the month changes.

import { useState } from "react";

import { DayPicker } from "react-day-picker";

export function Controlled() {
  const [month, setMonth] = useState(new Date(2024, 9)); // Start from October 2024
  return <DayPicker month={month} onMonthChange={setMonth} />;
}

Today Button

For example, to implement a Go to Today button, set month to the current date when the button is clicked.

import { useState } from "react";

import { addMonths } from "date-fns";
import { DayPicker } from "react-day-picker";

export function Controlled() {
  const today = new Date();
  const nextMonth = addMonths(today, 1);

  const [month, setMonth] = useState(nextMonth);

  return (
    <>
      <DayPicker month={month} onMonthChange={setMonth} />
      <button onClick={() => setMonth(today)}>Go to Today</button>
    </>
  );
}

Start and End Dates

Limit the dates the user can navigate to by using the startMonth and endMonth props.

Prop Name	Type	Description
startMonth	Date	The earliest month to start the navigation.
endMonth	Date	The latest month to end the navigation.

<DayPicker startMonth={new Date(2024, 0)} endMonth={new Date(2025, 11)} />

Disabling the Navigation

To prevent the user from navigating between months, set the disableNavigation prop to true.

Prop Name	Type	Description
disableNavigation	boolean	Disable the navigation between months.

<DayPicker disableNavigation />

Hiding the Navigation

To hide the navigation completely, set the hideNavigation prop to true. Useful when setting the caption layout to "dropdown".

Prop Name	Type	Description
hideNavigation	boolean	Hide the navigation bar.

<DayPicker hideNavigation captionLayout="dropdown" />