@yamada-ui/calendar/dist/multi-date-picker.d.ts

Yamada UI calendar component

import * as _yamada_ui_core from '@yamada-ui/core';
import { ThemeProps, FC, HTMLUIProps } from '@yamada-ui/core';
import { MotionProps } from '@yamada-ui/motion';
import { PortalProps } from '@yamada-ui/portal';
import { ReactNode, MouseEventHandler, Dispatch, SetStateAction } from 'react';
import { DatePickerIconProps } from './date-picker.js';
import { UseMultiDatePickerProps } from './use-multi-date-picker.js';
import '@yamada-ui/icon';
import './use-date-picker.js';
import '@yamada-ui/popover';
import './calendar.js';
import './calendar-header.js';
import '@yamada-ui/button';
import './use-calendar-header.js';
import './month.js';
import './month-list.js';
import './use-calendar.js';
import 'dayjs';
import './year-list.js';
import './use-calendar-picker.js';
import '@yamada-ui/form-control';

interface MultiDatePickerOptions {
    children?: FC<{
        value: Date[];
        onClose: () => void;
    }> | ReactNode;
    /**
     * If `true`, display the date picker clear icon.
     *
     * @default true
     */
    clearable?: boolean;
    /**
     * The custom display value to use.
     */
    component?: FC<{
        index: number;
        label: string;
        value: Date;
        onRemove: MouseEventHandler<HTMLElement>;
    }>;
    /**
     * The border color when the input is invalid.
     */
    errorBorderColor?: string;
    /**
     * The border color when the input is focused.
     */
    focusBorderColor?: string;
    /**
     * If `true`, display the date picker clear icon.
     *
     * @default true
     *
     * @deprecated Use `clearable` instead.
     */
    isClearable?: boolean;
    /**
     * If `true`, keep the placeholder.
     *
     * @default false
     */
    keepPlaceholder?: boolean;
    /**
     * The visual separator between each value.
     *
     * @default ','
     */
    separator?: string;
    /**
     * Props for date picker clear icon element.
     */
    clearIconProps?: DatePickerIconProps;
    /**
     * Props for date picker container element.
     */
    containerProps?: Omit<HTMLUIProps, "children">;
    /**
     * Props for date picker container element.
     */
    contentProps?: Omit<MotionProps, "children">;
    /**
     * Props for date picker field element.
     */
    fieldProps?: Omit<HTMLUIProps, "children">;
    /**
     * Props for date picker icon element.
     */
    iconProps?: DatePickerIconProps;
    /**
     * Props for date picker input element.
     */
    inputProps?: HTMLUIProps<"input">;
    /**
     * Props to be forwarded to the portal component.
     *
     * @default '{ disabled: true }'
     *
     */
    portalProps?: Omit<PortalProps, "children">;
}
interface MultiDatePickerProps extends ThemeProps<"DatePicker">, MultiDatePickerOptions, UseMultiDatePickerProps {
}
/**
 * `MultiDatePicker` is a component used for users to select multiple dates.
 *
 * @see Docs https://yamada-ui.com/components/forms/multi-date-picker
 */
declare const MultiDatePicker: _yamada_ui_core.Component<"input", MultiDatePickerProps>;
interface MultiDatePickerFieldOptions {
    dateToString: (value: Date | undefined) => string | undefined;
    open: boolean;
    setValue: Dispatch<SetStateAction<Date[]>>;
    value: Date[];
}
interface MultiDatePickerFieldProps extends HTMLUIProps, MultiDatePickerFieldOptions, Pick<MultiDatePickerProps, "component" | "inputProps" | "keepPlaceholder" | "separator"> {
}
declare const MultiDatePickerField: _yamada_ui_core.Component<"input", MultiDatePickerFieldProps>;

export { MultiDatePicker, MultiDatePickerField, type MultiDatePickerFieldProps, type MultiDatePickerProps };