@yamada-ui/calendar
Version:
Yamada UI calendar component
375 lines (372 loc) • 35 kB
TypeScript
import * as _yamada_ui_form_control from '@yamada-ui/form-control';
import { FormControlOptions } from '@yamada-ui/form-control';
import * as react from 'react';
import { KeyboardEvent, FocusEvent } from 'react';
import { HTMLUIProps, ThemeProps, PropGetter, RequiredPropGetter, HTMLProps } from '@yamada-ui/core';
import { ComboBoxProps, PopoverProps } from '@yamada-ui/popover';
import { CalendarBaseProps, CalendarProps } from './calendar.js';
import { UseCalendarProps } from './use-calendar.js';
import './calendar-header.js';
import '@yamada-ui/button';
import '@yamada-ui/icon';
import './use-calendar-header.js';
import './month.js';
import './month-list.js';
import './year-list.js';
import 'dayjs';
interface CalendarThemeProps extends ThemeProps<"Calendar"> {
}
interface InputProps extends Omit<HTMLUIProps<"input">, "children" | "defaultValue" | "disabled" | "onChange" | "readOnly" | "required" | "size" | "type" | keyof UseCalendarPickerBaseProps> {
}
interface UseCalendarPickerOptions {
/**
* If `true`, allows input.
*
* @default true
*/
allowInput?: boolean;
/**
* If `true`, allows input of dates beyond the `minDate` and `maxDate` restrictions.
*
* @default true
*/
allowInputBeyond?: boolean;
/**
* If `true`, focus will be transferred to the input element when the popover opens and container or clear icon clicked.
*
* @private
* @default true
*/
autoFocus?: boolean;
/**
* ColorScheme for the calendar component.
*/
calendarColorScheme?: CalendarThemeProps["colorScheme"];
/**
* Size for the calendar component.
*/
calendarSize?: CalendarThemeProps["size"];
/**
* Variant for the calendar component.
*/
calendarVariant?: CalendarThemeProps["variant"];
/**
* The format used for conversion.
* Check the docs to see the format of possible modifiers you can pass.
*
* @see Docs https://day.js.org/docs/en/display/format#list-of-localized-formats
* @default 'YYYY/MM/DD'
*/
inputFormat?: string;
/**
* Function that converts the input value to Date type.
*/
parseDate?: (value: string) => Date | undefined;
/**
* The pattern used to check the input element.
*
* @default '/[^0-9\-\/]/g'
*/
pattern?: RegExp;
/**
* Props for calendar component.
*/
calendarProps?: CalendarBaseProps;
/**
* The callback invoked when date picker clear icon clicked.
*
* @private
*/
onClear?: () => void;
/**
* The callback invoked when you hit the `Backspace` key.
*
* @private
*/
onDelete?: (ev: KeyboardEvent<HTMLDivElement>) => void;
/**
* The callback invoked when you hit the `Enter` key.
*
* @private
*/
onEnter?: (ev: KeyboardEvent<HTMLDivElement>) => void;
}
type UseCalendarPickerBaseProps<T extends UseCalendarProps<any> = UseCalendarProps<any>> = ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions;
type UseCalendarPickerProps<T extends UseCalendarProps<any> = UseCalendarProps<any>> = InputProps & UseCalendarPickerBaseProps<T>;
declare const useCalendarPicker: <T extends UseCalendarProps<any>>(props: UseCalendarPickerProps<T>) => {
allowInput: boolean;
containerRef: react.RefObject<HTMLDivElement>;
dateToString: (value: Date | undefined) => string | undefined;
inputFormat: string;
inputRef: react.RefObject<HTMLInputElement>;
locale: string;
open: boolean;
pattern: RegExp;
stringToDate: (value: string) => Date | undefined;
formControlProps: {
_active?: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["_active"] | undefined;
_focus?: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["_focus"] | undefined;
_focusVisible?: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["_focusVisible"] | undefined;
_hover?: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["_hover"] | undefined;
_invalid?: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["_invalid"] | undefined;
"aria-disabled": Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["aria-disabled"];
"aria-invalid": Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["aria-invalid"];
"aria-required": Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["aria-required"];
onFocus: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["onFocus"];
onBlur: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["onBlur"];
disabled: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["disabled"];
readOnly: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["readOnly"];
required: Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["required"];
"data-readonly": Omit<{
_active?: {} | undefined;
_focus?: {} | undefined;
_focusVisible?: {} | undefined;
_hover?: {} | undefined;
_invalid?: {} | undefined;
id: string | undefined;
"aria-disabled": boolean | undefined;
"aria-invalid": boolean | undefined;
"aria-readonly": boolean | undefined;
"aria-required": boolean | undefined;
"data-readonly": boolean | "true" | "false";
disabled: boolean | undefined;
readOnly: boolean | undefined;
required: boolean | undefined;
onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
onFocus: (event: FocusEvent<HTMLInputElement, Element>) => void;
} & Omit<InputProps & ComboBoxProps & FormControlOptions & T & UseCalendarPickerOptions & _yamada_ui_form_control.UseFormControlProps<HTMLInputElement>, "id" | "onFocus" | "onBlur" | "disabled" | "isDisabled" | "readOnly" | "required" | "invalid" | "isInvalid" | "isReadOnly" | "isRequired">, "animation" | "offset" | "defaultValue" | "autoFocus" | "onChange" | "value" | "pattern" | "flip" | "open" | "type" | "amountOfMonths" | "dateFormat" | "defaultMonth" | "defaultType" | "disableOutsideDays" | "enableMultiple" | "enableRange" | "excludeDate" | "firstDayOfWeek" | "hiddenOutsideDays" | "holidays" | "locale" | "maxDate" | "maxSelectValues" | "minDate" | "minSelectValues" | "month" | "monthFormat" | "paginateBy" | "today" | "weekdayFormat" | "weekendDays" | "withControls" | "withHeader" | "withLabel" | "withWeekdays" | "yearFormat" | "onChangeMonth" | "onChangeType" | "__selectType" | "onClose" | "duration" | "placement" | "lazy" | "onClear" | "defaultIsOpen" | "defaultOpen" | "isOpen" | "onOpen" | "gutter" | "preventOverflow" | "matchWidth" | "boundary" | "eventListeners" | "strategy" | "modifiers" | "closeOnBlur" | "closeOnEsc" | "openDelay" | "closeDelay" | "isLazy" | "lazyBehavior" | "allowInput" | "allowInputBeyond" | "calendarColorScheme" | "calendarSize" | "calendarVariant" | "inputFormat" | "parseDate" | "calendarProps" | "onDelete" | "onEnter">["data-readonly"];
};
getCalendarProps: (props?: CalendarProps) => CalendarProps;
getContainerProps: PropGetter<"div", undefined>;
getFieldProps: PropGetter<"div", undefined>;
getIconProps: RequiredPropGetter<{
clear: boolean;
} & HTMLProps, HTMLProps>;
getPopoverProps: (props?: PopoverProps) => PopoverProps;
inputProps: InputProps;
onClose: (...args: any[]) => Promise<void> | void;
onOpen: () => void;
};
type UseCalendarPickerReturn = ReturnType<typeof useCalendarPicker>;
export { type UseCalendarPickerProps, type UseCalendarPickerReturn, useCalendarPicker };