@activecollab/components/dist/esm/components/SelectDate/SelectDate.d.ts

ActiveCollab Components

import { ElementType, FC, CSSProperties } from "react";
import { DayModifiers } from "react-day-picker";
import { Placement } from "@popperjs/core";
import { DaysToModify } from "./types";
type TriggerStringType = "text" | "icon" | "inline";
type TriggerFunctionType = (text: string) => JSX.Element;
export interface ISelectDate {
    /** Change mode - can be atomic and instant */
    changeMode?: "atomic" | "instant";
    /** Trigger - can be text, icon, inline, or custom render function */
    trigger?: TriggerStringType | TriggerFunctionType;
    /** Save button text */
    saveButtonText?: string;
    /** Cancel button text */
    cancelButtonText?: string;
    /** Clear button text */
    clearButtonText?: string;
    /** Modal header text */
    modalHeaderText?: string;
    /** Modal cancel button text */
    modalCancelBtnText?: string;
    /** Modal discard button text */
    modalDiscardBtnText?: string;
    /** Modal discard message text */
    modalDiscardMessage?: string;
    /** Tooltip text */
    tooltipText?: string;
    /** Called when day is clicked */
    onDayClick?: (day: Date, modifiers: DayModifiers) => void;
    /** Save changes in atomic mode */
    onSave?: (dates?: {
        from: number;
        to: number;
    }) => void;
    /** On cancel closes datepicker or opens disard modal in atomic mode */
    onCancel?: () => void;
    /** Clear dates when they are not required */
    onClear?: () => void;
    /** Use this callback to get is picker visible */
    onToggleDatePicker?: (value: boolean) => void;
    /** Set selected day or days */
    selectedDays?: {
        from: number;
        to: number;
    };
    /** Set month */
    defaultMonth?: Date;
    /** Set selection range */
    selectionMode?: string;
    /** Set is date required */
    required?: boolean;
    /** Set default show on date picker (only for text and icon mode) */
    defaultShowDatePicker?: boolean;
    /** Long date format (Always show year) */
    longDateFormat?: boolean;
    /** Set is date required */
    defaultTimezoneAware?: boolean;
    /** Set first day of week */
    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
    /** One of icon types */
    icon?: ElementType;
    /** Default Label text */
    defaultLabelText?: string;
    /** Date format */
    dateFormat?: string;
    /** Menu classes */
    menuClassName?: string;
    /** Target element classes */
    targetClassName?: string;
    /** Target element text classes */
    targetTextClassName?: string;
    /** Target element icon classes */
    targetIconClassName?: string;
    /** Background style for clickable element after the menu is open (opacity, color, etc...) */
    backgroundElementClass?: string;
    /** Days to modify */
    daysToModify?: DaysToModify[];
    /** Array of weekend days */
    weekends?: number[];
    /** Weekend label */
    weekendLabel?: string;
    /** Array of nonworking week days */
    nonWorkingDaysOfWeek?: number[];
    /** Nonworking week days label */
    nonWorkingDaysOfWeekLabel?: string;
    /** Allows weekends to be selected */
    weekendIsSelectable?: boolean;
    /** Popper Tooltip style */
    popperTooltipStyle?: CSSProperties;
    /** Popper Tooltip class name*/
    popperTooltipClassName?: string;
    /** Popper class name*/
    popperClassName?: string;
    /** Position of selectDate menu */
    position?: Placement;
    /** Disable days before specified date */
    disableDaysBefore?: Date;
}
export declare const SelectDate: FC<ISelectDate>;
export {};
//# sourceMappingURL=SelectDate.d.ts.map