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:
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
.
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:
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.
Disabling navigationβ
To disable the navigation between months, use disableNavigation
.