UNPKG

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