| 1 | import * as React from "react";
|
| 2 | import { type InputGroupProps, type Props } from "@blueprintjs/core";
|
| 3 | import { type DateFormatProps, type DatePickerBaseProps } from "../../common";
|
| 4 | import type { DatetimePopoverProps } from "../../common/datetimePopoverProps";
|
| 5 | import type { DatePickerShortcut } from "../shortcuts/shortcuts";
|
| 6 | export interface DateInputProps extends DatePickerBaseProps, DateFormatProps, DatetimePopoverProps, Props {
|
| 7 | /**
|
| 8 | * Allows the user to clear the selection by clicking the currently selected day.
|
| 9 | * Passed to `DatePicker` component.
|
| 10 | *
|
| 11 | * @default true
|
| 12 | */
|
| 13 | canClearSelection?: boolean;
|
| 14 | /**
|
| 15 | * Text for the reset button in the date picker action bar.
|
| 16 | * Passed to `DatePicker` component.
|
| 17 | *
|
| 18 | * @default "Clear"
|
| 19 | */
|
| 20 | clearButtonText?: string;
|
| 21 | /**
|
| 22 | * Whether the calendar popover should close when a date is selected.
|
| 23 | *
|
| 24 | * @default true
|
| 25 | */
|
| 26 | closeOnSelection?: boolean;
|
| 27 | /**
|
| 28 | * The default timezone selected. Defaults to the user's local timezone.
|
| 29 | *
|
| 30 | * Mutually exclusive with `timezone` prop.
|
| 31 | *
|
| 32 | * @see https://www.iana.org/time-zones
|
| 33 | */
|
| 34 | defaultTimezone?: string;
|
| 35 | /**
|
| 36 | * Whether to disable the timezone select.
|
| 37 | *
|
| 38 | * @default false
|
| 39 | */
|
| 40 | disableTimezoneSelect?: boolean;
|
| 41 | /**
|
| 42 | * The default date to be used in the component when uncontrolled, represented as an ISO string.
|
| 43 | */
|
| 44 | defaultValue?: string;
|
| 45 | /**
|
| 46 | * Whether the date input is non-interactive.
|
| 47 | *
|
| 48 | * @default false
|
| 49 | */
|
| 50 | disabled?: boolean;
|
| 51 | /**
|
| 52 | * Whether the component should take up the full width of its container.
|
| 53 | */
|
| 54 | fill?: boolean;
|
| 55 | /**
|
| 56 | * Props to pass to the [InputGroup component](#core/components/input-group).
|
| 57 | *
|
| 58 | * Some properties are unavailable:
|
| 59 | * - `inputProps.value`: use `value` instead
|
| 60 | * - `inputProps.disabled`: use `disabled` instead
|
| 61 | * - `inputProps.type`: cannot be customized, always set to "text"
|
| 62 | *
|
| 63 | * Note that `inputProps.tagName` will override `popoverProps.targetTagName`.
|
| 64 | */
|
| 65 | inputProps?: Partial<Omit<InputGroupProps, "disabled" | "type" | "value">>;
|
| 66 | /**
|
| 67 | * Callback invoked whenever the date or timezone has changed.
|
| 68 | *
|
| 69 | * @param newDate ISO string or `null` (if the date is invalid or text input has been cleared)
|
| 70 | * @param isUserChange `true` if the user clicked on a date in the calendar, changed the input value,
|
| 71 | * or cleared the selection; `false` if the date was changed by changing the month or year.
|
| 72 | */
|
| 73 | onChange?: (newDate: string | null, isUserChange: boolean) => void;
|
| 74 | /**
|
| 75 | * Called when the user finishes typing in a new date and the date causes an error state.
|
| 76 | * If the date is invalid, `new Date(undefined)` will be returned. If the date is out of range,
|
| 77 | * the out of range date will be returned (`onChange` is not called in this case).
|
| 78 | */
|
| 79 | onError?: (errorDate: Date) => void;
|
| 80 | /**
|
| 81 | * Callback invoked when the user selects a timezone.
|
| 82 | *
|
| 83 | * @param timezone the new timezone's IANA code
|
| 84 | */
|
| 85 | onTimezoneChange?: (timezone: string) => void;
|
| 86 | /**
|
| 87 | * Element to render on right side of input.
|
| 88 | */
|
| 89 | rightElement?: React.JSX.Element;
|
| 90 | /**
|
| 91 | * Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
|
| 92 | *
|
| 93 | * @default false
|
| 94 | */
|
| 95 | showActionsBar?: boolean;
|
| 96 | /**
|
| 97 | * Whether to show the timezone select dropdown on the right side of the input.
|
| 98 | * If `timePrecision` is undefined, this will always be false.
|
| 99 | *
|
| 100 | * @default false
|
| 101 | */
|
| 102 | showTimezoneSelect?: boolean;
|
| 103 | /**
|
| 104 | * Whether shortcuts to quickly select a date are displayed or not.
|
| 105 | * If `true`, preset shortcuts will be displayed.
|
| 106 | * If `false`, no shortcuts will be displayed.
|
| 107 | * If an array is provided, the custom shortcuts will be displayed.
|
| 108 | *
|
| 109 | * @default false
|
| 110 | */
|
| 111 | shortcuts?: boolean | DatePickerShortcut[];
|
| 112 | /**
|
| 113 | * The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".
|
| 114 | *
|
| 115 | * If you set this prop, the TimezoneSelect will behave in a controlled manner and you are responsible
|
| 116 | * for updating this value using the `onTimezoneChange` callback.
|
| 117 | *
|
| 118 | * Mutually exclusive with `defaultTimezone` prop.
|
| 119 | *
|
| 120 | * @see https://www.iana.org/time-zones
|
| 121 | */
|
| 122 | timezone?: string;
|
| 123 | /**
|
| 124 | * Text for the today button in the date picker action bar.
|
| 125 | * Passed to `DatePicker` component.
|
| 126 | *
|
| 127 | * @default "Today"
|
| 128 | */
|
| 129 | todayButtonText?: string;
|
| 130 | /** An ISO string representing the selected time. */
|
| 131 | value?: string | null;
|
| 132 | }
|
| 133 | /**
|
| 134 | * Date input component.
|
| 135 | *
|
| 136 | * @see https://blueprintjs.com/docs/#datetime/date-input
|
| 137 | * @deprecated use `{ DateInput3 } from "@blueprintjs/datetime2"` instead
|
| 138 | */
|
| 139 | export declare const DateInput: React.FC<DateInputProps>;
|