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