UNPKG

9.59 kBTypeScriptView Raw
1// Type definitions for react-datepicker 4.4
2// Project: https://github.com/Hacker0x01/react-datepicker
3// Definitions by: Rajab Shakirov <https://github.com/radziksh>
4// Greg Smith <https://github.com/smrq>
5// Roy Xue <https://github.com/royxue>
6// Koala Human <https://github.com/KoalaHuman>
7// Justin Grant <https://github.com/justingrant>
8// Jake Boone <https://github.com/jakeboone02>
9// Roman Nuritdinov <https://github.com/Ky6uk>
10// Avi Klaiman <https://github.com/aviklai>
11// Naoki Sekiguchi <https://github.com/seckie>
12// Kerry Gougeon <https://github.com/kerry-g>
13// Shiftr Tech SAS <https://github.com/ShiftrTechSAS>
14// Pirasis Leelatanon <https://github.com/1pete>
15// Alexander Shipulin <https://github.com/y>
16// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
17// Minimum TypeScript Version: 3.8
18
19import * as React from 'react';
20import * as Popper from '@popperjs/core';
21import { Locale } from 'date-fns';
22import { Modifier, StrictModifierNames } from 'react-popper';
23
24export interface CalendarContainerProps {
25 className?: string | undefined;
26 children?: React.ReactNode | React.ReactNode[] | undefined;
27 showPopperArrow?: boolean | undefined;
28 arrowProps?: { [propName: string]: any } | undefined;
29}
30export function registerLocale(localeName: string, localeData: Locale): void;
31export function setDefaultLocale(localeName: string): void;
32export function getDefaultLocale(): string;
33export function CalendarContainer(props: CalendarContainerProps): React.ReactElement;
34
35interface HighlightDates {
36 [className: string]: Date[];
37}
38
39export interface ReactDatePickerCustomHeaderProps {
40 monthDate: Date;
41 date: Date;
42 changeYear(year: number): void;
43 changeMonth(month: number): void;
44 customHeaderCount: number;
45 decreaseMonth(): void;
46 increaseMonth(): void;
47 prevMonthButtonDisabled: boolean;
48 nextMonthButtonDisabled: boolean;
49 decreaseYear(): void;
50 increaseYear(): void;
51 prevYearButtonDisabled: boolean;
52 nextYearButtonDisabled: boolean;
53}
54
55export interface ReactDatePickerProps<
56 CustomModifierNames extends string = never,
57 WithRange extends boolean | undefined = undefined,
58> {
59 adjustDateOnChange?: boolean | undefined;
60 allowSameDay?: boolean | undefined;
61 ariaDescribedBy?: string | undefined;
62 ariaInvalid?: string | undefined;
63 ariaLabelClose?: string | undefined;
64 ariaLabelledBy?: string | undefined;
65 ariaRequired?: string | undefined;
66 autoComplete?: string | undefined;
67 autoFocus?: boolean | undefined;
68 calendarClassName?: string | undefined;
69 calendarContainer?(props: CalendarContainerProps): React.ReactNode;
70 calendarStartDay?: number | undefined;
71 children?: React.ReactNode | undefined;
72 chooseDayAriaLabelPrefix?: string | undefined;
73 className?: string | undefined;
74 clearButtonClassName?: string | undefined;
75 clearButtonTitle?: string | undefined;
76 closeOnScroll?: boolean | ((e: Event) => boolean) | undefined;
77 customInput?: React.ReactNode | undefined;
78 customInputRef?: string | undefined;
79 customTimeInput?: React.ReactNode | undefined;
80 dateFormat?: string | string[] | undefined;
81 dateFormatCalendar?: string | undefined;
82 dayClassName?(date: Date): string | null;
83 weekDayClassName?(date: Date): string | null;
84 monthClassName?(date: Date): string | null;
85 timeClassName?(date: Date): string | null;
86 disabledDayAriaLabelPrefix?: string | undefined;
87 disabled?: boolean | undefined;
88 disabledKeyboardNavigation?: boolean | undefined;
89 dropdownMode?: 'scroll' | 'select' | undefined;
90 endDate?: Date | null | undefined;
91 excludeDates?: Date[] | undefined;
92 excludeDateIntervals?: Array<{ start: Date; end: Date }> | undefined;
93 excludeTimes?: Date[] | undefined;
94 filterDate?(date: Date): boolean;
95 filterTime?(date: Date): boolean;
96 fixedHeight?: boolean | undefined;
97 forceShowMonthNavigation?: boolean | undefined;
98 formatWeekDay?(formattedDate: string): React.ReactNode;
99 formatWeekNumber?(date: Date): string | number;
100 highlightDates?: Array<HighlightDates | Date> | undefined;
101 id?: string | undefined;
102 includeDates?: Date[] | undefined;
103 includeDateIntervals?: Array<{ start: Date; end: Date }> | undefined;
104 includeTimes?: Date[] | undefined;
105 injectTimes?: Date[] | undefined;
106 inline?: boolean | undefined;
107 focusSelectedMonth?: boolean | undefined;
108 isClearable?: boolean | undefined;
109 locale?: string | Locale | undefined;
110 maxDate?: Date | null | undefined;
111 maxTime?: Date | undefined;
112 minDate?: Date | null | undefined;
113 minTime?: Date | undefined;
114 monthsShown?: number | undefined;
115 name?: string | undefined;
116 nextMonthAriaLabel?: string | undefined;
117 nextMonthButtonLabel?: string | React.ReactNode | undefined;
118 nextYearAriaLabel?: string | undefined;
119 nextYearButtonLabel?: string | React.ReactNode | undefined;
120 onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
121 onCalendarClose?(): void;
122 onCalendarOpen?(): void;
123 onChange(
124 date: WithRange extends false | undefined ? Date | null : [Date | null, Date | null],
125 event: React.SyntheticEvent<any> | undefined,
126 ): void;
127 onChangeRaw?(event: React.FocusEvent<HTMLInputElement>): void;
128 onClickOutside?(event: React.MouseEvent<HTMLDivElement>): void;
129 onDayMouseEnter?: ((date: Date) => void) | undefined;
130 onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
131 onInputClick?(): void;
132 onInputError?(err: { code: number; msg: string }): void;
133 onKeyDown?(event: React.KeyboardEvent<HTMLDivElement>): void;
134 onMonthChange?(date: Date): void;
135 onMonthMouseLeave?: (() => void) | undefined;
136 onSelect?(date: Date, event: React.SyntheticEvent<any> | undefined): void;
137 onWeekSelect?(
138 firstDayOfWeek: Date,
139 weekNumber: string | number,
140 event: React.SyntheticEvent<any> | undefined,
141 ): void;
142 onYearChange?(date: Date): void;
143 open?: boolean | undefined;
144 openToDate?: Date | undefined;
145 peekNextMonth?: boolean | undefined;
146 placeholderText?: string | undefined;
147 popperClassName?: string | undefined;
148 popperContainer?(props: { children: React.ReactNode[] }): React.ReactNode;
149 popperModifiers?: ReadonlyArray<Modifier<StrictModifierNames | CustomModifierNames>> | undefined;
150 popperPlacement?: Popper.Placement | undefined;
151 popperProps?: {} | undefined;
152 preventOpenOnFocus?: boolean | undefined;
153 previousMonthAriaLabel?: string | undefined;
154 previousMonthButtonLabel?: string | React.ReactNode | undefined;
155 previousYearAriaLabel?: string | undefined;
156 previousYearButtonLabel?: string | React.ReactNode | undefined;
157 readOnly?: boolean | undefined;
158 renderCustomHeader?(params: ReactDatePickerCustomHeaderProps): React.ReactNode;
159 renderDayContents?(dayOfMonth: number, date?: Date): React.ReactNode;
160 required?: boolean | undefined;
161 scrollableMonthYearDropdown?: boolean | undefined;
162 scrollableYearDropdown?: boolean | undefined;
163 selected?: Date | null | undefined;
164 selectsEnd?: boolean | undefined;
165 selectsStart?: boolean | undefined;
166 selectsRange?: WithRange;
167 shouldCloseOnSelect?: boolean | undefined;
168 showDisabledMonthNavigation?: boolean | undefined;
169 showFullMonthYearPicker?: boolean | undefined;
170 showMonthDropdown?: boolean | undefined;
171 showMonthYearDropdown?: boolean | undefined;
172 showMonthYearPicker?: boolean | undefined;
173 showPopperArrow?: boolean | undefined;
174 showPreviousMonths?: boolean | undefined;
175 showQuarterYearPicker?: boolean | undefined;
176 showTimeInput?: boolean | undefined;
177 showTimeSelect?: boolean | undefined;
178 showTimeSelectOnly?: boolean | undefined;
179 showTwoColumnMonthYearPicker?: boolean | undefined;
180 showFourColumnMonthYearPicker?: boolean | undefined;
181 showWeekNumbers?: boolean | undefined;
182 showYearDropdown?: boolean | undefined;
183 showYearPicker?: boolean | undefined;
184 startDate?: Date | null | undefined;
185 startOpen?: boolean | undefined;
186 strictParsing?: boolean | undefined;
187 tabIndex?: number | undefined;
188 timeCaption?: string | undefined;
189 timeFormat?: string | undefined;
190 timeInputLabel?: string | undefined;
191 timeIntervals?: number | undefined;
192 title?: string | undefined;
193 todayButton?: React.ReactNode | undefined;
194 useShortMonthInDropdown?: boolean | undefined;
195 useWeekdaysShort?: boolean | undefined;
196 weekAriaLabelPrefix?: string | undefined;
197 value?: string | undefined;
198 weekLabel?: string | undefined;
199 withPortal?: boolean | undefined;
200 portalId?: string | undefined;
201 portalHost?: ShadowRoot | undefined;
202 wrapperClassName?: string | undefined;
203 yearDropdownItemNumber?: number | undefined;
204 excludeScrollbar?: boolean | undefined;
205 enableTabLoop?: boolean | undefined;
206 yearItemNumber?: number | undefined;
207}
208
209export class ReactDatePicker<
210 CustomModifierNames extends string = never,
211 WithRange extends boolean | undefined = undefined,
212> extends React.Component<ReactDatePickerProps<CustomModifierNames, WithRange>> {
213 readonly setBlur: () => void;
214 readonly setFocus: () => void;
215 readonly setOpen: (open: boolean, skipSetBlur?: boolean) => void;
216 readonly isCalendarOpen: () => boolean;
217}
218
219export default ReactDatePicker;