Skip to main content

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 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)} />

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 changes.

"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 NameTypeDescription
startMonthDateThe earliest month to start the navigation.
endMonthDateThe 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 NameTypeDescription
disableNavigationbooleanDisable 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 NameTypeDescription
hideNavigationbooleanHide the navigation bar.
<DayPicker hideNavigation captionLayout="dropdown" />