1 | /// <reference types="react" />
|
2 | import { AbstractPureComponent2, Boundary, InputGroupProps2, IPopoverProps, Props } from "@blueprintjs/core";
|
3 | import { DateRange } from "./common/dateRange";
|
4 | import { DateFormatProps } from "./dateFormat";
|
5 | import { DatePickerBaseProps } from "./datePickerCore";
|
6 | import { DateRangeShortcut } from "./shortcuts";
|
7 | export declare type DateRangeInputProps = IDateRangeInputProps;
|
8 | /** @deprecated use DateRangeInputProps */
|
9 | export interface IDateRangeInputProps extends DatePickerBaseProps, DateFormatProps, Props {
|
10 | /**
|
11 | * Whether the start and end dates of the range can be the same day.
|
12 | * If `true`, clicking a selected date will create a one-day range.
|
13 | * If `false`, clicking a selected date will clear the selection.
|
14 | *
|
15 | * @default false
|
16 | */
|
17 | allowSingleDayRange?: boolean;
|
18 | /**
|
19 | * Whether the calendar popover should close when a date range is fully selected.
|
20 | *
|
21 | * @default true
|
22 | */
|
23 | closeOnSelection?: boolean;
|
24 | /**
|
25 | * Whether displayed months in the calendar are contiguous.
|
26 | * If false, each side of the calendar can move independently to non-contiguous months.
|
27 | *
|
28 | * @default true
|
29 | */
|
30 | contiguousCalendarMonths?: boolean;
|
31 | /**
|
32 | * The default date range to be used in the component when uncontrolled.
|
33 | * This will be ignored if `value` is set.
|
34 | */
|
35 | defaultValue?: DateRange;
|
36 | /**
|
37 | * Whether the text inputs are non-interactive.
|
38 | *
|
39 | * @default false
|
40 | */
|
41 | disabled?: boolean;
|
42 | /**
|
43 | * Props to pass to the end-date [input group](#core/components/text-inputs.input-group).
|
44 | * `disabled` and `value` will be ignored in favor of the top-level props on this component.
|
45 | * `ref` is not supported; use `inputRef` instead.
|
46 | */
|
47 | endInputProps?: InputGroupProps2;
|
48 | /**
|
49 | * Called when the user selects a day.
|
50 | * If no days are selected, it will pass `[null, null]`.
|
51 | * If a start date is selected but not an end date, it will pass `[selectedDate, null]`.
|
52 | * If both a start and end date are selected, it will pass `[startDate, endDate]`.
|
53 | */
|
54 | onChange?: (selectedRange: DateRange) => void;
|
55 | /**
|
56 | * Called when the user finishes typing in a new date and the date causes an error state.
|
57 | * If the date is invalid, `new Date(undefined)` will be returned for the corresponding
|
58 | * boundary of the date range.
|
59 | * If the date is out of range, the out-of-range date will be returned for the corresponding
|
60 | * boundary of the date range (`onChange` is not called in this case).
|
61 | */
|
62 | onError?: (errorRange: DateRange) => void;
|
63 | /**
|
64 | * The error message to display when the selected dates overlap.
|
65 | * This can only happen when typing dates in the input field.
|
66 | *
|
67 | * @default "Overlapping dates"
|
68 | */
|
69 | overlappingDatesMessage?: string;
|
70 | /**
|
71 | * The props to pass to the popover.
|
72 | * `autoFocus`, `content`, and `enforceFocus` will be ignored to avoid compromising usability.
|
73 | */
|
74 | popoverProps?: Partial<IPopoverProps>;
|
75 | /**
|
76 | * Whether the entire text field should be selected on focus.
|
77 | *
|
78 | * @default false
|
79 | */
|
80 | selectAllOnFocus?: boolean;
|
81 | /**
|
82 | * Whether shortcuts to quickly select a range of dates are displayed or not.
|
83 | * If `true`, preset shortcuts will be displayed.
|
84 | * If `false`, no shortcuts will be displayed.
|
85 | * If an array is provided, the custom shortcuts will be displayed.
|
86 | *
|
87 | * @default true
|
88 | */
|
89 | shortcuts?: boolean | DateRangeShortcut[];
|
90 | /**
|
91 | * Whether to show only a single month calendar.
|
92 | *
|
93 | * @default false
|
94 | */
|
95 | singleMonthOnly?: boolean;
|
96 | /**
|
97 | * Props to pass to the start-date [input group](#core/components/text-inputs.input-group).
|
98 | * `disabled` and `value` will be ignored in favor of the top-level props on this component.
|
99 | * `ref` is not supported; use `inputRef` instead.
|
100 | */
|
101 | startInputProps?: InputGroupProps2;
|
102 | /**
|
103 | * The currently selected date range.
|
104 | * If the prop is strictly `undefined`, the component acts in an uncontrolled manner.
|
105 | * If this prop is anything else, the component acts in a controlled manner.
|
106 | * To display an empty value in the input fields in a controlled manner, pass `[null, null]`.
|
107 | * To display an invalid date error in either input field, pass `new Date(undefined)`
|
108 | * for the appropriate date in the value prop.
|
109 | */
|
110 | value?: DateRange;
|
111 | }
|
112 | export interface IDateRangeInputState {
|
113 | isOpen?: boolean;
|
114 | boundaryToModify?: Boundary;
|
115 | lastFocusedField?: Boundary;
|
116 | formattedMinDateString?: string;
|
117 | formattedMaxDateString?: string;
|
118 | isStartInputFocused?: boolean;
|
119 | isEndInputFocused?: boolean;
|
120 | startInputString?: string;
|
121 | endInputString?: string;
|
122 | startHoverString?: string;
|
123 | endHoverString?: string;
|
124 | selectedEnd?: Date;
|
125 | selectedStart?: Date;
|
126 | shouldSelectAfterUpdate?: boolean;
|
127 | wasLastFocusChangeDueToHover?: boolean;
|
128 | selectedShortcutIndex?: number;
|
129 | }
|
130 | /**
|
131 | * Date range input component.
|
132 | *
|
133 | * @see https://blueprintjs.com/docs/#datetime/daterangeinput
|
134 | * @deprecated use { DateRangeInput2 } from "@blueprintjs/datetime2"
|
135 | */
|
136 | export declare class DateRangeInput extends AbstractPureComponent2<DateRangeInputProps, IDateRangeInputState> {
|
137 | static defaultProps: Partial<DateRangeInputProps>;
|
138 | static displayName: string;
|
139 | startInputElement: HTMLInputElement | null;
|
140 | endInputElement: HTMLInputElement | null;
|
141 | private handleStartInputRef;
|
142 | private handleEndInputRef;
|
143 | constructor(props: DateRangeInputProps);
|
144 | /**
|
145 | * Public method intended for unit testing only. Do not use in feature work!
|
146 | */
|
147 | reset(props?: DateRangeInputProps): void;
|
148 | componentDidUpdate(prevProps: DateRangeInputProps, prevState: IDateRangeInputState): void;
|
149 | render(): JSX.Element;
|
150 | protected validateProps(props: DateRangeInputProps): void;
|
151 | private renderInputGroup;
|
152 | private handleDateRangePickerChange;
|
153 | private handleShortcutChange;
|
154 | private handleDateRangePickerHoverChange;
|
155 | private handleStartInputEvent;
|
156 | private handleEndInputEvent;
|
157 | private handleInputEvent;
|
158 | private handleInputKeyDown;
|
159 | private handleInputMouseDown;
|
160 | private handleInputClick;
|
161 | private handleInputFocus;
|
162 | private handleInputBlur;
|
163 | private handleInputChange;
|
164 | private handlePopoverClose;
|
165 | private shouldFocusInputRef;
|
166 | private getIsOpenValueWhenDateChanges;
|
167 | private getInitialRange;
|
168 | private getSelectedRange;
|
169 | private getInputDisplayString;
|
170 | private getInputPlaceholderString;
|
171 | private getInputProps;
|
172 | private getInputRef;
|
173 | private getStateKeysAndValuesForBoundary;
|
174 | private getDateRangeForCallback;
|
175 | private getOtherBoundary;
|
176 | private doBoundaryDatesOverlap;
|
177 | /**
|
178 | * Returns true if the provided boundary is an END boundary overlapping the
|
179 | * selected start date. (If the boundaries overlap, we consider the END
|
180 | * boundary to be erroneous.)
|
181 | */
|
182 | private doesEndBoundaryOverlapStartBoundary;
|
183 | private isControlled;
|
184 | private isInputEmpty;
|
185 | private isInputInErrorState;
|
186 | private isDateValidAndInRange;
|
187 | private isNextDateRangeValid;
|
188 | private getFormattedMinMaxDateString;
|
189 | private parseDate;
|
190 | private formatDate;
|
191 | }
|