Websites v4 docs v5.2.4
    Preparing search index...

    Function useDatePicker

    • Hook that provides functionality for building a custom date picker with theme-able styles.

      Exposes refs used for popup pickers positioned with createPortal.

      Takes optional props to integrate with react-hook-form.

      Takes optional Intl.DateTimeFormat formatter to allow custom formatting of dates.

      Parameters

      • __namedParameters: {
            customDateFormatter?: DateTimeFormat;
            name?: string;
            setValue?: UseFormSetValue<any>;
            trigger?: UseFormTrigger<any>;
        }

      Returns {
          currentMonth: Date;
          dayLabels: string[];
          dropdownPosition: { left: number; top: number; width: number };
          handleSelectDate: (date: Date) => void;
          inputRef: RefObject<HTMLInputElement | null>;
          isSameDate: (a: Date, b: Date) => boolean;
          month: number;
          offset: number;
          portalRef: RefObject<HTMLDivElement | null>;
          selectedDate: Date | null;
          selectorShown: boolean;
          setCurrentMonth: Dispatch<SetStateAction<Date>>;
          setSelectorShown: Dispatch<SetStateAction<boolean>>;
          tomorrow: Date;
          totalCells: number;
          totalDays: number;
          year: number;
      }


      const customDateFormatter = new Intl.DateTimeFormat('en', {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
      });

      const {
        portalRef,
        inputRef,
        selectedDate,
        selectorShown,
        setSelectorShown,
        currentMonth,
        setCurrentMonth,
        dropdownPosition,
        isSameDate,
        tomorrow,
        offset,
        year,
        month,
        totalDays,
        dayLabels,
        totalCells,
        handleSelectDate,
      } = useDatePicker({ name, setValue, trigger, customDateFormatter });

    Settings

    Member Visibility