@cbinsights/fds/lib/components/DateInput/index.d.ts

Form: A design system by CB Insights

import { MutableRefObject } from 'react';
import { PopoverProps } from 'components/Popover';
export declare const DATE_FORMAT_MAP: {
    readonly MDY: "MM/DD/YYYY";
    readonly DMY: "DD/MM/YYYY";
    readonly YMD: "YYYY/MM/DD";
};
export declare type DateFormat = keyof typeof DATE_FORMAT_MAP;
export interface DateInputProps {
    /**
     * Change callback for date selection. This is called when a valid
     * date has been selected in the picker or entered into the input.
     *
     * Called with the `Date` object of the selected date.
     * Called with `null` when the date has been cleared.
     */
    onDateChange?: (d?: Date | null) => void;
    /** Change callback for `input` element. */
    onInputChange?: (s?: string) => void;
    /** Number of years into the past to show in the year dropdown */
    pastYears?: number;
    /** Number of years into the future to show in the year dropdown */
    futureYears?: number;
    /**
     * Default date selection. Accepts the following:
     * - (DEPRECATED) a native `Date` object
     * - a valid date string
     */
    defaultDate?: string | Date;
    /** Lower bound of selectable date range */
    minDate?: Date;
    /** Upper bound of selectable date range */
    maxDate?: Date;
    /** String representing the order of date components (M=month, Y=year, D=day) */
    dateFormat?: DateFormat;
    /** Label for input */
    label?: string;
    /** Controls where the label renders */
    labelPosition?: 'top' | 'left';
    /** Specify width of label (useful for when label is positioned to left */
    labelWidth?: string;
    /** Ref to apply to `input` element */
    inputRef?: MutableRefObject<HTMLInputElement>;
    /** Ref to apply to popover content element */
    popoverRef?: MutableRefObject<HTMLDivElement>;
    /**
     * Object accepting any valid prop from `Popover` except for `trigger` and `ref`.
     * To apply a `ref` to the popover element, use the `popoverRef` prop.
     */
    popoverProps?: Omit<PopoverProps, 'ref' | 'trigger'>;
    /** Control whether input has error styling */
    hasError?: boolean;
    /** Displays as red error text below input */
    errorText?: string;
}
/**
 * @param {Object} props react props
 * @returns {ReactElement}
 */
declare const DateInput: ({ futureYears, pastYears, dateFormat, popoverProps, inputRef, popoverRef, defaultDate: defaultDateInput, onDateChange, onInputChange, label, labelPosition, labelWidth, minDate, maxDate, hasError, errorText, ...rest }: DateInputProps) => JSX.Element;
export default DateInput;