@antadesign/anta
    Preparing search index...

    Interface InputDatePropsUnreviewed

    <InputDate> props — Calendar's date surface plus Input's field surface.

    interface InputDateProps {
        value?: string;
        defaultValue?: string;
        min?: string;
        max?: string;
        locale?: string;
        name?: string;
        size?: "small" | "medium" | "large";
        disabled?: boolean;
        label?: ReactNode;
        hint?: ReactNode;
        placeholder?: string;
        status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
        round?: boolean | number | string;
        placement?:
            | "left"
            | "right"
            | "bottom"
            | "top"
            | "bottom-start"
            | "bottom-end"
            | "top-start"
            | "top-end"
            | "right-start"
            | "right-end"
            | "left-start"
            | "left-end";
        offset?: number;
        clearable?: boolean;
        icon?: false
        | (keyof IconShapes);
        time?: boolean;
        hour12?: boolean;
        onValueChange?: (value: string, attrs: InputDateChangeAttrs) => void;
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy

    Indexable

    • [key: `data-${string}`]: unknown
    • [key: `aria-${string}`]: unknown
    Index
    value? defaultValue? min? max? locale? name? size? disabled? label? hint? placeholder? status? round? placement? offset? clearable? icon? time? hour12? onValueChange? className? style? id? title? slot? tabIndex? key?
    value?: string

    Controlled value — ISO YYYY-MM-DD (or YYYY-MM-DDTHH:mm with time), '' for empty. Pair with onValueChange; the field and calendar follow it and a pick only requests a change.

    defaultValue?: string

    Initial value for the uncontrolled case.

    min?: string

    Earliest selectable date (ISO). Earlier days disable, and a typed date before it stays uncommitted.

    max?: string

    Latest selectable date (ISO).

    locale?: string

    BCP-47 locale driving the display format, the placeholder mask, parsing order, and the calendar.

    navigator.language
    name?: string

    Form field name — the ISO value submits under this key.

    size?: "small" | "medium" | "large"

    Field size. Also sizes the calendar and the time row.

    medium
    disabled?: boolean

    Disable the field and the calendar.

    label?: ReactNode

    Field label, above the control.

    hint?: ReactNode

    Helper text under the field. Replaced by a format hint while the entry is unrecognized.

    placeholder?: string

    Placeholder shown when empty.

    the locale's format mask (e.g. MM/DD/YYYY, MM/DD/YYYY HH:MM with time)

    status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical"

    Validation/feedback tone. An unrecognized entry forces critical until fixed.

    neutral
    round?: boolean | number | string

    Round the field corners — true for fully round, or a number / CSS length.

    placement?:
        | "left"
        | "right"
        | "bottom"
        | "top"
        | "bottom-start"
        | "bottom-end"
        | "top-start"
        | "top-end"
        | "right-start"
        | "right-end"
        | "left-start"
        | "left-end"

    Preferred placement of the calendar menu relative to the field. Same values as Menu; it auto-flips and clamps when space runs out.

    bottom-start
    offset?: number

    Gap in pixels between the field and the calendar menu.

    4
    clearable?: boolean

    Show a clear button once the field has a value.

    icon?: false | (keyof IconShapes)

    Leading icon at the start of the field — the calendar affordance. Pass another shape to change it, or false to drop it.

    calendar-days
    time?: boolean

    Include a time. The value becomes ISO YYYY-MM-DDTHH:mm, the field parses a trailing time after a space (06/15/2026 14:30, … 2:30pm), and the menu shows a time row (hours : minutes, an AM/PM toggle in 12-hour locales, then a Done button) under the calendar. Picking a day keeps the menu open so you can set the time.

    hour12?: boolean

    Force the time cycle when time is on: true for 12-hour (AM/PM), false for 24-hour. Omit to follow the locale (en-US → 12-hour, most others → 24).

    onValueChange?: (value: string, attrs: InputDateChangeAttrs) => void

    Fired after the value resolves (a recognized entry, a calendar pick, a time change, or a clear), with the new ISO value ('' when cleared) and a { value, name } snapshot. An unrecognized entry does not fire it.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties