@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
62 lines • 2.12 kB
TypeScript
import { BoxProps, Factory, PopoverProps, StylesApiProps } from '@mantine/core';
import { DatesRangeValue } from '@mantine/dates';
import dayjs from 'dayjs';
import { DateRangePickerInlineCalendarProps } from './DateRangePickerInlineCalendar';
export type DateRangePickerStylesNames = 'input';
export interface DateRangePickerProps extends BoxProps, Pick<DateRangePickerInlineCalendarProps, 'presets' | 'rangeCalendarProps' | 'startProps' | 'endProps'>, Pick<PopoverProps, 'opened' | 'defaultOpened'>, StylesApiProps<DateRangePickerFactory> {
/**
* Called when the target input is clicked
*/
onClick?(): void;
/**
* Function called when the cancel button is clicked.
*/
onCancel?(): void;
/**
* Function called when the date range value changes.
*/
onChange?(dates: DatesRangeValue<string>): void;
/**
* Called when the popover opened state changes.
*/
onOpenedChange?(opened: boolean): void;
/**
* Optional formatter function to format the date value.
* Receives the date prop and should return a string.
* @default (time) => dayjs(time).format('MMM D, YYYY')
*/
formatter?: (time: dayjs.ConfigType) => string;
/**
* The placeholder label to display when no date range is selected.
*
* @default "Select date range"
*/
placeholder?: string;
/**
* Default value for uncontrolled input
*/
defaultValue?: DatesRangeValue<string>;
/**
* Value for controlled input
*/
value?: DatesRangeValue<string>;
/**
* Sync the selected dates to URL query parameters
*/
syncWithUrl?: boolean;
/**
* Error message to display.
*/
error?: string;
}
export type DateRangePickerFactory = Factory<{
props: DateRangePickerProps;
ref: HTMLButtonElement;
stylesNames: DateRangePickerStylesNames;
}>;
export declare const DateRangePicker: import("@mantine/core").MantineComponent<{
props: DateRangePickerProps;
ref: HTMLButtonElement;
stylesNames: DateRangePickerStylesNames;
}>;
//# sourceMappingURL=DateRangePicker.d.ts.map