1 | /// <reference types="react" />
|
2 | import { AbstractPureComponent2, InputGroupProps2, IPopoverProps, Props } from "@blueprintjs/core";
|
3 | import { DateFormatProps } from "./dateFormat";
|
4 | import { IDatePickerBaseProps } from "./datePickerCore";
|
5 | import { DatePickerShortcut } from "./shortcuts";
|
6 | export declare type DateInputProps = IDateInputProps;
|
7 | /** @deprecated use DateInputProps */
|
8 | export interface IDateInputProps extends IDatePickerBaseProps, DateFormatProps, Props {
|
9 | /**
|
10 | * Allows the user to clear the selection by clicking the currently selected day.
|
11 | * Passed to `DatePicker` component.
|
12 | *
|
13 | * @default true
|
14 | */
|
15 | canClearSelection?: boolean;
|
16 | /**
|
17 | * Text for the reset button in the date picker action bar.
|
18 | * Passed to `DatePicker` component.
|
19 | *
|
20 | * @default "Clear"
|
21 | */
|
22 | clearButtonText?: string;
|
23 | /**
|
24 | * Whether the calendar popover should close when a date is selected.
|
25 | *
|
26 | * @default true
|
27 | */
|
28 | closeOnSelection?: boolean;
|
29 | /**
|
30 | * Whether the date input is non-interactive.
|
31 | *
|
32 | * @default false
|
33 | */
|
34 | disabled?: boolean;
|
35 | /**
|
36 | * The default date to be used in the component when uncontrolled.
|
37 | */
|
38 | defaultValue?: Date;
|
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 [input group](#core/components/text-inputs.input-group).
|
45 | * `disabled` and `value` will be ignored in favor of the top-level props on this component.
|
46 | * `type` is fixed to "text".
|
47 | */
|
48 | inputProps?: InputGroupProps2;
|
49 | /**
|
50 | * Called when the user selects a new valid date through the `DatePicker` or by typing
|
51 | * in the input. The second argument is true if the user clicked on a date in the
|
52 | * calendar, changed the input value, or cleared the selection; it will be false if the date
|
53 | * was changed by choosing a new month or year.
|
54 | */
|
55 | onChange?: (selectedDate: Date, isUserChange: boolean) => 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. If the date is out of range,
|
59 | * the out of range date will be returned (`onChange` is not called in this case).
|
60 | */
|
61 | onError?: (errorDate: Date) => void;
|
62 | /**
|
63 | * Props to pass to the `Popover`.
|
64 | * Note that `content`, `autoFocus`, and `enforceFocus` cannot be changed.
|
65 | */
|
66 | popoverProps?: Partial<IPopoverProps> & object;
|
67 | /**
|
68 | * Element to render on right side of input.
|
69 | */
|
70 | rightElement?: JSX.Element;
|
71 | /**
|
72 | * Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
|
73 | *
|
74 | * @default false
|
75 | */
|
76 | showActionsBar?: boolean;
|
77 | /**
|
78 | * Whether shortcuts to quickly select a date 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 false
|
84 | */
|
85 | shortcuts?: boolean | DatePickerShortcut[];
|
86 | /**
|
87 | * The currently selected day. If this prop is provided, the component acts in a controlled manner.
|
88 | * To display no date in the input field, pass `null` to the value prop. To display an invalid date error
|
89 | * in the input field, pass `new Date(undefined)` to the value prop.
|
90 | */
|
91 | value?: Date | null;
|
92 | /**
|
93 | * Text for the today button in the date picker action bar.
|
94 | * Passed to `DatePicker` component.
|
95 | *
|
96 | * @default "Today"
|
97 | */
|
98 | todayButtonText?: string;
|
99 | }
|
100 | export interface IDateInputState {
|
101 | value: Date;
|
102 | valueString: string;
|
103 | isInputFocused: boolean;
|
104 | isOpen: boolean;
|
105 | selectedShortcutIndex?: number;
|
106 | }
|
107 | export declare class DateInput extends AbstractPureComponent2<DateInputProps, IDateInputState> {
|
108 | static displayName: string;
|
109 | static defaultProps: Partial<DateInputProps>;
|
110 | state: IDateInputState;
|
111 | inputElement: HTMLInputElement | null;
|
112 | popoverContentElement: HTMLDivElement | null;
|
113 | private handleInputRef;
|
114 | private handlePopoverContentRef;
|
115 | render(): JSX.Element;
|
116 | componentDidUpdate(prevProps: DateInputProps, prevState: IDateInputState): void;
|
117 | private isDateInRange;
|
118 | private handleClosePopover;
|
119 | private handleDateChange;
|
120 | private hasMonthChanged;
|
121 | private hasTimeChanged;
|
122 | private handleInputFocus;
|
123 | private handleInputClick;
|
124 | private handleInputChange;
|
125 | private handleInputBlur;
|
126 | private handleInputKeyDown;
|
127 | private getKeyboardFocusableElements;
|
128 | private handleStartFocusBoundaryFocusIn;
|
129 | private handleEndFocusBoundaryFocusIn;
|
130 | private getRelatedTarget;
|
131 | private handleShortcutChange;
|
132 | /** safe wrapper around invoking input props event handler (prop defaults to undefined) */
|
133 | private safeInvokeInputProp;
|
134 | private parseDate;
|
135 | private formatDate;
|
136 | }
|