Selection Modes

The mode prop determines the selection mode. DayPicker offers predefined rules for date selection.

• Single mode: Allows the selection of a single date.
• Multiple mode: Allows the selection of multiple individual dates.
• Range mode: Allows the selection of a continuous range of dates.

Prop Name	Type	Description
mode	"single" | "multiple" | "range"	Enter a selection mode.
disabled	Matcher | Matcher[]	Disabled dates that cannot be selected.
selected	Date | Date[] | DateRange | undefined	The selected date(s).
required	boolean	When true, the selection is required.
onSelect	OnSelectHandler	Event callback when a date is selected.

Customizing Selections

To customize the behavior of a selection mode, use the selected and onSelect props to handle the selection event and update the selected dates according to your application's requirements:

import { useState } from "react";

import { DayPicker } from "@daypicker/react";

export function App() {
  const [selected, setSelected] = useState<Date[] | undefined>();
  const handleSelect = (newSelected) => {
    // Update the selected dates
    setSelected(newSelected);
  };
  return (
    <DayPicker mode="multiple" selected={selected} onSelect={handleSelect} />
  );
}

You can also set the selection mode to default and implement your own mode using modifiers and onDayClick. For more information, read the Custom Selections guide.