@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
91 lines (90 loc) • 2.44 kB
TypeScript
import React from "react";
import { DateInputProps } from "../../Date.Input";
import { DatePickerProps } from "../DatePicker";
export interface UseDatepickerOptions extends Pick<DatePickerProps, "locale" | "fromDate" | "toDate" | "today" | "toDate" | "fromDate" | "toDate" | "disabled" | "disableWeekends"> {
/**
* The initially selected Date
*/
defaultSelected?: Date;
/**
* Default shown month
*/
defaultMonth?: Date;
/**
* Make selection of Date required
*/
required?: boolean;
/**
* Callback for changed state
*/
onDateChange?: (val?: Date) => void;
/**
* Input-format
* @default "dd.MM.yyyy"
*/
inputFormat?: string;
/**
* validation-callback
*/
onValidate?: (val: DateValidationT) => void;
/**
* Allows input of with `yy` year format.
*
* Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
* e.g. In 2024 this equals to 1944 - 2043.
* @default true
*/
allowTwoDigitYear?: boolean;
}
interface UseDatepickerValue {
/**
* Use: <DatePicker {...datepickerProps}/>
*/
datepickerProps: DatePickerProps;
/**
* Use: <DatePicker.Input {...inputProps}/>
*/
inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
/**
* @private
*/
setAnchorRef: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
};
/**
* Resets all states (callback)
*/
reset: () => void;
/**
* Currently selected date
* Up to user to validate date
*/
selectedDay?: Date;
/**
* Manually override currently selected day
*/
setSelected: (date?: Date) => void;
}
export type DateValidationT = {
isDisabled: boolean;
isWeekend: boolean;
isEmpty: boolean;
isInvalid: boolean;
isValidDate: boolean;
isBefore: boolean;
isAfter: boolean;
};
/**
*
* @see 🏷️ {@link UseDatepickerOptions}
* @see 🏷️ {@link UseDatepickerValue}
* @see 🏷️ {@link DateValidationT}
* @example
* const { datepickerProps, inputProps } = useDatepicker({
* fromDate: new Date("Aug 23 2019"),
* toDate: new Date("Feb 23 2024"),
* onDateChange: console.log,
* onValidate: console.log,
* });
*/
export declare const useDatepicker: (opt?: UseDatepickerOptions) => UseDatepickerValue;
export {};