DateRangePickerInput

react-hook-form-bound date-range field. Wraps the @uxf/ui/date-range-picker-input primitive and manages its value, isInvalid, and helperText from form state.

When to use

Use @uxf/form/date-range-picker-input for a start/end date field inside a @uxf/form form — it registers the field with react-hook-form via control/name and renders validation errors automatically. For a standalone, manually-controlled range input (outside a form), use the @uxf/ui/date-range-picker-input twin directly. For a single date use @uxf/form/date-picker-input.

Usage

import { DateRangePickerInput, DateRangePickerInputValueType } from "@uxf/form/date-range-picker-input";
import { Form } from "@uxf/form/form";
import { useForm } from "react-hook-form";

interface FormData {
    range: DateRangePickerInputValueType;
}

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { range: null } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <DateRangePickerInput control={formApi.control} isClearable isRequired label="Date range" name="range" numberOfMonths={2} />
        </Form>
    );
}

Value

DateRangePickerInputValueType (a re-export of @uxf/ui/date-range-picker's DateRangePickerValueType = { from: Date | null; to: Date | null } | null).

Unlike the ui twin — whose value is a single display string "D. M. YYYY – D. M. YYYY" — the form field stores a { from, to } object. The field converts the twin's string on onChange and back on render. At runtime from/to hold ISO YYYY-MM-DD strings when the parts parse cleanly, otherwise the raw typed text ("" when a part is empty). This object shape is the key difference from the ui twin and from the single-date field.

Props

DateRangePickerInputProps<FormData> = ControlProps<FormData> + the visual props of the @uxf/ui/date-range-picker-input twin (minus the ones this field manages: isFocused, isInvalid, max, min, name, onChange, pattern, step, value) + the field-specific props below.

Other props (label, placeholder, size, variant, helperText, isClearable, datesConfig, triggerElement, leftAddon/rightAddon/leftElement/rightElement, bottomContent, unavailableDates, popoverPlacement/popoverStrategy, …) are forwarded to the twin — see @uxf/ui/date-range-picker-input.

Not forwarded: minDate, maxDate, minSelectedDays, exactSelectedDays are part of the twin's props (so they type-check here) but this field does not pass them through, so they have no effect. Also note id is passed straight through — unlike the sibling date/datetime/time fields, it is not auto-derived to `${formId}__${name}`.

Validation

Built-in rules (messages come from the uxf-form-date-range-picker-input:validation.* translations; override the required one with requiredMessage):

• required — when isRequired.
• valid range format — both from and to must parse, otherwise invalid-date-range-format.
• range order — from must not be after to, otherwise invalid-date-range-order.
• Add further rules via rules; a function rules.validate is merged under the custom key. The field-level error is shown as the twin's helperText and sets isInvalid.

Requirements

• Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control.
• Ships no CSS of its own; it renders @uxf/ui/date-range-picker-input, so include that component's stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/date-range-picker-input.

Links

• Visual/primitive twin: @uxf/ui/date-range-picker-input