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

September 1979

Su	Mo	Tu	We	Th	Fr	Sa
26	27	28	29	30	31	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	1	2	3	4	5	6

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

October 2024

Su	Mo	Tu	We	Th	Fr	Sa
29	30	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	1	2

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

January 2024

Su	Mo	Tu	We	Th	Fr	Sa
31	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	1	2	3

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

September 2024

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	1	2	3	4	5

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" />

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecemberSeptember192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242024

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	1	2	3	4	5