@progress/kendo-vue-dateinputs/datetimepicker/DateTimePicker.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { FormComponentProps, FormComponentValidity } from '@progress/kendo-vue-common';
import { DateTimePickerSettings } from './models/main';
import { DateTimeSelectorChangeEvent } from './DateTimeSelector';
import { DateInputChangeEvent } from '..';
import { DateInputFormatPlaceholder } from '../dateinput/models/main';
import { PropType } from 'vue';
import { DateTimePickerFocusEvent, DateTimePickerBlurEvent } from './interfaces/DateTimePickerFocusBlurEvents';
/**
 * The arguments for the `onChange` event of the DateTimePicker.
 */
export interface DateTimePickerChangeEvent {
    event: any;
    value: Date | null;
    show: boolean;
    target: any;
}
/**
 * The arguments for the `open` event of the DateTimePicker.
 */
export interface DateTimePickerOpenEvent {
    component: any;
}
/**
 * The arguments for the `close` event of the DateTimePicker.
 */
export interface DateTimePickerCloseEvent {
    component: any;
}
/**
 * Represents the props of the [Kendo UI for Vue DateTimePicker component]({% slug overview_datetimepicker %}).
 */
export interface DateTimePickerProps extends DateTimePickerSettings, FormComponentProps {
    /**
     * @hidden
     */
    modelValue?: Date;
    /**
     * Sets the default value of the DateTimePicker.
     */
    defaultValue?: Date;
    /**
     * Fires each time the user selects a new value
     */
    onChange?: (event: DateTimePickerChangeEvent) => void;
    /**
     * Specifies the value of the DateTimePicker
     * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-date-value)).
     *
     * > The `value` has to be a valid
     * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
     */
    value?: Date | null;
}
/**
 * @hidden
 */
export interface DateTimePickerComputed {
    [key: string]: any;
    computedValue: Date | null;
    computedShow: boolean;
}
/**
 * @hidden
 */
declare const DateTimePicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    modelValue: {
        type: PropType<Date>;
        default: any;
    };
    defaultShow: {
        type: PropType<boolean>;
        default: boolean;
    };
    defaultValue: {
        type: PropType<Date>;
        default: any;
    };
    disabled: {
        type: PropType<boolean>;
        default: boolean;
    };
    dateInput: {
        type: PropType<any>;
        default: () => any;
    };
    popup: {
        type: PropType<any>;
        default: () => any;
    };
    calendar: {
        type: PropType<any>;
        default: () => any;
    };
    focusedDate: PropType<Date>;
    format: {
        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
        default: () => string | object;
    };
    formatPlaceholder: {
        type: PropType<DateInputFormatPlaceholder>;
        default: () => DateInputFormatPlaceholder;
    };
    rounded: {
        type: PropType<string>;
        validator: (value: string) => boolean;
    };
    fillMode: {
        type: PropType<string>;
        validator: (value: string) => boolean;
    };
    size: {
        type: PropType<"small" | "medium" | "large">;
        validator: (value: string) => boolean;
    };
    id: PropType<string>;
    ariaLabelledBy: PropType<string>;
    ariaDescribedBy: PropType<string>;
    min: {
        type: PropType<Date>;
        default: () => Date;
    };
    max: {
        type: PropType<Date>;
        default: () => Date;
    };
    maxTime: {
        type: PropType<Date>;
        default: () => Date;
    };
    minTime: {
        type: PropType<Date>;
        default: () => Date;
    };
    name: PropType<string>;
    label: PropType<string>;
    placeholder: PropType<string>;
    popupSettings: {
        type: PropType<object>;
        default: () => {};
    };
    show: {
        type: PropType<boolean>;
        default: any;
    };
    tabIndex: {
        type: PropType<number>;
        default: number;
    };
    title: {
        type: PropType<string>;
        default: () => "";
    };
    steps: {
        type: PropType<import('../timepicker/models/IncrementalSteps').TimePickerIncrementalSteps>;
        default: () => {};
    };
    value: PropType<Date>;
    weekNumber: {
        type: PropType<boolean>;
        default: boolean;
    };
    width: PropType<string | number>;
    validationMessage: PropType<string>;
    required: {
        type: PropType<boolean>;
        default: boolean;
    };
    validityStyles: {
        type: PropType<boolean>;
        default: boolean;
    };
    validate: PropType<boolean>;
    valid: {
        type: PropType<boolean>;
        default: any;
    };
    cancelButton: {
        type: PropType<boolean>;
        default: boolean;
    };
    inputAttributes: PropType<Object>;
}>, {
    kendoAnchorRef: import('vue').Ref<any, any>;
    kendoLocalizationService: {};
}, {
    currentValue: any;
    currentShow: boolean;
    valueDuringOnChange: any;
    showDuringOnChange: any;
    shouldFocusDateInput: boolean;
    isFocused: boolean;
}, {
    computedValue(): DateTimePickerComputed['computedValue'];
    computedShow(): DateTimePickerComputed['computedShow'];
}, {
    validity(): FormComponentValidity;
    getDateInputText(): any;
    focus(): void;
    setShow(show: boolean): void;
    handleReject(): void;
    handleValueChange(event: DateInputChangeEvent | DateTimeSelectorChangeEvent): void;
    handleFocus(event: FocusEvent): void;
    handleBlur(event: FocusEvent): void;
    timeSelectorBlur(event: FocusEvent): void;
    timeSelectorFocus(): void;
    createBlurTimeout(): void;
    handleDateIconClick(event: any): void;
    handleIconMouseDown(event: any): void;
    handleKeyDown(event: any): void;
    dateInputElement(): any;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    changemodel: (value: Date | null) => true;
    'update:modelValue': (value: Date | null) => true;
    iconclick: (event: Event) => true;
    change: (event: DateTimePickerChangeEvent) => true;
    focus: (event: DateTimePickerFocusEvent) => true;
    blur: (event: DateTimePickerBlurEvent) => true;
    keydown: (event: KeyboardEvent) => true;
    open: (event: DateTimePickerOpenEvent) => true;
    close: (event: DateTimePickerCloseEvent) => true;
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    modelValue: {
        type: PropType<Date>;
        default: any;
    };
    defaultShow: {
        type: PropType<boolean>;
        default: boolean;
    };
    defaultValue: {
        type: PropType<Date>;
        default: any;
    };
    disabled: {
        type: PropType<boolean>;
        default: boolean;
    };
    dateInput: {
        type: PropType<any>;
        default: () => any;
    };
    popup: {
        type: PropType<any>;
        default: () => any;
    };
    calendar: {
        type: PropType<any>;
        default: () => any;
    };
    focusedDate: PropType<Date>;
    format: {
        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
        default: () => string | object;
    };
    formatPlaceholder: {
        type: PropType<DateInputFormatPlaceholder>;
        default: () => DateInputFormatPlaceholder;
    };
    rounded: {
        type: PropType<string>;
        validator: (value: string) => boolean;
    };
    fillMode: {
        type: PropType<string>;
        validator: (value: string) => boolean;
    };
    size: {
        type: PropType<"small" | "medium" | "large">;
        validator: (value: string) => boolean;
    };
    id: PropType<string>;
    ariaLabelledBy: PropType<string>;
    ariaDescribedBy: PropType<string>;
    min: {
        type: PropType<Date>;
        default: () => Date;
    };
    max: {
        type: PropType<Date>;
        default: () => Date;
    };
    maxTime: {
        type: PropType<Date>;
        default: () => Date;
    };
    minTime: {
        type: PropType<Date>;
        default: () => Date;
    };
    name: PropType<string>;
    label: PropType<string>;
    placeholder: PropType<string>;
    popupSettings: {
        type: PropType<object>;
        default: () => {};
    };
    show: {
        type: PropType<boolean>;
        default: any;
    };
    tabIndex: {
        type: PropType<number>;
        default: number;
    };
    title: {
        type: PropType<string>;
        default: () => "";
    };
    steps: {
        type: PropType<import('../timepicker/models/IncrementalSteps').TimePickerIncrementalSteps>;
        default: () => {};
    };
    value: PropType<Date>;
    weekNumber: {
        type: PropType<boolean>;
        default: boolean;
    };
    width: PropType<string | number>;
    validationMessage: PropType<string>;
    required: {
        type: PropType<boolean>;
        default: boolean;
    };
    validityStyles: {
        type: PropType<boolean>;
        default: boolean;
    };
    validate: PropType<boolean>;
    valid: {
        type: PropType<boolean>;
        default: any;
    };
    cancelButton: {
        type: PropType<boolean>;
        default: boolean;
    };
    inputAttributes: PropType<Object>;
}>> & Readonly<{
    onBlur?: (event: DateTimePickerBlurEvent) => any;
    onChange?: (event: DateTimePickerChangeEvent) => any;
    onClose?: (event: DateTimePickerCloseEvent) => any;
    onFocus?: (event: DateTimePickerFocusEvent) => any;
    onKeydown?: (event: KeyboardEvent) => any;
    onOpen?: (event: DateTimePickerOpenEvent) => any;
    onChangemodel?: (value: Date) => any;
    "onUpdate:modelValue"?: (value: Date) => any;
    onIconclick?: (event: Event) => any;
}>, {
    required: boolean;
    title: string;
    tabIndex: number;
    calendar: any;
    popup: any;
    disabled: boolean;
    weekNumber: boolean;
    format: string | object;
    max: Date;
    min: Date;
    defaultValue: Date;
    show: boolean;
    popupSettings: object;
    modelValue: Date;
    steps: import('../timepicker/models/IncrementalSteps').TimePickerIncrementalSteps;
    maxTime: Date;
    minTime: Date;
    validityStyles: boolean;
    valid: boolean;
    formatPlaceholder: DateInputFormatPlaceholder;
    defaultShow: boolean;
    dateInput: any;
    cancelButton: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export { DateTimePicker };