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)} />;
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
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} />;
}
Su | Mo | Tu | We | Th | Fr | Sa | |
---|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 | |
8 | 9 | 10 | 11 | 12 | 13 | 14 | |
15 | 16 | 17 | 18 | 19 | 20 | 21 | |
22 | 23 | 24 | 25 | 26 | 27 | 28 | |
29 | 30 | 31 | |||||
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} />
);
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
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)}
/>
);
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
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} />;
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
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} />
);
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
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 />;
}
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |