Installation

Barrel

Granular

Usage

DatePicker supports three selection modes: `single`,
`multiple`, and
`range`.

export default function Example() {
  const [date, setDate] = useState<Date>();

  return <DatePicker mode="single" selected={date} onChange={setDate} />;
}

Examples

Single Date Selection

Select a single date. The most common use case for date pickers.

Multiple Date Selection

Select multiple individual dates. Use max to limit the number of selections.

Date Range Selection

Select a continuous range of dates. Works well with numberOfMonths={2} for a side-by-side view.

Range with Min/Max Constraints

Constrain the range length using min and max props (in days/nights).

With Popover

Compose with the Popover component to create a dropdown date picker.

Date Range with Popover

A date range picker in a popover with two months displayed.

Date Range with Presets

Combine the date picker with preset options for quick selection.

Disabled Dates with Usage Limits

Use the `disabled` prop to make certain dates unselectable,
and `footer` to display usage information.

Full Popover Example

Here's a complete example showing how to compose DatePicker with Popover:

export function DatePickerDropdown() {
  const [date, setDate] = useState<Date>();

  return (
    <Popover>
      <Popover.Trigger
        render={<Button variant="outline" icon={CalendarDotsIcon} />}
      >
        {date ? date.toLocaleDateString() : "Pick a date"}
      </Popover.Trigger>
      <Popover.Content className="p-3">
        <DatePicker
          mode="single"
          selected={date}
          onChange={(d) => setDate(d)}
/>
      </Popover.Content>
    </Popover>
  );
}

API Reference

DatePicker forwards all props to <a href="https://daypicker.dev/api/interfaces/PropsBase" target="_blank" rel="noopener noreferrer">react-day-picker</a>. 
Key props include:

• `mode` — "single" | "multiple" | "range" — Selection mode (required)
• `selected` — Currently selected date(s)
• `onChange` — Callback when selection changes
• `numberOfMonths` — Number of months to display
• `disabled` — Dates that cannot be selected
• `min` / `max` — Min/max selection constraints
• `footer` — Content rendered below the calendar
• `locale` — date-fns locale for internationalization
• `className` — Additional CSS classes

See the react-day-picker documentation for the full API.

Differences from react-day-picker

For consistency with other Kumo form components, DatePicker uses `onChange` instead of react-day-picker's `onSelect`.
Full type inference is preserved — TypeScript will correctly narrow the callback signature based on the `mode` prop.