Date selection

Date picking lives on MonthList, 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.

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:

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:

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

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 for the token.

Getting started

Migrating

Views

Events

Styling

Interaction & accessibility

Packages & platforms

Reference

Range selection with useDateRange

Single and multiple days

Disabled days

​Range selection with useDateRange

​Single and multiple days

​Disabled days

Range selection with useDateRange

Single and multiple days

Disabled days