1 | /// <reference types="react" />
|
2 | import { AbstractPureComponent2, InputGroupProps2, IPopoverProps, Props } from "@blueprintjs/core";
|
3 | import { DateFormatProps } from "./dateFormat";
|
4 | import { DatePickerBaseProps } from "./datePickerCore";
|
5 | import { DatePickerShortcut } from "./shortcuts";
|
6 | export declare type DateInputProps = IDateInputProps;
|
7 | /** @deprecated use DateInputProps */
|
8 | export 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 | }
|
102 | export 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 | */
|
115 | export 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 | }
|