> ## 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 & range picker

> Shipped DatePicker and DateRangePicker inputs, or compose your own on the web.

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

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`:

```tsx theme={null}
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:

```tsx theme={null}
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](/guides/styling) you pass through `classNames` reaches the
popover's `MonthList`:

```tsx theme={null}
<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:

```tsx theme={null}
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](/demo).