@preamp/datepicker/lib/components/inputs/DateRangeInput/DateRangeInput.d.ts

VideoAmp's Component library

import * as React from 'react';
import { AfterModifier, BeforeAfterModifier, BeforeModifier, ClassNames, DayModifiers, DayPickerProps, DaysOfWeekModifier, FunctionModifier, Modifier, NavbarElementProps, RangeModifier } from 'react-day-picker/types';
import { DateRange } from '../../../types';
declare type DisabledDays = AfterModifier | BeforeAfterModifier | BeforeModifier | Date | DaysOfWeekModifier | FunctionModifier | Modifier[] | RangeModifier;
export interface DateRangeInputProps {
    /** Optional class name to apply to a component */
    className?: string;
    /** @deprecated Use inside of dayPickerProps instead */
    classNames?: ClassNames;
    /** A ReactElement/Component to render the input field.
     * The component must support theonChange, onFocus, onKeyUp, onClick and onBlutyarbr props.
     */
    component?: string | React.ReactNode;
    /** Unique identifier used for targeting the component */
    dataUI?: string;
    /** An object that accepts any DatePicker props The full list of props are here: http://react-day-picker.js.org/api/DayPicker */
    dateRangePickerProps?: DayPickerProps;
    /** Disable days by modifier { before: Date, after: Date }   */
    disabledDays?: DisabledDays;
    /** ID of the end date input */
    endInputId?: string;
    /** Set focus to the date range input when component mounts */
    focusOnMount?: boolean;
    /** Displayed date format of input text value */
    format?: string;
    /** @deprecated Use inside of dayPickerProps instead */
    fromMonth?: Date;
    /** Set width to container width */
    isFullWidth?: boolean;
    /** Whether or not the error state should show */
    hasError?: boolean;
    /** ID of the component */
    id?: string;
    /** @deprecated Use inside of dayPickerProps instead */
    initialMonth?: Date;
    /** Boolean to display calendars inline or not */
    inline?: boolean;
    /** @deprecated Use label instead */
    inputLabel?: string;
    /** Optional field */
    isOptional?: boolean;
    /** Field Label */
    label?: string;
    /** This adds the label within the border box of the component */
    inlineLabel?: boolean;
    /** A React Element/Component to render the navigation bar.
     * navProps include (month: Date, previousMonth: Date, nextMonth: Date, onPreviousClick: () ⇒ void, onNextClick: () ⇒ void)
     */
    navbarElement?: React.ComponentClass<NavbarElementProps> | React.ReactElement<Partial<NavbarElementProps>> | React.SFC<NavbarElementProps>;
    /** Displayed string when there is no input text value */
    placeholder?: string;
    /** Given selected Dates for the Date Range input */
    selectedDates?: DateRange;
    /** Shows confirm and cancel date actions */
    showActionsBar?: boolean;
    /** ID of the start date input */
    startInputId?: string;
    /** @deprecated Use inside of dayPickerProps instead */
    toMonth?: Date;
    /** ID of the error tooltip */
    tooltipId?: string;
    /** Message to display in tooltip */
    tooltipMessage?: string;
    /** Error message to display to the user */
    errorMessage?: string;
    /** Custom function to format date date object into string (default uses format method from date-fns) */
    formatDate?(date: Date, format?: string, locale?: Record<string, any>): string;
    /** Event handler when overlay is blurred */
    onBlurOverlay?(showOverlay?: boolean, dates?: DateRange): void;
    /** Event handler when overlay is open */
    onOpenOverlay?(showOverlay?: boolean): void;
    /** Event handler when user clicks on Cancel Dates action that clears selected dates */
    onClearSelectedDates?(dates?: DateRange): void;
    /** Event handler when user clicks on Confirm Dates action */
    onConfirmDates?(dates?: DateRange): void;
    /** Event handler when the end input date is changed */
    onEndChange?(dates?: DateRange, event?: React.ChangeEvent): void;
    /** Event handler when the end input date is focused */
    onEndFocus?(dates?: DateRange, event?: React.FocusEvent): void;
    /** Event handler when the user clicks on a day cell. */
    onHandleDayClick?(dates?: DateRange, day?: Date, modifiers?: DayModifiers, event?: React.MouseEvent): void;
    /** Event handler when the first input date is changed */
    onStartChange?(dates?: DateRange, event?: React.ChangeEvent): void;
    /** Event handler when the start input date is focused */
    onStartFocus?(dates?: DateRange, event?: React.FocusEvent): void;
    /** Custom function to parse date string into Date (default uses parse method from date-fns) */
    parseDate?(dateString: string): Date;
}
interface DateRangeInputState {
    cachedDates?: DateRange;
    endInput?: string;
    enteredTo?: Date;
    errorMessage?: string;
    hasError?: boolean;
    month?: Date;
    selectedDates?: DateRange;
    showOverlay?: boolean;
    startInput?: string;
}
export declare class DateRangeInput extends React.PureComponent<DateRangeInputProps, DateRangeInputState> {
    static defaultProps: DateRangeInputProps;
    initializeMonthState: () => Date;
    initializeselectedDates: () => DateRange;
    state: DateRangeInputState;
    areSelectedDaysWithinDisabledRange: (disabledDays: Date | RangeModifier | BeforeModifier | AfterModifier | BeforeAfterModifier | DaysOfWeekModifier | FunctionModifier | Modifier[], fromDate: Date, to: Date) => boolean;
    handleDateRangeValues: (selectedDates: DateRange) => void;
    calculateDateRange: (selectedDates: DateRange, startInput: string, endInput: string) => DateRange;
    componentDidMount(): void;
    componentDidUpdate(prevProps: DateRangeInputProps): void;
    onHandleDayClick: (updatedSelectedDates: DateRange, day: Date, modifiers: DayModifiers, event: React.MouseEvent<Element, MouseEvent>) => void;
    onStartFocus: (event: React.FocusEvent<any>) => void;
    onStartChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onEndChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onEndFocus: (event: React.FocusEvent<any>) => void;
    onBlurOverlay: (event: React.FocusEvent<Element>) => void;
    onConfirmDates: (confirmedDates: DateRange) => void;
    onClearSelectedDates: (clearedDates: DateRange) => void;
    showOverlay: () => void;
    render(): React.ReactElement<any>;
}
export {};