UNPKG

7.22 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent, Boundary, type InputGroupProps, type Props } from "@blueprintjs/core";
3import { type DateFormatProps, type DatePickerBaseProps, type DateRange } from "../../common";
4import type { DatetimePopoverProps } from "../../common/datetimePopoverProps";
5import type { DateRangeShortcut } from "../shortcuts/shortcuts";
6export 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}
108export 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 */
132export 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}