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

Animating Month Transitions

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

Prop NameTypeDescription
animatebooleanEnable 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 a more advanced customization, you can change override the default style with your own animation functions:

.rdp-caption_after_enter {
animation:; /* Your value here */
}
Class Names Used For Animations
Class NameDescription
.rdp-caption_after_enterCaption animation for the month after, when enters.
.rdp-caption_after_exitCaption animation for the month after, when exits.
.rdp-caption_before_enterCaption animation for the month before, when enters.
.rdp-caption_before_exitCaption animation for the month before, when exits.
.rdp-weeks_before_enterWeeks animation for the month before, when enters.
.rdp-weeks_before_exitWeeks animation for the month before, when exits.
.rdp-weeks_after_enterWeeks animation for the month after, when enters.
.rdp-weeks_after_exitWeeks animation for the month after, when exits.
Advanced Feature

Customizing the animation function, such as for a 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.

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" />