@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
74 lines (73 loc) • 2.55 kB
TypeScript
/**
* 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 'date-fns/locale/en-GB'`. 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;
};