UNPKG

@mantine/dates

Version:

Calendars, date and time pickers based on Mantine components

42 lines (41 loc) 2.29 kB
import { ActionIconProps, BoxProps, Factory, InputVariant, StylesApiProps } from '@mantine/core'; import { CalendarLevel, DateStringValue, DateValue } from '../../types'; import { CalendarBaseProps, CalendarSettings, CalendarStylesNames } from '../Calendar'; import { DatePickerPreset } from '../DatePicker'; import { DateInputSharedProps, PickerInputBaseStylesNames } from '../PickerInputBase'; import { TimePickerProps } from '../TimePicker/TimePicker'; export type DateTimePickerStylesNames = 'timeWrapper' | 'timeInput' | 'submitButton' | PickerInputBaseStylesNames | CalendarStylesNames; export interface DateTimePickerProps extends BoxProps, Omit<DateInputSharedProps, 'classNames' | 'styles' | 'closeOnChange' | 'size' | 'valueFormatter'>, CalendarBaseProps, Omit<CalendarSettings, 'onYearMouseEnter' | 'onMonthMouseEnter' | 'hasNextLevel'>, StylesApiProps<DateTimePickerFactory> { /** `dayjs` format for input value @default `"DD/MM/YYYY HH:mm" */ valueFormat?: string; /** Controlled component value */ value?: DateValue; /** Uncontrolled component default value */ defaultValue?: DateValue; /** Called when value changes */ onChange?: (value: DateStringValue | null) => 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 submit button */ submitButtonProps?: ActionIconProps & React.ComponentPropsWithoutRef<'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<'default'>[]; } export type DateTimePickerFactory = Factory<{ props: DateTimePickerProps; ref: HTMLButtonElement; stylesNames: DateTimePickerStylesNames; variant: InputVariant; }>; export declare const DateTimePicker: import("@mantine/core").MantineComponent<{ props: DateTimePickerProps; ref: HTMLButtonElement; stylesNames: DateTimePickerStylesNames; variant: InputVariant; }>;