Text input with a calendar popover for picking a single date. The value is a controlled ISO date string.
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.
"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}
/>
);
}
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.
Picker-specific props:
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | null | — | Required. ISO date string YYYY-MM-DD (controlled). |
onChange | (value: string | null, event?) => void | — | Required. Receives the new ISO value, raw text, or null. |
name | string | — | Required. Field name. |
minDate | string | — | Earliest selectable date, ISO YYYY-MM-DD. |
maxDate | string | — | Latest selectable date, ISO YYYY-MM-DD. |
displayDateFormat | string | "D. M. YYYY" | dayjs format used to render the value in the input. |
allowedDateFormats | string[] | ["D. M. YYYY", "DD. MM. YYYY", "D.M.YYYY", "DD.MM.YYYY"] | dayjs formats accepted while typing. |
datesConfig | DatesConfig[] | — | Per-date flags / disabled groups passed to the popover. |
customButtonTitles | CustomButtonTitles | — | Overrides for the popover navigation button labels. |
onMonthChange | (months: MonthType[]) => void | — | Fires when the popover's visible month changes. |
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 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.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.