@preamp/datepicker/lib/components/datepickers/DateRangePicker/DateRangePicker.d.ts

VideoAmp's Component library

import * as React from 'react';
import { AfterModifier, BeforeAfterModifier, BeforeModifier, DayModifiers, DayPickerProps, DaysOfWeekModifier, FunctionModifier, Modifier, NavbarElementProps, RangeModifier } from 'react-day-picker/types';
import { CustomDayElementComponent, CustomNavBarComponent } from '../../../custom';
import { DateRange } from '../../../types';
export interface DateRangePickerProps extends DayPickerProps {
    /** Unique identifier used for targeting the component */
    dataUI?: string;
    /** Disable days by modifier { before: Date, after: Date } */
    disabledDays?: Date | RangeModifier | BeforeModifier | AfterModifier | BeforeAfterModifier | DaysOfWeekModifier | FunctionModifier | Modifier[];
    /** ID of the component */
    id?: string;
    /** Optional field */
    isOptional?: boolean;
    /** Field Label */
    label?: string;
    /** A React Element/Component to render the navigation bar.
     * navProps include (month: Date, previousMonth: Date, nextMonth: Date, onPreviousClick: () ⇒ void, onNextClick: () ⇒ void)
     */
    navbarElement?: React.ReactElement<Partial<NavbarElementProps>> | React.ComponentClass<NavbarElementProps> | React.FunctionComponent<NavbarElementProps>;
    /** Selected DateRange { from: Date, to: Date} */
    selectedDates?: DateRange;
    /** Shows confirm and cancel date actions */
    showActionsBar?: boolean;
    /** Optional style to apply - inline styles should NOT be used unless absolutely necessary. */
    style?: React.CSSProperties;
    /** Event handler when the user clicks on a day cell. */
    handleDayClick?(dates: DateRange, day: Date, modifiers: DayModifiers, event?: React.MouseEvent): void;
    /** Event handler when user clicks on Confirm Dates action */
    onConfirmDates?(dates: DateRange): void;
    /** Event handler when user clicks on Cancel Dates action that clears selected dates */
    onClearSelectedDates?(dates: DateRange): void;
    /** Returns the content of a day cell. */
    renderDay?(date: Date, modifiers: DayModifiers): React.ReactNode;
}
interface DateRangePickerState {
    from: Date;
    to: Date;
    enteredTo?: Date;
    resetDateRange?: boolean;
}
/**
 * A basic date range picker.
 */
export declare class DateRangePicker extends React.PureComponent<DateRangePickerProps, DateRangePickerState> {
    static defaultProps: DateRangePickerProps;
    state: DateRangePickerState;
    componentDidMount(): void;
    componentDidUpdate(prevProps: DateRangePickerProps): void;
    returnDateRange: (day: Date, prevFrom: Date, prevTo: Date) => DateRange;
    onHandleDayClick: (day: Date, modifiers: DayModifiers, event: React.MouseEvent<Element, MouseEvent>) => void;
    onConfirmDates: () => void;
    onClearSelectedDates: () => void;
    handleDayMouseEnter: (day: Date) => void;
    renderActionsWrapper: () => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
    returnCustomDay: CustomDayElementComponent;
    returnCustomNavBar: CustomNavBarComponent;
    render(): React.ReactElement<any>;
}
export {};