DateRangePickerInput

Text input with a range-calendar popover for picking a start/end date. The value is a controlled formatted string.

When to use

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.

Usage

"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}
        />
    );
}

Value format

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.

Props

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.

Variants & states

size: small, default, large.
variant: default.
States: 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.

Requirements

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.

Default

Open in new tab

When to use

For the bare range popover without an input, use DateRangePicker. For a single date, use DatePickerInput.

Usage

"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} /> ); }

Value format

Props

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.

Requirements

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.