Standalone date-range picker popover: pick a start and end date across one or more months. Controlled.
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.
"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} />;
}
| Prop | Type | Default | Description |
|---|---|---|---|
selectedDates | DateRangePickerValueType | — | Required. Selected range { from: Date | null; to: Date | null } | null (controlled). |
onChange | (value: DateRangePickerValueType) => void | — | Required. Called whenever the range changes. |
onClosePopover | () => void | — | Required. Called to close a wrapping popover. |
minDate | Date | — | Earliest selectable date. |
maxDate | Date | — | Latest selectable date. |
minSelectedDays | number | — | Minimum length of the range, in days. |
exactSelectedDays | number | — | Locks the range to an exact number of days. |
numberOfMonths | number | 1 | Number of months shown side by side. |
datesConfig | DatesConfig[] | — | Per-date CSS flags and disabled groups. |
bottomContent | ReactNode | — | Arbitrary JSX rendered below the grid. |
style | CSSProperties | — | Inline style on the root element. |
unavailableDates | Date[] | — | Deprecated. Blocked dates; prefer datesConfig with isDisabled. |
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 }.
minDate / maxDate; dates outside the window are dimmed and blocked.minSelectedDays enforces a minimum span; exactSelectedDays pins the range to a fixed length (selecting a start auto-highlights the end).numberOfMonths={2} shows two months side by side for easier range selection.datesConfig attaches CSS flags and disables groups independently of unavailableDates.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.