DateRangePicker

Standalone date-range picker popover: pick a start and end date across one or more months. Controlled.

When to use

Use DateRangePicker when you need the range-calendar UI on its own (inside your own popover or inline panel). For a ready-made input field with a range popover use DateRangePickerInput; inside a @uxf/form form use @uxf/form/date-range-picker-input.

For selecting a single day, use DatePicker. There is no @uxf/form twin of DateRangePicker itself.

Usage

"use client";

import { noop } from "@uxf/core/utils/noop";
import { DateRangePicker, DateRangePickerValueType } from "@uxf/ui/date-range-picker";
import React, { useState } from "react";

export function BasicDateRangePicker() {
    const [value, setValue] = useState<DateRangePickerValueType>(null);

    return <DateRangePicker onChange={setValue} onClosePopover={noop} selectedDates={value} />;
}

Props

DateRangePickerValueType ({ from: Date | null; to: Date | null } | null) and ViewModeType ("month" | "year" | "decade") are exported. DatesConfig has the shape { flag?: string; dates: Date[]; isDisabled?: boolean }.

Variants & states

• Constrained range: set minDate / maxDate; dates outside the window are dimmed and blocked.
• Minimum / exact stay: minSelectedDays enforces a minimum span; exactSelectedDays pins the range to a fixed length (selecting a start auto-highlights the end).
• Multi-month view: numberOfMonths={2} shows two months side by side for easier range selection.
• Flagged / disabled dates: datesConfig attaches CSS flags and disables groups independently of unavailableDates.

Requirements

Client component ("use client"). Import the required stylesheets once in your global CSS (it reuses the single-date picker stylesheet):

@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/calendar.css");
@import url("@uxf/ui/css/date-picker.css");
@import url("@uxf/ui/css/date-range-picker.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.