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)} />;
}
SuMoTuWeThFrSa

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 { addMonths, isSameMonth } from 'date-fns';
import { DayPicker } from 'react-day-picker';

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} />;
}
SuMoTuWeThFrSa

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} />
  );
}
SuMoTuWeThFrSa

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)}
    />
  );
}
SuMoTuWeThFrSa

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} />;
}
Month:
Year:
SuMoTuWeThFrSa

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} />
  );
}
Month:
Year:
SuMoTuWeThFrSa

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 />;
}
SuMoTuWeThFrSa