Date & range picker

These are web renderer (@super-calendar/dom) components. On React Native, compose a picker from MonthList + useDateRange (the same primitives shown below).

super-calendar ships two controlled popover inputs, DatePicker and DateRangePicker — and, because both are just thin shells over MonthList, you can build your own if you need different chrome.

DatePicker

A single date, controlled by value / onChange:

import { useState } from "react";
import { DatePicker } from "@super-calendar/dom";

function Field() {
  const [value, setValue] = useState<Date | null>(null);
  return <DatePicker value={value} onChange={setValue} weekStartsOn={1} />;
}

DateRangePicker

A start/end range. Each pick advances the selection (start, then end), and the popover closes once both are set:

import { useState } from "react";
import { type DateRange, DateRangePicker } from "@super-calendar/dom";

function Field() {
  const [range, setRange] = useState<DateRange | null>(null);
  return <DateRangePicker value={range} onChange={setRange} weekStartsOn={1} />;
}

Both accept minDate / maxDate / isDateDisabled, a placeholder, disabled, a formatLabel for the trigger text, and the calendar theme. They close on outside-click and Escape, and return focus to the trigger.

Styling

The picker chrome has its own slots (trigger, popover, footer, clear), and any calendar slot you pass through classNames reaches the popover’s MonthList:

<DateRangePicker
  value={range}
  onChange={setRange}
  classNames={{
    trigger: "rounded-lg border px-3 py-2",
    dayBadge: "data-[selected]:bg-indigo-600 data-[selected]:text-white",
  }}
/>

Roll your own

If you want fully custom chrome, wrap MonthList yourself and drive it with useDateRange (range) or selectedDates (single). The building blocks:

import { MonthList, useDateRange } from "@super-calendar/dom";

function CustomRange() {
  const { range, onPressDate } = useDateRange();
  return (
    <MonthList
      weekStartsOn={1}
      selectedRange={range ?? undefined}
      onPressDay={onPressDate}
      height={320}
    />
  );
}

Add your own trigger/popover and the two behaviours every popover needs (outside-click and Escape to close). See the field tab on the live demo.

Getting started

Views

Events

Styling

Interaction & accessibility

Packages & platforms

Reference

DatePicker

DateRangePicker

Styling

Roll your own

​DatePicker

​DateRangePicker

​Styling

​Roll your own

DatePicker

DateRangePicker

Styling

Roll your own