@mantine/dates/lib/components/InlineDateTimePicker/InlineDateTimePicker.d.ts

Calendars, date and time pickers based on Mantine components

import { ActionIconProps, BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
import { DatePickerType, DateStringValue } from '../../types';
import { DatePickerBaseProps, DatePickerStylesNames } from '../DatePicker';
import { TimePickerProps } from '../TimePicker/TimePicker';
export type InlineDateTimePickerStylesNames = 'root' | 'timeWrapper' | 'timeInput' | 'submitButton' | 'rangeTimeWrapper' | 'rangeTimeInput' | 'rangeInfo' | DatePickerStylesNames;
export interface InlineDateTimePickerProps<Type extends DatePickerType = 'default'> extends BoxProps, DatePickerBaseProps<Type>, StylesApiProps<InlineDateTimePickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
    /** Default time value in `HH:mm` or `HH:mm:ss` format. Assigned to time when date is selected. */
    defaultTimeValue?: string;
    /** Props passed down to `TimePicker` component */
    timePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;
    /** Props passed down to the end time `TimePicker` component in range mode */
    endTimePickerProps?: Omit<TimePickerProps, 'defaultValue' | 'value'>;
    /** Props passed down to the submit button */
    submitButtonProps?: ActionIconProps & React.ComponentProps<'button'>;
    /** Determines whether the seconds input should be displayed @default false */
    withSeconds?: boolean;
    /** Called when the submit button is clicked */
    onSubmit?: () => void;
    /** `dayjs` format for range display, or a function that receives the value as a `YYYY-MM-DD HH:mm:ss` string and returns the formatted value @default "DD/MM/YYYY HH:mm" */
    valueFormat?: string | ((date: DateStringValue) => string);
    /** Separator between range values */
    labelSeparator?: string;
    /** Component size @default 'sm' */
    size?: MantineSize;
    /** Min date */
    minDate?: DateStringValue | Date;
    /** Max date */
    maxDate?: DateStringValue | Date;
    /** @internal Adds data-mantine-stop-propagation to interactive elements */
    __stopPropagation?: boolean;
    /** @internal Overrides the static selector used for class names */
    __staticSelector?: string;
    /** @internal Called when Enter is pressed in a time input */
    __onEnter?: () => void;
    /** @internal Forwarded to DatePicker for preset handling */
    __onPresetSelect?: (val: any) => void;
}
export type InlineDateTimePickerFactory = Factory<{
    props: InlineDateTimePickerProps;
    ref: HTMLDivElement;
    stylesNames: InlineDateTimePickerStylesNames;
    signature: <Type extends DatePickerType = 'default'>(props: InlineDateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLDivElement>;
    }) => React.JSX.Element;
}>;
export declare const InlineDateTimePicker: (<Type extends DatePickerType = "default">(props: InlineDateTimePickerProps<Type> & {
    ref?: React.Ref<HTMLDivElement>;
}) => React.JSX.Element) & import("@mantine/core").ThemeExtend<{
    props: InlineDateTimePickerProps;
    ref: HTMLDivElement;
    stylesNames: InlineDateTimePickerStylesNames;
    signature: <Type extends DatePickerType = "default">(props: InlineDateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLDivElement>;
    }) => React.JSX.Element;
}> & import("@mantine/core").ComponentClasses<{
    props: InlineDateTimePickerProps;
    ref: HTMLDivElement;
    stylesNames: InlineDateTimePickerStylesNames;
    signature: <Type extends DatePickerType = "default">(props: InlineDateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLDivElement>;
    }) => React.JSX.Element;
}> & Record<string, never> & import("@mantine/core").FactoryComponentWithProps<{
    props: InlineDateTimePickerProps;
    ref: HTMLDivElement;
    stylesNames: InlineDateTimePickerStylesNames;
    signature: <Type extends DatePickerType = "default">(props: InlineDateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLDivElement>;
    }) => React.JSX.Element;
}> & {
    displayName?: string;
};