pagamio-frontend-commons-lib/lib/components/ui/RangeDatePicker.d.ts

Pagamio library for Frontend reusable components like the form engine and table container

import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
import React from 'react';
export interface RangeDatePickerProps {
    /**
     * Selected date range
     */
    dateRange?: {
        startDate: Date;
        endDate: Date;
        key?: string;
    };
    /**
     * Handler for date range changes
     */
    onChange?: (range: {
        startDate: Date;
        endDate: Date;
        key: string;
    }) => void;
    /**
     * Minimum selectable date
     */
    minDate?: Date;
    /**
     * Maximum selectable date
     */
    maxDate?: Date;
    /**
     * CSS classes to apply to the container
     */
    className?: string;
    /**
     * Number of months to display
     * @default 2
     */
    months?: number;
    /**
     * Direction to display months ('horizontal' or 'vertical')
     * @default 'horizontal'
     */
    direction?: 'horizontal' | 'vertical';
    /**
     * Whether to display preview of selected range
     * @default true
     */
    showPreview?: boolean;
    /**
     * Initial key for the range
     * @default 'selection'
     */
    rangeKey?: string;
}
/**
 * A flexible date range picker component using react-date-range
 *
 * @see For more customization options, refer to:
 * - https://hypeserver.github.io/react-date-range/
 * - https://www.npmjs.com/package/react-date-range
 *
 * @example
 * ```tsx
 * const [selectedRange, setSelectedRange] = useState({
 *   startDate: startOfDay(new Date()),
 *   endDate: endOfDay(addDays(new Date(), 3)),
 * });
 *
 * return (
 *   <RangeDatePicker
 *     dateRange={selectedRange}
 *     onChange={setSelectedRange}
 *     showPreview={true}
 *   />
 * )
 * ```
 */
declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
export default RangeDatePicker;