@payfit/unity-components
Version:
69 lines (68 loc) • 2.98 kB
TypeScript
import { CalendarDate } from '@internationalized/date';
import { DateRangePickerProps as AriaDateRangePickerProps } from 'react-aria-components/DateRangePicker';
type DateRange = {
start: CalendarDate;
end: CalendarDate;
};
export interface DateRangePickerProps extends Pick<AriaDateRangePickerProps<CalendarDate>, 'id' | 'firstDayOfWeek' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'> {
/** The currently selected date range */
value?: DateRange | null;
/** The default selected date range (uncontrolled) */
defaultValue?: DateRange | null;
/** The minimum allowed date */
minValue?: CalendarDate;
/** The maximum allowed date */
maxValue?: CalendarDate;
/** Callback fired when the date range value changes */
onChange?: (value: DateRange | null) => void;
/** Callback fired when the clear button is clicked */
onClearButtonPress?: () => void;
/** Callback fired when the picker loses focus */
onBlur?: () => void;
/** Callback fired when the picker gains focus */
onFocus?: () => void;
/** Callback fired when the calendar overlay's open state changes */
onOpenChange?: (isOpen: boolean) => void;
/** Whether the picker is in an invalid state */
isInvalid?: boolean;
/** Whether the picker is in a loading state */
isLoading?: boolean;
/** Whether the picker is disabled */
isDisabled?: boolean;
/** Whether the picker is read-only */
isReadOnly?: boolean;
/** Function to determine if a date should be disabled */
isDateUnavailable?: (date: CalendarDate) => boolean;
/** Whether to force leading zeros for days and months */
shouldForceLeadingZeros?: boolean;
/** Whether to close the calendar after a date range is selected */
shouldCloseOnSelect?: boolean;
/** Whether to open the calendar by default */
defaultOpen?: boolean;
}
/**
* The DateRangePicker component allows users to select a date range either by typing it in directly or choosing from a calendar overlay.
* @param {DateRangePickerProps} props - Props for configuring the DateRangePicker's behavior and appearance
* @see {@link DateRangePickerProps} for all available props
* @example
* ```tsx
* import { DateRangePicker } from '@payfit/unity-components'
* import { CalendarDate } from '@internationalized/date'
*
* function Example() {
* const [range, setRange] = useState<{ start: CalendarDate; end: CalendarDate }>()
*
* return (
* <DateRangePicker
* value={range}
* onChange={setRange}
* minValue={new CalendarDate(2024, 1, 1)}
* />
* )
* }
* ```
* @note
* This component requires `@internationalized/date` as a peer dependency. Make sure to install it in your project: `yarn add @internationalized/date`
*/
declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;
export { DateRangePicker };