1 | import * as React from 'react';
|
2 | import { DayOfWeek, ICalendarProps } from '../../Calendar';
|
3 | import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
|
4 | import { ICalendarFormatDateCallbacks, ICalendarStrings } from '../Calendar/Calendar.types';
|
5 | import { IStyle, ITheme } from '../../Styling';
|
6 | import { IRefObject, IBaseProps, IStyleFunctionOrObject, IComponentAs } from '../../Utilities';
|
7 | import { ICalloutProps } from '../Callout/Callout.types';
|
8 | import { ITextFieldProps } from '../TextField/TextField.types';
|
9 | /**
|
10 | * {@docCategory DatePicker}
|
11 | */
|
12 | export interface IDatePicker {
|
13 | /** Sets focus to the text field */
|
14 | focus(): void;
|
15 | /** Reset the state of the picker to the default */
|
16 | reset(): void;
|
17 | }
|
18 | /**
|
19 | * {@docCategory DatePicker}
|
20 | */
|
21 | export interface IDatePickerProps extends IBaseProps<IDatePicker>, React.HTMLAttributes<HTMLElement> {
|
22 | /**
|
23 | * Optional callback to access the IDatePicker interface. Use this instead of ref for accessing
|
24 | * the public methods and properties of the component.
|
25 | */
|
26 | componentRef?: IRefObject<IDatePicker>;
|
27 | /**
|
28 | * Call to provide customized styling that will layer on top of the variant rules.
|
29 | */
|
30 | styles?: IStyleFunctionOrObject<IDatePickerStyleProps, IDatePickerStyles>;
|
31 | /**
|
32 | * Theme provided by High-Order Component.
|
33 | */
|
34 | theme?: ITheme;
|
35 | /**
|
36 | * Pass callout props to callout component
|
37 | */
|
38 | calloutProps?: ICalloutProps;
|
39 | /**
|
40 | * Pass calendar props to calendar component
|
41 | */
|
42 | calendarProps?: ICalendarProps;
|
43 | /**
|
44 | * Pass textField props to textField component.
|
45 | * Prop name is "textField" for compatiblity with upcoming slots work.
|
46 | */
|
47 | textField?: ITextFieldProps;
|
48 | /**
|
49 | * Custom Calendar to be used for date picking
|
50 | */
|
51 | calendarAs?: IComponentAs<ICalendarProps>;
|
52 | /**
|
53 | * Callback issued when a date is selected
|
54 | */
|
55 | onSelectDate?: (date: Date | null | undefined) => void;
|
56 | /**
|
57 | * Label for the DatePicker
|
58 | */
|
59 | label?: string;
|
60 | /**
|
61 | * Whether the DatePicker is a required field or not
|
62 | * @defaultvalue false
|
63 | */
|
64 | isRequired?: boolean;
|
65 | /**
|
66 | * Disabled state of the DatePicker.
|
67 | * @defaultvalue false
|
68 | */
|
69 | disabled?: boolean;
|
70 | /**
|
71 | * Aria Label for TextField of the DatePicker for screen reader users.
|
72 | */
|
73 | ariaLabel?: string;
|
74 | /**
|
75 | * Whether or not the Textfield of the DatePicker is underlined.
|
76 | * @defaultvalue false
|
77 | */
|
78 | underlined?: boolean;
|
79 | /**
|
80 | * Aria label for date picker popup for screen reader users.
|
81 | * @defaultvalue Calendar
|
82 | */
|
83 | pickerAriaLabel?: string;
|
84 | /**
|
85 | * Whether the month picker is shown beside the day picker or hidden.
|
86 | * @defaultvalue true
|
87 | */
|
88 | isMonthPickerVisible?: boolean;
|
89 | /**
|
90 | * Show month picker on top of date picker when visible.
|
91 | * @defaultvalue false
|
92 | */
|
93 | showMonthPickerAsOverlay?: boolean;
|
94 | /**
|
95 | * Whether the DatePicker allows input a date string directly or not
|
96 | * @defaultvalue false
|
97 | */
|
98 | allowTextInput?: boolean;
|
99 | /**
|
100 | * Whether the DatePicker should open automatically when the control is focused
|
101 | * @defaultvalue false
|
102 | */
|
103 | disableAutoFocus?: boolean;
|
104 | /**
|
105 | * Placeholder text for the DatePicker
|
106 | */
|
107 | placeholder?: string;
|
108 | /**
|
109 | * Value of today. If null, current time in client machine will be used.
|
110 | */
|
111 | today?: Date;
|
112 | /**
|
113 | * Default value of the DatePicker, if any
|
114 | */
|
115 | value?: Date;
|
116 | /**
|
117 | * Optional method to format the chosen date to a string to display in the DatePicker
|
118 | * @defaultvalue date.toString()
|
119 | */
|
120 | formatDate?: (date?: Date) => string;
|
121 | /**
|
122 | * Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true
|
123 | * @defaultvalue new Date(Date.parse(dateStr))
|
124 | */
|
125 | parseDateFromString?: (dateStr: string) => Date | null;
|
126 | /**
|
127 | * The first day of the week for your locale.
|
128 | * @defaultvalue DayOfWeek.Sunday
|
129 | */
|
130 | firstDayOfWeek?: DayOfWeek;
|
131 | /**
|
132 | * Localized strings to use in the DatePicker
|
133 | */
|
134 | strings?: IDatePickerStrings;
|
135 | /**
|
136 | * Whether the month picker should highlight the current month
|
137 | * @defaultvalue false
|
138 | */
|
139 | highlightCurrentMonth?: boolean;
|
140 | /**
|
141 | * Whether the month picker should highlight the selected month
|
142 | * @defaultvalue false
|
143 | */
|
144 | highlightSelectedMonth?: boolean;
|
145 | /**
|
146 | * Whether the calendar should show the week number (weeks 1 to 53) before each week row
|
147 | * @defaultvalue false
|
148 | */
|
149 | showWeekNumbers?: boolean;
|
150 | /**
|
151 | * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
|
152 | * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
|
153 | * @defaultvalue FirstWeekOfYear.FirstFullWeek
|
154 | */
|
155 | firstWeekOfYear?: FirstWeekOfYear;
|
156 | /**
|
157 | * Whether the "Go to today" link should be shown or not
|
158 | */
|
159 | showGoToToday?: boolean;
|
160 | /**
|
161 | * Determines if DatePicker has a border.
|
162 | * @defaultvalue false
|
163 | */
|
164 | borderless?: boolean;
|
165 | /**
|
166 | * Optional Classname for datepicker root element .
|
167 | */
|
168 | className?: string;
|
169 | /**
|
170 | * Apply additional formating to dates, for example localized date formatting.
|
171 | */
|
172 | dateTimeFormatter?: ICalendarFormatDateCallbacks;
|
173 | /**
|
174 | * The minimum allowable date.
|
175 | */
|
176 | minDate?: Date;
|
177 | /**
|
178 | * The maximum allowable date.
|
179 | */
|
180 | maxDate?: Date;
|
181 | /**
|
182 | * The initially highlighted date in the calendar picker
|
183 | */
|
184 | initialPickerDate?: Date;
|
185 | /**
|
186 | * Allows all elements to be focused, including disabled ones
|
187 | * @defaultvalue false
|
188 | */
|
189 | allFocusable?: boolean;
|
190 | /**
|
191 | * Callback that runs after DatePicker's menu (Calendar) is closed
|
192 | */
|
193 | onAfterMenuDismiss?: () => void;
|
194 | /**
|
195 | * Whether the CalendarDay close button should be shown or not.
|
196 | */
|
197 | showCloseButton?: boolean;
|
198 | /**
|
199 | * The tabIndex of the TextField
|
200 | */
|
201 | tabIndex?: number;
|
202 | }
|
203 | /**
|
204 | * {@docCategory DatePicker}
|
205 | */
|
206 | export interface IDatePickerStrings extends ICalendarStrings {
|
207 | /**
|
208 | * Error message to render for TextField if isRequired validation fails.
|
209 | */
|
210 | isRequiredErrorMessage?: string;
|
211 | /**
|
212 | * Error message to render for TextField if input date string parsing fails.
|
213 | */
|
214 | invalidInputErrorMessage?: string;
|
215 | /**
|
216 | * Error message to render for TextField if date boundary (minDate, maxDate) validation fails.
|
217 | */
|
218 | isOutOfBoundsErrorMessage?: string;
|
219 | }
|
220 | /**
|
221 | * {@docCategory DatePicker}
|
222 | */
|
223 | export interface IDatePickerStyleProps {
|
224 | /**
|
225 | * Theme provided by High-Order Component.
|
226 | */
|
227 | theme: ITheme;
|
228 | /**
|
229 | * Accept custom classNames
|
230 | */
|
231 | className?: string;
|
232 | disabled?: boolean;
|
233 | underlined?: boolean;
|
234 | label?: boolean;
|
235 | isDatePickerShown?: boolean;
|
236 | }
|
237 | /**
|
238 | * {@docCategory DatePicker}
|
239 | */
|
240 | export interface IDatePickerStyles {
|
241 | /**
|
242 | * Style for the root element.
|
243 | */
|
244 | root: IStyle;
|
245 | textField: IStyle;
|
246 | callout: IStyle;
|
247 | icon: IStyle;
|
248 | wrapper?: IStyle;
|
249 | readOnlyTextField?: IStyle;
|
250 | readOnlyPlaceholder?: IStyle;
|
251 | }
|