Text input with a range-calendar popover for picking a start/end date. The value is a controlled formatted string.
Use @uxf/ui/date-range-picker-input as a standalone, controlled range field outside a form. Inside a @uxf/form form use @uxf/form/date-range-picker-input instead — the form twin wires the field into react-hook-form (registration, range validation, isDisabled/isReadOnly from the form context) and delegates rendering to this component.
For the bare range popover without an input, use DateRangePicker. For a single date, use DatePickerInput.
"use client";
import { DateRangePickerInput } from "@uxf/ui/date-range-picker-input";
import React, { useState } from "react";
export function BasicDateRangePickerInput() {
const [range, setRange] = useState<string | null>(null);
return <DateRangePickerInput isClearable label="Date range" name="date-range" onChange={setRange} value={range} />;
}
The controlled value is a single display string of the form "D. M. YYYY – D. M. YYYY" (the two dates joined by SEPARATOR, " – "), or null when empty. On selection the component formats both dates with DISPLAY_DATE_FORMAT ("D. M. YYYY") and emits the joined string via onChange. Note this differs from DatePickerInput, whose value is an ISO YYYY-MM-DD string.
Picker-specific props:
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | null | — | Required. Formatted range string "D. M. YYYY – D. M. YYYY" (controlled). |
onChange | (value: string | null, event?) => void | — | Required. Receives the new formatted range string. |
name | string | — | Required. Field name. |
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 in the popover. |
datesConfig | DatesConfig[] | — | Per-date flags / disabled groups passed to the popover. |
bottomContent | ReactNode | — | Arbitrary JSX rendered below the calendar grid. |
triggerElement | ReactNode | calendar Icon | Element in the input that toggles the popover. |
placeholder | string | — | Input placeholder. |
style | CSSProperties | — | Inline style applied to the popover content. |
unavailableDates | Date[] | — | Deprecated. Blocked dates; prefer datesConfig with isDisabled. |
Inherited input-field props (from the shared input-with-popover base): label, helperText, hiddenLabel, id, form, size, variant, isClearable, isDisabled, isReadOnly, isInvalid, isRequired, isFocused, leftAddon, leftElement, rightAddon, rightElement, popoverPlacement, popoverStrategy, onBlur, onFocus.
size: small, default, large.variant: default.isDisabled and isReadOnly both disable the popover; isInvalid shows the error style (pair with helperText); isRequired marks the field; isClearable shows a remove button once a value is set; isFocused forces the focused style.Client component ("use client"). Import the required stylesheets once in your global CSS (the range popover reuses the single-date picker stylesheet):
@import url("@uxf/ui/css/icon.css");
@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");
@import url("@uxf/ui/css/input-with-popover.css");
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.