Skip to main content

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

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

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

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

Selecting a Range of days​

Use mode="range" and onSelectRange 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
      mode="range"
      defaultMonth={pastMonth}
      selected={range}
      footer={footer}
      onSelect={setRange}
    />
  );
}

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
      mode="range"
      min={1}
      max={5}
      selected={range}
      onSelect={setRange}
      footer={footer}
    />
  );
}

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

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 { DayClickEventHandler, DayPicker } from 'react-day-picker';

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

  const handleDayClick: DayClickEventHandler = (day, modifiers) => {
    setSelectedDays((currentValue) => {
      const days = [...currentValue];
      if (modifiers.selected) {
        days.splice(currentValue.indexOf(day), 1);
      } else {
        days.push(day);
      }
      return days;
    });
  };

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