UNPKG

5.24 kBTypeScriptView Raw
1/// <reference types="react" />
2import { AbstractPureComponent2, InputGroupProps2, IPopoverProps, Props } from "@blueprintjs/core";
3import { DateFormatProps } from "./dateFormat";
4import { DatePickerBaseProps } from "./datePickerCore";
5import { DatePickerShortcut } from "./shortcuts";
6export declare type DateInputProps = IDateInputProps;
7/** @deprecated use DateInputProps */
8export interface IDateInputProps extends DatePickerBaseProps, 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.
52 *
53 * @param newDate Date or `null` (if the date is invalid or text input has been cleared)
54 * @param isUserChange `true` if the user clicked on a date in the calendar, changed the input value,
55 * or cleared the selection; `false` if the date was changed by changing the month or year.
56 */
57 onChange?: (selectedDate: Date | null, isUserChange: boolean) => void;
58 /**
59 * Called when the user finishes typing in a new date and the date causes an error state.
60 * If the date is invalid, `new Date(undefined)` will be returned. If the date is out of range,
61 * the out of range date will be returned (`onChange` is not called in this case).
62 */
63 onError?: (errorDate: Date) => void;
64 /**
65 * Props to pass to the `Popover`.
66 * Note that `content`, `autoFocus`, and `enforceFocus` cannot be changed.
67 */
68 popoverProps?: Partial<IPopoverProps> & object;
69 /**
70 * Element to render on right side of input.
71 */
72 rightElement?: JSX.Element;
73 /**
74 * Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
75 *
76 * @default false
77 */
78 showActionsBar?: boolean;
79 /**
80 * Whether shortcuts to quickly select a date are displayed or not.
81 * If `true`, preset shortcuts will be displayed.
82 * If `false`, no shortcuts will be displayed.
83 * If an array is provided, the custom shortcuts will be displayed.
84 *
85 * @default false
86 */
87 shortcuts?: boolean | DatePickerShortcut[];
88 /**
89 * The currently selected day. If this prop is provided, the component acts in a controlled manner.
90 * To display no date in the input field, pass `null` to the value prop. To display an invalid date error
91 * in the input field, pass `new Date(undefined)` to the value prop.
92 */
93 value?: Date | null;
94 /**
95 * Text for the today button in the date picker action bar.
96 * Passed to `DatePicker` component.
97 *
98 * @default "Today"
99 */
100 todayButtonText?: string;
101}
102export interface IDateInputState {
103 value: Date;
104 valueString: string;
105 isInputFocused: boolean;
106 isOpen: boolean;
107 selectedShortcutIndex?: number;
108}
109/**
110 * Date input component.
111 *
112 * @see https://blueprintjs.com/docs/#datetime/dateinput
113 * @deprecated use { DateInput2 } from "@blueprintjs/datetime2"
114 */
115export declare class DateInput extends AbstractPureComponent2<DateInputProps, IDateInputState> {
116 static displayName: string;
117 static defaultProps: Partial<DateInputProps>;
118 state: IDateInputState;
119 inputElement: HTMLInputElement | null;
120 popoverContentElement: HTMLDivElement | null;
121 private handleInputRef;
122 private handlePopoverContentRef;
123 render(): JSX.Element;
124 componentDidUpdate(prevProps: DateInputProps, prevState: IDateInputState): void;
125 private isDateInRange;
126 private handleClosePopover;
127 private handleDateChange;
128 private hasMonthChanged;
129 private hasTimeChanged;
130 private handleInputFocus;
131 private handleInputClick;
132 private handleInputChange;
133 private handleInputBlur;
134 private handleInputKeyDown;
135 private getKeyboardFocusableElements;
136 private handleStartFocusBoundaryFocusIn;
137 private handleEndFocusBoundaryFocusIn;
138 private getRelatedTarget;
139 private handleShortcutChange;
140 /** safe wrapper around invoking input props event handler (prop defaults to undefined) */
141 private safeInvokeInputProp;
142 private parseDate;
143 private formatDate;
144}