> ## Documentation Index
> Fetch the complete documentation index at: https://super-calendar.afonsojramos.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Date selection

> Single, multiple, and range date selection with drag and disabled days.

Date picking lives on [`MonthList`](/guides/month-list), the vertically-scrolling
month list. It takes the selection props and renders a range as filled endpoint
badges with a centered rounded "pill" band across the span; today keeps its own
badge. Pass `fillCellOnSelection` to fill the whole cell instead of the pill.

## Range selection with useDateRange

`useDateRange` owns the start/end state machine: the first press sets the start,
the second sets the end (auto-swapping if you tap an earlier day), and a third
press starts over.

```tsx theme={null}
import { MonthList, useDateRange } from "@super-calendar/native";

function RangePicker() {
  const [date, setDate] = useState(new Date());
  const { range, onPressDate, selectRange } = useDateRange();

  return (
    <MonthList
      date={date}
      weekStartsOn={1}
      selectedRange={range ?? undefined}
      onPressDay={onPressDate}
      onSelectDrag={selectRange}
      onChangeVisibleMonth={setDate}
    />
  );
}
```

Tap two days to set the ends, or **drag** to sweep out a range: long-press a day
and drag, and the list auto-scrolls at the edges so a range can span months.
Wire `onSelectDrag` to `useDateRange`'s `selectRange`.

## Single and multiple days

`selectedDates` marks discrete days. Drive it from `onPressDay`:

```tsx theme={null}
const [picked, setPicked] = useState<Date[]>([]);

<MonthList
  date={date}
  weekStartsOn={1}
  selectedDates={picked}
  onPressDay={(day) => setPicked((prev) => [...prev, day])}
  onChangeVisibleMonth={setDate}
/>;
```

## Disabled days

`minDate`, `maxDate`, and `isDateDisabled` render days dimmed, ignore taps, and
keep them out of any selection (drag included). Pass the same constraints to
`useDateRange` so a rejected day never opens a range:

```tsx theme={null}
const minDate = useMemo(() => new Date(), []); // no past dates
const { range, onPressDate, selectRange } = useDateRange({ minDate });

<MonthList
  date={date}
  weekStartsOn={1}
  selectedRange={range ?? undefined}
  minDate={minDate}
  isDateDisabled={(d) => d.getDay() === 0} // also block Sundays
  onPressDay={onPressDate}
  onSelectDrag={selectRange}
/>;
```

<Note>
  Selection is a `rangeBackground` band over the span; there is no per-day selected circle by
  default, so the "today" badge stays distinct. See [Theming](/guides/theming) for the token.
</Note>