@antadesign/anta
    Preparing search index...

    Interface CalendarPropsUnreviewed

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

    interface CalendarProps {
        value?: string | null;
        defaultValue?: string | null;
        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? defaultValue? min? max? locale? name? size? disabled? focusSignal? aria-label? onStateChange? onChange? onValueChange? className? style? id? title? slot? tabIndex? key?
    value?: string | null

    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. Use null for a controlled empty selection or leave undefined for uncontrolled. An empty string also clears selection.

    defaultValue?: string | null

    Initial selected date for the uncontrolled case (ISO YYYY-MM-DD), or null to start without a selection. Also supplies the form-reset baseline.

    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

    Adds CSS classes to the root element and preserves its existing classes.

    style?: CSSProperties

    Inline CSS styles on the root element.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute, shown as a browser tooltip on hover.

    slot?: string

    Named slot in a parent web component, such as slot="header" in 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