@yamada-ui/react/dist/types/components/date-picker/use-date-picker.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import { FieldProps } from "../field/field.js";
import { UsePopoverProps } from "../popover/use-popover.js";
import { UseComboboxProps } from "../../hooks/use-combobox/index.js";
import { CalendarFormat, MaybeDateValue, UseCalendarProps } from "../calendar/use-calendar.js";
import * as react893 from "react";
import { ChangeEvent, ReactNode } from "react";

//#region src/components/date-picker/use-date-picker.d.ts
interface DatePickerFormat extends CalendarFormat {
  input?: Intl.DateTimeFormatOptions | null;
}
type InputAlign = "end" | "start";
type MaybeInputValue<Range extends boolean = false> = Range extends true ? {
  end?: string;
  start?: string;
} : string | undefined;
interface DatePickerRenderProps {
  count: number;
  date: Date;
  focused: boolean;
  index: number;
  separator: string;
  value: string;
  onClear: () => void;
  max?: number;
}
interface DatePickerRender {
  (props: DatePickerRenderProps): ReactNode;
}
interface UseDatePickerProps<Multiple extends boolean = false, Range extends boolean = false> extends Omit<UseCalendarProps<Multiple, Range>, "format" | "ref">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
  /**
   * The `id` attribute of the input element.
   */
  id?: string;
  /**
   * The `name` attribute of the input element.
   */
  name?: string;
  /**
   * 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`, the date picker will be closed when the input value changes.
   *
   * @default false
   */
  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean;
  /**
   * The initial value of the input.
   */
  defaultInputValue?: MaybeInputValue<Range>;
  /**
   * If `true`, the input will be focused when the clear icon is clicked.
   *
   * @default true
   */
  focusOnClear?: boolean;
  /**
   * The format used for conversion.
   * Check the docs to see the format of possible modifiers you can pass.
   *
   * @see https://day.js.org/docs/en/display/format#list-of-localized-formats
   */
  format?: DatePickerFormat;
  /**
   * The value of the input.
   */
  inputValue?: MaybeInputValue<Range>;
  /**
   * If `true`, the date picker will be opened when the input value changes.
   *
   * @default true
   */
  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean;
  /**
   * If `true`, the date picker will be opened when the input is focused.
   *
   * @default true
   */
  openOnFocus?: boolean;
  /**
   * Function that converts the input value to Date type.
   */
  parseDate?: (value: string) => Date | undefined;
  /**
   * The pattern used to check the input element.
   */
  pattern?: RegExp;
  /**
   * The placeholder for date picker.
   */
  placeholder?: string;
  /**
   * The function to render the selected date.
   */
  render?: (props: DatePickerRenderProps) => ReactNode;
  /**
   * The visual separator between each value.
   *
   * @default ','
   */
  separator?: string;
  /**
   * The callback invoked when input value state changes.
   */
  onInputChange?: (value: MaybeInputValue<Range>) => void;
}
declare const useDatePicker: <Multiple extends boolean = false, Range extends boolean = false>({
  maxDate,
  minDate,
  ...props
}?: UseDatePickerProps<Multiple, Range>) => {
  children: ReactNode;
  dateToString: (date?: Date) => string;
  inputValue: MaybeInputValue<Range>;
  interactive: boolean;
  month: Date;
  open: boolean;
  range: boolean | Range;
  separator: string;
  setInputValue: react893.Dispatch<react893.SetStateAction<MaybeInputValue<Range>>>;
  setMonth: react893.Dispatch<react893.SetStateAction<Date>>;
  setValue: react893.Dispatch<react893.SetStateAction<MaybeDateValue<Multiple, Range>>>;
  stringToDate: (value: string, start?: Date, end?: Date) => Date | undefined;
  value: MaybeDateValue<Multiple, Range>;
  getCalendarProps: PropGetter<UseCalendarProps<Multiple, Range>, undefined, undefined>;
  getClearIconProps: PropGetter<"div", undefined, undefined>;
  getContentProps: PropGetter<"div", undefined, undefined>;
  getFieldProps: PropGetter<"div", undefined, undefined>;
  getIconProps: PropGetter<"div", undefined, undefined>;
  getInputProps: PropGetter<"input", {
    align?: InputAlign;
  }, undefined>;
  getRootProps: PropGetter<"div", undefined, undefined>;
  popoverProps: UsePopoverProps;
  onChange: (value: MaybeDateValue<Multiple, Range>) => void;
  onClose: () => void | Promise<void>;
  onInputChange: (ev: ChangeEvent<HTMLInputElement>) => void;
  onOpen: () => void | Promise<void>;
};
type UseDatePickerReturn = ReturnType<typeof useDatePicker>;
//#endregion
export { DatePickerFormat, DatePickerRender, UseDatePickerProps, UseDatePickerReturn, useDatePicker };
//# sourceMappingURL=use-date-picker.d.ts.map