Skip to main content

Navigating Months

Change the default month​

DayPicker displays the month of the current day. To change the default month, set the defaultMonth prop.

For example, to set the default month to September 1979:

|
import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
return <DayPicker defaultMonth={new Date(1979, 8)} />;
}

Controlling the current month​

DayPicker controls the displayed month and stores it in its internal state. To control the current month – for example, to implement a "Go to today" button – set the month in the parent component’s state.

To control the current month, use month (as opposed to defaultMonth) and onMonthChange to handle the current month.

|
import React, { useState } from 'react';
import { DayPicker } from 'react-day-picker';

import { addMonths, isSameMonth } from 'date-fns';

export default function App() {
const today = new Date();
const nextMonth = addMonths(new Date(), 1);
const [month, setMonth] = useState<Date>(nextMonth);

const footer = (
<button
disabled={isSameMonth(today, month)}
onClick={() => setMonth(today)}
>
Go to Today
</button>
);

return <DayPicker month={month} onMonthChange={setMonth} footer={footer} />;
}

Limiting the month navigation​

As default, DayPicker can navigate indefinitely in the past or in the future.

To limit the navigable months between two years, use fromYear or toYear.

|
import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
return (
<DayPicker defaultMonth={new Date(2015, 0)} fromYear={2015} toYear={2018} />
);
}

Between months or dates​

You can also limit the navigation with fromDate/toDate and fromMonth and toMonth. For example, to limit the calendar between June 2015 and the 20th Nov, 2015:

|
import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
const defaultMonth = new Date(2015, 5);
return (
<DayPicker
defaultMonth={defaultMonth}
fromMonth={defaultMonth}
toDate={new Date(2015, 10, 20)}
/>
);
}

Choosing a caption layout​

When limiting the navigable months, use captionLayout="dropdown" to display a drop-down (a select HTML element) for navigating between months – instead of the previous / next buttons.

|
import React from 'react';

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

export default function App() {
return <DayPicker captionLayout="dropdown" fromYear={2015} toYear={2025} />;
}

Use captionLayout="dropdown-buttons" to display both.

|
import React from 'react';

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

export default function App() {
return (
<DayPicker captionLayout="dropdown-buttons" fromYear={2015} toYear={2025} />
);
}

Disabling navigation​

To disable the navigation between months, use disableNavigation.

|
import React from 'react';

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

export default function App() {
return <DayPicker disableNavigation />;
}