Selecting Days

DayPicker supports 3 built-in selection modes to display days as selected. Enable a selection mode by setting the mode prop.

• Single mode mode="single": only a single day can be selected
• Multiple mode mode="multiple": allow selection of multiple days
• Range mode mode="range": allow the selection of range of days

Single Selections

To enable single day selection, set mode="single" and use onSelect to get the selected day.

|

import React, { useState } from 'react';

import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';

export default function App() {
  const [selectedDay, setSelectedDay] = useState<Date>();

  const footer = selectedDay ? (
    <p>You selected {format(selectedDay, 'PPP')}.</p>
  ) : (
    <p>Please pick a day.</p>
  );

  return (
    <DayPicker
      mode="single"
      selected={selectedDay}
      onSelect={setSelectedDay}
      footer={footer}
    />
  );
}

April 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick a day.

Making a selection required

To make a selection required, use defautSelected with required.

For example, to set the default selected date to today:

|

import React, { useState } from 'react';

import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';

export default function App() {
  const today = new Date();
  const [selectedDay, setSelectedDay] = useState<Date | undefined>(today);

  const footer = selectedDay ? (
    <p>You selected {format(selectedDay, 'PPP')}.</p>
  ) : (
    <p>Please pick a day.</p>
  );

  return (
    <DayPicker
      mode="single"
      required
      selected={selectedDay}
      onSelect={setSelectedDay}
      footer={footer}
    />
  );
}

April 2024

Su	Mo	Tu	We	Th	Fr	Sa
You selected April 16th, 2024.

Selecting Multiple Days

Use mode="multiple" to allow the selection of multiple days:

|

import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  const initialDays: Date[] = [];
  const [days, setDays] = React.useState<Date[] | undefined>(initialDays);

  const footer =
    days && days.length > 0 ? (
      <p>You selected {days.length} day(s).</p>
    ) : (
      <p>Please pick one or more days.</p>
    );

  return (
    <DayPicker
      mode="multiple"
      min={1}
      selected={days}
      onSelect={setDays}
      footer={footer}
    />
  );
}

April 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick one or more days.

Limiting the selectable days

Use the min and max props to limit the amount of days that can be selected.

|

import React from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  const [days, setDays] = React.useState<Date[]>();

  const footer =
    days && days.length > 0 ? (
      <p>You selected {days.length} day(s).</p>
    ) : (
      <p>Please pick one or more days.</p>
    );

  return (
    <DayPicker
      mode="multiple"
      min={2}
      max={5}
      selected={days}
      onSelect={setDays}
      footer={footer}
    />
  );
}

April 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick one or more days.

Selecting a Range of days

Use mode="range" and onSelect to allow the selection of multiple days.

|

import React, { useState } from 'react';

import { addDays, format } from 'date-fns';
import { DateRange, DayPicker } from 'react-day-picker';

const pastMonth = new Date(2020, 10, 15);

export default function App() {
  const defaultSelected: DateRange = {
    from: pastMonth,
    to: addDays(pastMonth, 4)
  };
  const [range, setRange] = useState<DateRange | undefined>(defaultSelected);

  let footer = <p>Please pick the first day.</p>;
  if (range?.from) {
    if (!range.to) {
      footer = <p>{format(range.from, 'PPP')}</p>;
    } else if (range.to) {
      footer = (
        <p>
          {format(range.from, 'PPP')}–{format(range.to, 'PPP')}
        </p>
      );
    }
  }

  return (
    <DayPicker
      id="test"
      mode="range"
      defaultMonth={pastMonth}
      selected={range}
      footer={footer}
      onSelect={setRange}
    />
  );
}

November 2020

Su	Mo	Tu	We	Th	Fr	Sa
November 15th, 2020–November 19th, 2020

Limiting the range size

Use the min and max props to limit the amount of days in the range.

|

import React, { useState } from 'react';

import { format } from 'date-fns';
import { DateRange, DayPicker } from 'react-day-picker';

export default function App() {
  const [range, setRange] = useState<DateRange | undefined>();

  let footer = <p>Please pick the first day.</p>;
  if (range?.from) {
    if (!range.to) {
      footer = <p>{format(range.from, 'PPP')}</p>;
    } else if (range.to) {
      footer = (
        <p>
          {format(range.from, 'PPP')}–{format(range.to, 'PPP')}
        </p>
      );
    }
  }

  return (
    <DayPicker
      defaultMonth={new Date(2022, 8)}
      mode="range"
      min={3}
      max={6}
      selected={range}
      onSelect={setRange}
      footer={footer}
    />
  );
}

September 2022

Su	Mo	Tu	We	Th	Fr	Sa
Please pick the first day.

Custom Selections

If the built-in selection modes are not enough for your app’s requirements, you can control the selection behavior using onDayClick.

For example, to implement the "single selection" behavior (like when mode="single"):

|

import React, { useState } from 'react';

import { DayPicker } from 'react-day-picker';

export default function App() {
  const [selectedDay, setSelectedDay] = useState<Date>();
  const handleDayClick = (day: Date) => setSelectedDay(day);

  const footer = selectedDay ? (
    <p>You selected {selectedDay.toDateString()}.</p>
  ) : (
    <p>Please pick a day.</p>
  );

  return (
    <DayPicker
      selected={selectedDay}
      onDayClick={handleDayClick}
      footer={footer}
    />
  );
}

April 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick a day.

Example: custom multiple select

The case of a multi-days select is a bit more complex as it deals with an array. The following example replicates the mode="multiple" selection mode.

|

import React, { useState } from 'react';

import { isSameDay } from 'date-fns';
import { DayClickEventHandler, DayPicker } from 'react-day-picker';

export default function App() {
  const [selectedDays, setSelectedDays] = useState<Date[]>([]);

  const handleDayClick: DayClickEventHandler = (day, modifiers) => {
    const newSelectedDays = [...selectedDays];
    if (modifiers.selected) {
      const index = selectedDays.findIndex((selectedDay) =>
        isSameDay(day, selectedDay)
      );
      newSelectedDays.splice(index, 1);
    } else {
      newSelectedDays.push(day);
    }
    setSelectedDays(newSelectedDays);
  };

  const handleResetClick = () => setSelectedDays([]);

  let footer = <p>Please pick one or more days.</p>;

  if (selectedDays.length > 0)
    footer = (
      <p>
        You selected {selectedDays.length} days.{' '}
        <button onClick={handleResetClick}>Reset</button>
      </p>
    );

  return (
    <DayPicker
      onDayClick={handleDayClick}
      selected={selectedDays}
      footer={footer}
    />
  );
}

April 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick one or more days.