@dnb/eufemia/components/date-picker/DatePickerCalendar.d.ts

DNB Eufemia Design System UI Library

/**
 * Web DatePicker Component
 *
 */
import React from 'react';
import { InternalLocale } from '../../shared/Context';
import { DatePickerChangeEvent } from './DatePickerProvider';
export type CalendarDay = {
    date: Date;
    isDisabled?: boolean;
    isEndDate?: boolean;
    isInactive?: boolean;
    isLastMonth?: boolean;
    isNextMonth?: boolean;
    isPreview?: boolean;
    isSelectable?: boolean;
    isStartDate?: boolean;
    isToday?: boolean;
    isWithinSelection?: boolean;
    className?: string;
};
type CalendarLocales = {
    [locale in InternalLocale]?: Pick<Locale, 'localize' | 'formatLong'>;
};
export type CalendarNavigationEvent = {
    nr: number;
    type?: CalendarButtonProps['type'];
};
export type DatePickerCalendarProps = Omit<React.HTMLProps<HTMLElement>, 'onSelect' | 'onChange'> & {
    id?: string;
    nr?: number;
    /**
     * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `startDate`.
     */
    month?: Date;
    prevBtn?: boolean;
    nextBtn?: boolean;
    titleFormat?: string;
    dayOfWeekFormat?: string;
    firstDayOfWeek?: string;
    hideNav?: boolean;
    hideDays?: boolean;
    onlyMonth?: boolean;
    hideNextMonthWeek?: boolean;
    noAutoFocus?: boolean;
    onHover?: (day: Date) => void;
    onSelect?: (event: DatePickerChangeEvent<React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLTableElement | HTMLButtonElement>>) => void;
    onPrev?: (event: CalendarNavigationEvent) => void;
    onNext?: (event: CalendarNavigationEvent) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLTableElement | HTMLButtonElement>, tableRef: React.MutableRefObject<HTMLTableElement>, nr: number) => void;
    /**
     * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from &#39;date-fns/locale/en-GB&#39;`. Defaults to `nb-NO`.
     */
    locale?: InternalLocale;
    rtl?: boolean;
    isRange?: boolean;
    resetDate?: boolean;
};
declare function DatePickerCalendar(restOfProps: DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element;
export default DatePickerCalendar;
export type CalendarButtonProps = {
    type: 'prev' | 'next';
    nr: number;
    date: Date;
    month: Date;
    locale: CalendarLocales[keyof CalendarLocales];
    showButton: boolean;
    onClick: ({ nr, type, }: {
        nr: number;
        type: CalendarButtonProps['type'];
    }) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
};