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)} />
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 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. |
"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>
</>
);
}
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 |
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)} />
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 |
Disabling the Navigation​
To prevent the user from navigating between months, set the disableNavigation
prop to true
.
Prop Name | Type | Description |
---|---|---|
disableNavigation | boolean | Disable the navigation between months. |
<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 |
Hiding the Navigation​
To hide the navigation completely, set the hideNavigation
prop to true
. Useful when setting the caption layout to "dropdown"
.
Prop Name | Type | Description |
---|---|---|
hideNavigation | boolean | Hide the navigation bar. |
<DayPicker hideNavigation captionLayout="dropdown" />
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 |