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 * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker defaultMonth={new Date(1979, 8)} />;
}
Output
September 1979
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st September (Saturday)
2nd September (Sunday)
3rd September (Monday)
4th September (Tuesday)
5th September (Wednesday)
6th September (Thursday)
7th September (Friday)
8th September (Saturday)
9th September (Sunday)
10th September (Monday)
11th September (Tuesday)
12th September (Wednesday)
13th September (Thursday)
14th September (Friday)
15th September (Saturday)
16th September (Sunday)
17th September (Monday)
18th September (Tuesday)
19th September (Wednesday)
20th September (Thursday)
21st September (Friday)
22nd September (Saturday)
23rd September (Sunday)
24th September (Monday)
25th September (Tuesday)
26th September (Wednesday)
27th September (Thursday)
28th September (Friday)
29th September (Saturday)
30th September (Sunday)

Controlling the current month#

DayPicker controls the displayed month and stores it in its internal state. To control the current month – for example, 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 * as React from 'react';
import { addMonths, isSameMonth } from 'date-fns';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
const today = new Date();
const nextMonth = addMonths(new Date(), 1);
export default function Example() {
const [month, setMonth] = React.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} />;
}
Output
April 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st April (Thursday)
2nd April (Friday)
3rd April (Saturday)
4th April (Sunday)
5th April (Monday)
6th April (Tuesday)
7th April (Wednesday)
8th April (Thursday)
9th April (Friday)
10th April (Saturday)
11th April (Sunday)
12th April (Monday)
13th April (Tuesday)
14th April (Wednesday)
15th April (Thursday)
16th April (Friday)
17th April (Saturday)
18th April (Sunday)
19th April (Monday)
20th April (Tuesday)
21st April (Wednesday)
22nd April (Thursday)
23rd April (Friday)
24th April (Saturday)
25th April (Sunday)
26th April (Monday)
27th April (Tuesday)
28th April (Wednesday)
29th April (Thursday)
30th April (Friday)

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 * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return (
<DayPicker defaultMonth={new Date(2015, 0)} fromYear={2015} toYear={2018} />
);
}
Output
January 2015
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st January (Thursday)
2nd January (Friday)
3rd January (Saturday)
4th January (Sunday)
5th January (Monday)
6th January (Tuesday)
7th January (Wednesday)
8th January (Thursday)
9th January (Friday)
10th January (Saturday)
11th January (Sunday)
12th January (Monday)
13th January (Tuesday)
14th January (Wednesday)
15th January (Thursday)
16th January (Friday)
17th January (Saturday)
18th January (Sunday)
19th January (Monday)
20th January (Tuesday)
21st January (Wednesday)
22nd January (Thursday)
23rd January (Friday)
24th January (Saturday)
25th January (Sunday)
26th January (Monday)
27th January (Tuesday)
28th January (Wednesday)
29th January (Thursday)
30th January (Friday)
31st January (Saturday)

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 * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const defaultMonth = new Date(2015, 5);
return (
<DayPicker
defaultMonth={defaultMonth}
fromMonth={defaultMonth}
toDate={new Date(2015, 10, 20)}
/>
);
}
Output
June 2015
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st June (Monday)
2nd June (Tuesday)
3rd June (Wednesday)
4th June (Thursday)
5th June (Friday)
6th June (Saturday)
7th June (Sunday)
8th June (Monday)
9th June (Tuesday)
10th June (Wednesday)
11th June (Thursday)
12th June (Friday)
13th June (Saturday)
14th June (Sunday)
15th June (Monday)
16th June (Tuesday)
17th June (Wednesday)
18th June (Thursday)
19th June (Friday)
20th June (Saturday)
21st June (Sunday)
22nd June (Monday)
23rd June (Tuesday)
24th June (Wednesday)
25th June (Thursday)
26th June (Friday)
27th June (Saturday)
28th June (Sunday)
29th June (Monday)
30th June (Tuesday)

Using a drop-down to change the month#

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

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker fromYear={2015} toYear={2025} captionLayout="dropdown" />;
}
Output
Month:
Year:
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)

Disabling navigation#

To disable the navigation between months, use disableNavigation.

import * as React from 'react';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return (
<DayPicker fromYear={2015} toYear={2025} disableNavigation mode="single" />
);
}
Output
March 2021
Sunday.Monday.Tuesday.Wednesday.Thursday.Friday.Saturday.