UNPKG

5.1 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent, Boundary, type Props } from "@blueprintjs/core";
3import { type DatePickerBaseProps, type DateRange } from "../../common";
4import { MonthAndYear } from "../../common/monthAndYear";
5import { type DateRangeShortcut } from "../shortcuts/shortcuts";
6export 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}
77export 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 */
91export 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}