1 | import * as React from "react";
|
2 | import { AbstractPureComponent, Boundary, type Props } from "@blueprintjs/core";
|
3 | import { type DatePickerBaseProps, type DateRange } from "../../common";
|
4 | import { MonthAndYear } from "../../common/monthAndYear";
|
5 | import { type DateRangeShortcut } from "../shortcuts/shortcuts";
|
6 | export interface DateRangePickerProps extends DatePickerBaseProps, 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 | * The date-range boundary that the next click should modify.
|
17 | * This will be honored unless the next click would overlap the other boundary date.
|
18 | * In that case, the two boundary dates will be auto-swapped to keep them in chronological order.
|
19 | * If `undefined`, the picker will revert to its default selection behavior.
|
20 | */
|
21 | boundaryToModify?: Boundary;
|
22 | /**
|
23 | * Whether displayed months in the calendar are contiguous.
|
24 | * If false, each side of the calendar can move independently to non-contiguous months.
|
25 | *
|
26 | * @default true
|
27 | */
|
28 | contiguousCalendarMonths?: boolean;
|
29 | /**
|
30 | * Initial `DateRange` the calendar will display as selected.
|
31 | * This should not be set if `value` is set.
|
32 | */
|
33 | defaultValue?: DateRange;
|
34 | /**
|
35 | * Called when the user selects a day.
|
36 | * If no days are selected, it will pass `[null, null]`.
|
37 | * If a start date is selected but not an end date, it will pass `[selectedDate, null]`.
|
38 | * If both a start and end date are selected, it will pass `[startDate, endDate]`.
|
39 | */
|
40 | onChange?: (selectedDates: DateRange) => void;
|
41 | /**
|
42 | * Called when the user changes the hovered date range, either from mouseenter or mouseleave.
|
43 | * When triggered from mouseenter, it will pass the date range that would result from next click.
|
44 | * When triggered from mouseleave, it will pass `undefined`.
|
45 | */
|
46 | onHoverChange?: (hoveredDates: DateRange | undefined, hoveredDay: Date, hoveredBoundary: Boundary | undefined) => void;
|
47 | /**
|
48 | * Called when the `shortcuts` props is enabled and the user changes the shortcut.
|
49 | */
|
50 | onShortcutChange?: (shortcut: DateRangeShortcut, index: number) => void;
|
51 | /**
|
52 | * Whether shortcuts to quickly select a range of dates are displayed or not.
|
53 | * If `true`, preset shortcuts will be displayed.
|
54 | * If `false`, no shortcuts will be displayed.
|
55 | * If an array is provided, the custom shortcuts will be displayed.
|
56 | *
|
57 | * @default true
|
58 | */
|
59 | shortcuts?: boolean | DateRangeShortcut[];
|
60 | /**
|
61 | * The currently selected shortcut.
|
62 | * If this prop is provided, the component acts in a controlled manner.
|
63 | */
|
64 | selectedShortcutIndex?: number;
|
65 | /**
|
66 | * Whether to show only a single month calendar.
|
67 | *
|
68 | * @default false
|
69 | */
|
70 | singleMonthOnly?: boolean;
|
71 | /**
|
72 | * The currently selected `DateRange`.
|
73 | * If this prop is provided, the component acts in a controlled manner.
|
74 | */
|
75 | value?: DateRange;
|
76 | }
|
77 | export interface DateRangePickerState {
|
78 | hoverValue?: DateRange;
|
79 | leftView?: MonthAndYear;
|
80 | rightView?: MonthAndYear;
|
81 | value?: DateRange;
|
82 | time?: DateRange;
|
83 | selectedShortcutIndex?: number;
|
84 | }
|
85 | /**
|
86 | * Date range picker component.
|
87 | *
|
88 | * @see https://blueprintjs.com/docs/#datetime/daterangepicker
|
89 | * @deprecated use `{ DateRangePicker3 } from "@blueprintjs/datetime2"` instead
|
90 | */
|
91 | export declare class DateRangePicker extends AbstractPureComponent<DateRangePickerProps, DateRangePickerState> {
|
92 | static defaultProps: DateRangePickerProps;
|
93 | static displayName: string;
|
94 | private modifiers;
|
95 | constructor(props: DateRangePickerProps);
|
96 | render(): React.JSX.Element;
|
97 | componentDidUpdate(prevProps: DateRangePickerProps, prevState: DateRangePickerState): void;
|
98 | protected validateProps(props: DateRangePickerProps): void;
|
99 | private shouldHighlightCurrentDay;
|
100 | private getDateRangePickerModifiers;
|
101 | private renderDay;
|
102 | private disabledDays;
|
103 | private getDisabledDaysModifier;
|
104 | private maybeRenderShortcuts;
|
105 | private maybeRenderTimePickers;
|
106 | private handleTimeChange;
|
107 | private handleTimeChangeLeftCalendar;
|
108 | private handleTimeChangeRightCalendar;
|
109 | private renderCalendars;
|
110 | private renderSingleNavbar;
|
111 | private renderLeftNavbar;
|
112 | private renderRightNavbar;
|
113 | private renderSingleCaption;
|
114 | private renderLeftCaption;
|
115 | private renderRightCaption;
|
116 | private handleDayMouseEnter;
|
117 | private handleDayMouseLeave;
|
118 | private handleDayClick;
|
119 | private handleShortcutClick;
|
120 | private handleNextState;
|
121 | private handleLeftMonthChange;
|
122 | private handleRightMonthChange;
|
123 | private handleLeftMonthSelectChange;
|
124 | private handleRightMonthSelectChange;
|
125 | private updateLeftView;
|
126 | private updateRightView;
|
127 | private handleLeftYearSelectChange;
|
128 | private handleRightYearSelectChange;
|
129 | private setViews;
|
130 | }
|