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

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.

|

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

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

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

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

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