@navikt/ds-react/esm/date/monthpicker/hooks/useMonthPicker.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import { DateInputProps } from "../../Date.Input.js";
import { MonthPickerProps } from "../MonthPicker.types.js";
export interface UseMonthPickerOptions extends Pick<MonthPickerProps, "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"> {
    /**
     * Make Date-selection required
     */
    required?: boolean;
    /**
     * Callback for month-change
     */
    onMonthChange?: (date?: Date) => void;
    /**
     * Input-format
     * @default "MMMM yyyy"
     */
    inputFormat?: string;
    /**
     * validation-callback
     */
    onValidate?: (val: MonthValidationT) => void;
    /**
     * Default shown year
     */
    defaultYear?: Date;
    /**
     * Allows input of with `yy` year format.
     *
     * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
     * In 2024 this equals to 1944 - 2043
     * @default true
     */
    allowTwoDigitYear?: boolean;
}
interface UseMonthPickerValue {
    /**
     * Use: <MonthPicker {...monthpickerProps} />
     */
    monthpickerProps: MonthPickerProps;
    /**
     * Use: <MonthPicker.Input {...inputProps} />
     */
    inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
        /**
         * @private
         */
        setAnchorRef: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
    };
    /**
     * Currently selected Date
     * Up to user to validate value and extract month
     */
    selectedMonth?: Date;
    /**
     * Manually set selected month if needed
     */
    setSelected: (date?: Date) => void;
    /**
     * Resets all states
     */
    reset: () => void;
}
export type MonthValidationT = {
    isDisabled: boolean;
    isEmpty: boolean;
    isInvalid: boolean;
    isValidMonth: boolean;
    isBefore: boolean;
    isAfter: boolean;
};
/**
 *
 * @see 🏷️ {@link UseMonthPickerOptions}
 * @see 🏷️ {@link UseMonthPickerValue}
 * @see 🏷️ {@link MonthValidationT}
 * @example
 * const { monthpickerProps, inputProps } = useMonthpicker({
 *   fromDate: new Date("Aug 23 2019"),
 *   toDate: new Date("Feb 23 2024"),
 *   onMonthChange: console.log,
 *   onValidate: console.log,
 * });
 */
export declare const useMonthpicker: (opt?: UseMonthPickerOptions) => UseMonthPickerValue;
export {};