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

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

Animating Month Transitions

To animate the transition between months, set the animate prop to true:

Prop Name	Type	Description
animate	boolean	Enable the transition animation when navigating between months.

<DayPicker animate />

Customizing the Animation

Use the supported CSS variables to customize the animation duration or timing function:

.custom-animate {
  --rdp-animation_duration: 0.1s; /* Change the duration of the transition. */
  --rdp-animation_timing: ease-in; /* Choose a different timing function. */
}

<DayPicker animate className="custom-animate" />

Accessibility Note

To improve accessibility for users who prefer reduced motion, you can use the prefers-reduced-motion media query to disable animations.

@media (prefers-reduced-motion: reduce) {
  .custom-animate {
    --rdp-animation_duration: 0s;
  }
}

Changing the Animation Functions

For advanced customization, you can override the default style with your own animation functions:

.rdp-caption_after_enter {
  animation:; /* Your value here */
}

Class Names Used For Animations

Class Name	Description
.rdp-caption_after_enter	Caption animation for the month after, when enters.
.rdp-caption_after_exit	Caption animation for the month after, when exits.
.rdp-caption_before_enter	Caption animation for the month before, when enters.
.rdp-caption_before_exit	Caption animation for the month before, when exits.
.rdp-weeks_before_enter	Weeks animation for the month before, when enters.
.rdp-weeks_before_exit	Weeks animation for the month before, when exits.
.rdp-weeks_after_enter	Weeks animation for the month after, when enters.
.rdp-weeks_after_exit	Weeks animation for the month after, when exits.

Advanced Feature

Customizing the animation function, such as for an up/down transition, can be challenging due to the HTML table structure of the grid. We may improve this in a future version. Please leave your feedback in DayPicker Discussions.