@antadesign/anta
    Preparing search index...

    Interface CalendarPropsUnreviewed

    Public props for <Calendar> — the single-date month grid.

    interface CalendarProps {
        value?: string;
        defaultValue?: string;
        min?: string;
        max?: string;
        locale?: string;
        name?: string;
        size?: "small" | "medium" | "large";
        disabled?: boolean;
        focusSignal?: number;
        "aria-label"?: string;
        onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void;
        onChange?: (event: Event) => void;
        onValueChange?: (event: Event, attrs: CalendarChangeAttrs) => 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

    • Omit<BaseProps, "children" | "onChange">
      • CalendarProps

    Indexable

    • [key: `data-${string}`]: unknown
    • [key: `aria-${string}`]: unknown
    Index
    value?: string

    Controlled selected date — ISO YYYY-MM-DD. When provided, the application controls selection: the grid follows this prop and a pick only requests a change via onStateChange. Leave undefined for uncontrolled.

    defaultValue?: string

    Initial selected date for the uncontrolled case (ISO YYYY-MM-DD).

    min?: string

    Earliest selectable date (ISO YYYY-MM-DD) — earlier days render disabled.

    max?: string

    Latest selectable date (ISO YYYY-MM-DD) — later days render disabled.

    locale?: string

    BCP-47 locale tag driving first-day-of-week, weekday, and month names.

    navigator.language
    
    name?: string

    Form field name — the selected ISO date submits under this key.

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

    Size of the whole calendar — scales the day cells, the chevrons, and the weekday / month-heading type together (uses Button's small / medium / large scale).

    'medium'
    
    disabled?: boolean

    Disable the whole calendar (not focusable or selectable).

    focusSignal?: number

    Move keyboard focus onto the active day. Change this to a new value (e.g. increment a counter) to focus the cursor cell — InputDate bumps it when the calendar is opened from the field by keyboard (ArrowDown), so focus lands in the grid. The initial value never focuses; only a change does.

    "aria-label"?: string

    Accessible name for the grid (defaults to the visible month heading).

    onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void

    Fired whenever the selection changes — event-first. detail is { next, prev, reason }: next / prev are ISO date strings (null = none); reason is 'user' | 'reset' | 'restore'. A 'user' pick fires before applying and is cancelable — event.preventDefault() vetoes it (uncontrolled), or in controlled mode answer by updating value. 'reset' / 'restore' are not cancelable.

    onChange?: (event: Event) => void

    Fired after the selection changes (post-apply). Not cancelable; for a controlled calendar it fires once you've updated value.

    onValueChange?: (event: Event, attrs: CalendarChangeAttrs) => void

    Like onChange, but with a { value, name } snapshot as the second argument, matching Input.

    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).