DatePickerInput

Text input with a calendar popover for picking a single date. The value is a controlled ISO date string.

When to use

Use @uxf/ui/date-picker-input as a standalone, controlled date field outside a form. Inside a @uxf/form form use @uxf/form/date-picker-input instead — the form twin wires the field into react-hook-form (registration, validation, isDisabled/isReadOnly from the form context) and delegates rendering to this component.

For the bare calendar popover without an input, use DatePicker. For selecting a range, use DateRangePickerInput.

Usage

"use client";

import { DatePickerInput } from "@uxf/ui/date-picker-input";
import React, { useState } from "react";

export function BasicDatePickerInput() {
    const [date, setDate] = useState<string | null>(null);

    return (
        <DatePickerInput
            isClearable
            label="Date"
            name="date"
            onChange={setDate}
            placeholder="Placeholder"
            value={date}
        />
    );
}

Value format

The controlled value is an ISO string in OUTPUT_DATE_FORMAT ("YYYY-MM-DD"), or null when empty. The field displays the value using displayDateFormat (default "D. M. YYYY") and, while typing, parses input against allowedDateFormats; a value that parses cleanly is emitted through onChange as YYYY-MM-DD, otherwise the raw text (or null when cleared) is emitted. ALLOWED_DATE_FORMAT, DISPLAY_DATE_FORMAT and OUTPUT_DATE_FORMAT are exported for reuse.

Props

Picker-specific props:

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 close/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:

@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/input-with-popover.css");

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