Skip to main content
Version: 8.10.1

Months Navigation

Default Month​

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

Prop NameTypeDescription
defaultMonthDateThe 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)} />
SuMoTuWeThFrSa

Controlling the Month​

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

Prop NameTypeDescription
monthDateThe month displayed in the calendar.
onMonthChangeMonthChangeEventHandlerCallback when the month change.

"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>
    </>
  );
}
SuMoTuWeThFrSa

Limit the dates the user can navigate to by using the from*, to* props.

Prop NameTypeDescription
fromYearnumberThe earliest year to start the navigation.
toYearnumberThe latest year to start the navigation.
fromMonthDateThe earliest month to start the navigation.
toMonthDateThe latest month to end the navigation.
fromDateDateThe earliest day to start the navigation.
toDateDateThe latest day to end the navigation.
<DayPicker defaultMonth={new Date(2024, 0)} fromYear={2024} toYear={2026} />
SuMoTuWeThFrSa

Disabling Navigation​

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

Prop NameTypeDescription
disableNavigationbooleanDisable the navigation between months.
<DayPicker disableNavigation />
SuMoTuWeThFrSa