DatetimePickerInput

Text input with a calendar trigger button that opens a DatetimePicker in a popover. Accepts both typed and picked datetime values, held as an ISO 8601 string.

When to use

Use @uxf/ui/datetime-picker-input for a standalone, controlled datetime field — you own the value/onChange state.

Inside a @uxf/form form, use the twin @uxf/form/datetime-picker-input instead: it wires the field into react-hook-form (useController), adds required/format/min-max validation, and reads the disabled/read-only flags from the form context. This ui component is the underlying controlled primitive it renders.

Usage

import { DatetimePickerInput } from "@uxf/ui/datetime-picker-input";
import { useState } from "react";

function Example() {
    const [value, setValue] = useState<string | null>(null);

    return (
        <DatetimePickerInput
            isClearable
            label="Date and time"
            name="datetime"
            onChange={setValue}
            placeholder="Enter date…"
            value={value}
        />
    );
}

Props

Extends InputWithPopoverProps<string | null> (from @uxf/ui/_input-with-popover), so it accepts the standard field props: label, helperText, hiddenLabel, isClearable, isDisabled, isReadOnly, isInvalid, isRequired, size, variant, leftAddon/rightAddon, leftElement/rightElement, popoverPlacement, popoverStrategy, onBlur/onFocus, autoFocus, form, id, className. children is omitted; placeholder and triggerElement are re-declared as optional.

Component-specific and notable props:

Value format

• Displayed in the input as D. M. YYYY H:mm (DISPLAY_DATETIME_FORMAT).
• Typed input is parsed strictly against ALLOWED_DATETIME_FORMAT (e.g. D. M. YYYY H:mm, DD.MM.YYYY HH:mm). A valid entry becomes an ISO 8601 string; empty becomes null; anything else is passed through as raw text.

Both ALLOWED_DATETIME_FORMAT (string[]) and DISPLAY_DATETIME_FORMAT (string) are exported from @uxf/ui/datetime-picker-input.

Variants & states

• Clearable: with isClearable, a clear button appears while the field has a value and is interactive; clearing sets the value to null.
• Disabled / read-only: isDisabled / isReadOnly block interaction and prevent the popover from opening.
• Invalid: isInvalid applies the error styling; pass helperText for the message.

Requirements

Client component ("use client").

This component ships no stylesheet of its own; import the styles of the parts it composes once in your global CSS:

@import url("@uxf/ui/css/input-with-popover.css");
@import url("@uxf/ui/css/datetime-picker.css");
@import url("@uxf/ui/css/tabs.css");
@import url("@uxf/ui/css/date-picker.css");
@import url("@uxf/ui/css/calendar.css");
@import url("@uxf/ui/css/time-picker.css");
@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon.css");

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