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

Calendars, date and time pickers based on Mantine components

import { ActionIconProps, BoxProps, Factory, InputVariant, StylesApiProps } from '@mantine/core';
import { CalendarLevel, DatePickerType, DatePickerValue, DateStringValue } from '../../types';
import { CalendarBaseProps, CalendarSettings, CalendarStylesNames } from '../Calendar';
import { DatePickerPreset } from '../DatePicker';
import { InlineDateTimePickerStylesNames } from '../InlineDateTimePicker/InlineDateTimePicker';
import { DateInputSharedProps, PickerInputBaseStylesNames } from '../PickerInputBase';
import { TimePickerProps } from '../TimePicker/TimePicker';
export type DateTimePickerStylesNames = InlineDateTimePickerStylesNames | 'placeholder' | PickerInputBaseStylesNames | CalendarStylesNames;
export interface DateTimePickerProps<Type extends DatePickerType = 'default'> extends BoxProps, Omit<DateInputSharedProps, 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'>, CalendarBaseProps, Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>, StylesApiProps<DateTimePickerFactory> {
    /** Picker type: range or default @default 'default' */
    type?: Type;
    /** `dayjs` format for input value, 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);
    /** Controlled component value */
    value?: DatePickerValue<Type>;
    /** Uncontrolled component default value */
    defaultValue?: DatePickerValue<Type>;
    /** Called when value changes */
    onChange?: (value: DatePickerValue<Type, DateStringValue>) => void;
    /** 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;
    /** Max level that user can go up to @default 'decade' */
    maxLevel?: CalendarLevel;
    /** Presets values */
    presets?: DatePickerPreset<Type>[];
    /** Determines whether a single day can be selected as range, applicable only when type="range" */
    allowSingleDateInRange?: Type extends 'range' ? boolean : never;
    /** Separator between range values */
    labelSeparator?: string;
}
export type DateTimePickerFactory = Factory<{
    props: DateTimePickerProps;
    ref: HTMLButtonElement;
    stylesNames: DateTimePickerStylesNames;
    variant: InputVariant;
    signature: <Type extends DatePickerType = 'default'>(props: DateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLButtonElement>;
    }) => React.JSX.Element;
}>;
export declare const DateTimePicker: (<Type extends DatePickerType = "default">(props: DateTimePickerProps<Type> & {
    ref?: React.Ref<HTMLButtonElement>;
}) => React.JSX.Element) & import("@mantine/core").ThemeExtend<{
    props: DateTimePickerProps;
    ref: HTMLButtonElement;
    stylesNames: DateTimePickerStylesNames;
    variant: InputVariant;
    signature: <Type extends DatePickerType = "default">(props: DateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLButtonElement>;
    }) => React.JSX.Element;
}> & import("@mantine/core").ComponentClasses<{
    props: DateTimePickerProps;
    ref: HTMLButtonElement;
    stylesNames: DateTimePickerStylesNames;
    variant: InputVariant;
    signature: <Type extends DatePickerType = "default">(props: DateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLButtonElement>;
    }) => React.JSX.Element;
}> & Record<string, never> & import("@mantine/core").FactoryComponentWithProps<{
    props: DateTimePickerProps;
    ref: HTMLButtonElement;
    stylesNames: DateTimePickerStylesNames;
    variant: InputVariant;
    signature: <Type extends DatePickerType = "default">(props: DateTimePickerProps<Type> & {
        ref?: React.Ref<HTMLButtonElement>;
    }) => React.JSX.Element;
}> & {
    displayName?: string;
};