Single Mode

When the mode prop is set to "single", only one date can be selected at a time.

<DayPicker mode="single" />

Props

Prop Name	Type	Description
selected	Date | undefined (MDN)	The selected date.
onSelect	OnSelectHandler<Date | undefined>	Event callback when a date is selected.
required	boolean	Make the selection required.

Controlled Selections

Use the selected and onSelect props to control the selected date:

export function App() {
  const [selected, setSelected] = React.useState<Date | undefined>();
  return <DayPicker mode="single" selected={selected} onSelect={setSelected} />;
}

Required Selection

By setting the required prop, DayPicker ensures that the user cannot unselect the selected date.

<DayPicker mode="single" required />