@progress/kendo-vue-dateinputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/index.d.mts

@@ -0,0 +1,3419 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DateFormatOptions } from '@progress/kendo-vue-intl';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { FormComponentValidity } from '@progress/kendo-vue-common';
+import { IntlService } from '@progress/kendo-vue-intl';
+import { PopupProps } from '@progress/kendo-vue-popup';
+import { PopupSettings } from '@progress/kendo-vue-popup';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { SVGIcon } from '@progress/kendo-vue-common';
+
+/**
+ * The literal type that defines all possible Calendar views.
+ */
+export declare type ActiveView = 'month' | 'year' | 'decade' | 'century';
+
+/**
+ * @hidden
+ */
+export declare const Calendar: DefineComponent<ExtractPropTypes<    {
+activeRangeEnd: {
+type: PropType<SelectionRangeEnd>;
+default: any;
+};
+allowReverse: {
+type: PropType<boolean>;
+default: boolean;
+};
+cell: PropType<any>;
+className: PropType<string>;
+defaultActiveView: {
+type: PropType<string>;
+default: string;
+};
+modelValue: {
+type: PropType<Date | SelectionRange | Date[]>;
+default: any;
+};
+defaultValue: {
+type: PropType<Date | SelectionRange | Date[]>;
+default: any;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+focusedDate: PropType<Date>;
+id: {
+type: PropType<string>;
+default: () => any;
+};
+headerTitle: PropType<any>;
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+mode: () => CalendarMode;
+navigation: {
+type: PropType<boolean>;
+default: boolean;
+};
+tabIndex: PropType<number>;
+value: PropType<Date | SelectionRange | Date[]>;
+views: {
+type: PropType<number>;
+default: number;
+};
+weekNumber: PropType<boolean>;
+weekCell: PropType<any>;
+topView: {
+type: PropType<string>;
+default: string;
+};
+bottomView: {
+type: PropType<string>;
+default: string;
+};
+onFocus: PropType<(event: any) => void>;
+onBlur: PropType<(event: any) => void>;
+onChange: PropType<(event: CalendarChangeEvent) => void>;
+onKeydown: PropType<(event: any) => void>;
+}>, {
+kendoIntlService: {};
+}, {
+valueDuringOnChange: any;
+currentFocusedDate: any;
+currentActiveView: any;
+currentValue: any;
+cellUID: any;
+isActive: boolean;
+oldValue: any;
+didNavigationChange: boolean;
+currentActiveRangeEnd: any;
+}, {
+activeRange(): CalendarComputed['activeRange'];
+currentMin(): CalendarComputed['currentMin'];
+currentMax(): CalendarComputed['currentMax'];
+}, {
+element(): any;
+computedValue(): Date | null;
+focus(): void;
+handleBlur(): void;
+handleFocus(): void;
+emitBlur(event: any): void;
+emitFocus(event: any): void;
+handleTodayClick(event: NavigationEventArguments): void;
+handleViewChange({ view }: {
+view: CalendarViewEnum;
+}): void;
+handlePrevClick(event: ViewListEventArguments): void;
+handleTitleClick(): void;
+handleNextClick(event: ViewListEventArguments): void;
+handleCellEnter(value: Date): void;
+generateRange(candidate: Date, value: SelectionRange): SelectionRange;
+clampRange(value: Date): SelectionRange;
+handleWeekCellClick(event: ViewWeekCellEventArguments): void;
+handleWeekNameClick(event: ViewWeekNameEventArguments): void;
+handleDateChange(event: ViewListEventArguments): void;
+triggerChange(value: Date, event: ViewListEventArguments): void;
+handleMouseDown(event: ViewListEventArguments): void;
+tableKeyDown(event: any): void;
+isValueEqual(newValue: Date | Date[] | SelectionRange | null, oldValue: Date | Date[] | SelectionRange | null): boolean;
+rangeWithFocused(range: SelectionRange, focusedDate: SelectionRange): SelectionRange;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+activeRangeEnd: {
+type: PropType<SelectionRangeEnd>;
+default: any;
+};
+allowReverse: {
+type: PropType<boolean>;
+default: boolean;
+};
+cell: PropType<any>;
+className: PropType<string>;
+defaultActiveView: {
+type: PropType<string>;
+default: string;
+};
+modelValue: {
+type: PropType<Date | SelectionRange | Date[]>;
+default: any;
+};
+defaultValue: {
+type: PropType<Date | SelectionRange | Date[]>;
+default: any;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+focusedDate: PropType<Date>;
+id: {
+type: PropType<string>;
+default: () => any;
+};
+headerTitle: PropType<any>;
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+mode: () => CalendarMode;
+navigation: {
+type: PropType<boolean>;
+default: boolean;
+};
+tabIndex: PropType<number>;
+value: PropType<Date | SelectionRange | Date[]>;
+views: {
+type: PropType<number>;
+default: number;
+};
+weekNumber: PropType<boolean>;
+weekCell: PropType<any>;
+topView: {
+type: PropType<string>;
+default: string;
+};
+bottomView: {
+type: PropType<string>;
+default: string;
+};
+onFocus: PropType<(event: any) => void>;
+onBlur: PropType<(event: any) => void>;
+onChange: PropType<(event: CalendarChangeEvent) => void>;
+onKeydown: PropType<(event: any) => void>;
+}>> & Readonly<{}>, {
+id: string;
+max: Date;
+min: Date;
+activeRangeEnd: SelectionRangeEnd;
+disabled: boolean;
+defaultValue: Date | SelectionRange | Date[];
+allowReverse: boolean;
+views: number;
+modelValue: Date | SelectionRange | Date[];
+defaultActiveView: string;
+navigation: boolean;
+topView: string;
+bottomView: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * @hidden
+ */
+export declare const CalendarCell: DefineComponent<ExtractPropTypes<    {
+isDisabled: PropType<boolean>;
+view: PropType<number>;
+formattedValue: PropType<string>;
+id: PropType<string>;
+isWeekend: PropType<boolean>;
+isFocused: PropType<boolean>;
+isSelected: PropType<boolean>;
+isInRange: PropType<boolean>;
+isRangeStart: PropType<boolean>;
+isRangeEnd: PropType<boolean>;
+isRangeMid: PropType<boolean>;
+isRangeSplitEnd: PropType<boolean>;
+isRangeSplitStart: PropType<boolean>;
+isToday: PropType<boolean>;
+title: PropType<string>;
+value: PropType<Date>;
+}>, {}, {}, {}, {
+handleClick(event: any): void;
+handleMouseDown(event: any): void;
+handleMouseEnter(): void;
+handleMouseLeave(): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: any;
+mousedown: any;
+mouseenter: any;
+mouseleave: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+isDisabled: PropType<boolean>;
+view: PropType<number>;
+formattedValue: PropType<string>;
+id: PropType<string>;
+isWeekend: PropType<boolean>;
+isFocused: PropType<boolean>;
+isSelected: PropType<boolean>;
+isInRange: PropType<boolean>;
+isRangeStart: PropType<boolean>;
+isRangeEnd: PropType<boolean>;
+isRangeMid: PropType<boolean>;
+isRangeSplitEnd: PropType<boolean>;
+isRangeSplitStart: PropType<boolean>;
+isToday: PropType<boolean>;
+title: PropType<string>;
+value: PropType<Date>;
+}>> & Readonly<{
+onClick?: (...args: any[] | unknown[]) => any;
+onMousedown?: (...args: any[] | unknown[]) => any;
+onMouseenter?: (...args: any[] | unknown[]) => any;
+onMouseleave?: (...args: any[] | unknown[]) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The props which will be received by the custom cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-cell).
+ */
+export declare interface CalendarCellProps extends CellContext {
+    isDisabled?: boolean;
+    view?: number;
+}
+
+/**
+ * The arguments for the `change` event of the Calendar. The generic argument sets the target type of the event. Defaults to `Calendar`.
+ */
+export declare interface CalendarChangeEvent {
+    /**
+     * A native DOM event.
+     */
+    event?: any;
+    /**
+     * The new value.
+     */
+    value: Date | Date[] | SelectionRange | null;
+    /**
+     * The Calendar element.
+     */
+    component: any;
+    /**
+     * The target object.
+     */
+    target: any;
+}
+
+/**
+ * @hidden
+ */
+declare interface CalendarComputed {
+    [key: string]: any;
+    activeRange?: SelectionRangeEnd;
+    currentMin: Date;
+    currentMax: Date;
+}
+
+/**
+ * @hidden
+ */
+export declare const CalendarHeaderTitle: DefineComponent<ExtractPropTypes<    {
+id: PropType<string>;
+value: PropType<string>;
+view: PropType<number>;
+}>, {}, {}, {}, {
+handleClick(event: any): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+id: PropType<string>;
+value: PropType<string>;
+view: PropType<number>;
+}>> & Readonly<{
+onClick?: (...args: any[] | unknown[]) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The props which will be received by the custom header title of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-headertitle).
+ */
+export declare interface CalendarHeaderTitleProps {
+    value?: string;
+    id?: string;
+    view?: number;
+}
+
+/**
+ * Represents the selection modes of the Calendar.
+ *
+ * The supported modes are:
+ * * (Default) `single`&mdash;Renders a single-date selection.
+ * * `multiple`&mdash;Renders a multiple-date selection.
+ * * `range`&mdash;Renders a date-range selection.
+ */
+declare type CalendarMode = 'single' | 'multiple' | 'range';
+
+/**
+ * Represents the props of the [Kendo UI for Vue Calendar component]({% slug overview_calendar %}). The generic argument is passed to the `change` property and is used as a target in the [`CalendarChangeEvent`]({% slug api_dateinputs_calendarchangeevent %}) interface.
+ */
+export declare interface CalendarProps extends CalendarSettings {
+    /**
+     * Specifies which end of the defined selection range will be marked as active.
+     *
+     * > If the selection range is undefined, the value is ignored.
+     */
+    activeRangeEnd?: SelectionRangeEnd;
+    /**
+     * If set to `true`, the component skips the validation of whether the `from` value is after the `to` value.
+     */
+    allowReverse?: boolean;
+    /**
+     * @hidden
+     */
+    modelValue?: Date | Date[] | SelectionRange | null;
+    /**
+     * Sets the default value of the Calendar.
+     */
+    defaultValue?: Date | Date[] | SelectionRange | null;
+    /**
+     * An event that is called after the value of the Calendar has changed.
+     */
+    onChange?: (event: CalendarChangeEvent) => void;
+    /**
+     * An event called when the week number cell is clicked.
+     */
+    onWeekcellclick?: (event: CalendarWeekCellClickEvent) => void;
+    /**
+     * An event called when the week name cell is clicked.
+     */
+    onWeeknameclick?: (event: CalendarWeekNameClickEvent) => void;
+    /**
+     * Sets the value of the Calendar.
+     */
+    value?: Date | Date[] | SelectionRange | null;
+    /**
+     * Sets the value of the Calendar.
+     */
+    views: number;
+    /**
+     * Sets the selection mode of the Calendar.
+     *
+     * The available modes are:
+     * * (Default) `single`&mdash;Renders a single-date selection.
+     * * `multiple`&mdash;Renders a multiple-date selection.
+     * * `range`&mdash;Renders a date-range selection.
+     */
+    mode?: CalendarMode;
+    /**
+     * @hidden
+     */
+    onKeydown?: (event: any) => void;
+}
+
+/**
+ * @hidden
+ */
+export declare interface CalendarSettings {
+    /**
+     * Defines the bottommost view to which the user can navigate.
+     */
+    bottomView?: string;
+    /**
+     * Sets the `className` of the Calendar.
+     */
+    className?: string;
+    /**
+     * Sets the default active view of the Calendar.
+     * If not set, the Calendar will display the month view.
+     */
+    defaultActiveView?: string;
+    /**
+     * Determines whether the Calendar is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the initial focused date of the Calendar.
+     */
+    focusedDate?: Date;
+    /**
+     * Sets the `id` of the Calendar.
+     */
+    id?: string;
+    /**
+     * Sets the maximum allowed date of the Calendar. Defaults to `2099-12-31`.
+     */
+    max?: Date;
+    /**
+     * Sets the minimum allowed date of the Calendar. Defaults to `1900-1-1`.
+     */
+    min?: Date;
+    /**
+     * Determines if the navigation sidebar will be displayed.
+     */
+    navigation?: boolean;
+    /**
+     * Fires each time the Calendar is blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the Calendar is focused.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Sets the `tabIndex` property of the Calendar.
+     */
+    tabIndex?: number;
+    /**
+     * Defines the topmost view to which the user can navigate.
+     */
+    topView?: string;
+    /**
+     * Determines if the week number column will be displayed.
+     */
+    weekNumber?: boolean;
+    /**
+     * Enables the customization or the override of the default Calendar cell
+     * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)).
+     */
+    cell?: any;
+    /**
+     * Enables the customization or the override of the default week-column cell in the Calendar
+     * ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)).
+     */
+    weekCell?: any;
+    /**
+     * Enables the customization or the override of the default header title in the Calendar
+     * ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)).
+     */
+    headerTitle?: any;
+    /**
+     * Enables the customization or the override of the default navigation item in the Calendar
+     * ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
+     */
+    navigationItem?: any;
+}
+
+/**
+ * The Enum which defines all possible Calendar view types.
+ */
+export declare enum CalendarViewEnum {
+    month = 0,
+    year = 1,
+    decade = 2,
+    century = 3
+}
+
+/**
+ * @hidden
+ */
+export declare const CalendarWeekCell: DefineComponent<ExtractPropTypes<    {
+id: PropType<string>;
+value: PropType<number>;
+className: PropType<string>;
+}>, {}, {}, {}, {
+handleClick(event: any): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+id: PropType<string>;
+value: PropType<number>;
+className: PropType<string>;
+}>> & Readonly<{
+onClick?: (...args: any[] | unknown[]) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The arguments for the `weekcellclick` event of the Calendar.
+ */
+export declare interface CalendarWeekCellClickEvent {
+    /**
+     * A native DOM event.
+     */
+    event?: any;
+    /**
+     * The new value.
+     */
+    value: number | null;
+}
+
+/**
+ * The props which will be received by the custom week cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-weekcell).
+ */
+export declare interface CalendarWeekCellProps {
+    id?: string;
+    value?: number | null;
+    className?: string;
+}
+
+/**
+ * The arguments for the `weeknameclick` event of the Calendar.
+ */
+declare interface CalendarWeekNameClickEvent {
+    /**
+     * A native DOM event.
+     */
+    event?: any;
+    /**
+     * The value.
+     */
+    value: string | null;
+}
+
+/**
+ * @hidden
+ */
+declare interface CellContext {
+    formattedValue: string;
+    id: string;
+    isWeekend: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isInRange: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isRangeMid: boolean;
+    isRangeSplitEnd?: boolean;
+    isRangeSplitStart?: boolean;
+    isToday: boolean;
+    title?: string;
+    value: Date;
+}
+
+/**
+ * @hidden
+ */
+export declare const DateInput: DefineComponent<ExtractPropTypes<    {
+modelValue: PropType<Date>;
+value: PropType<Date>;
+defaultValue: PropType<Date>;
+format: {
+type: PropType<string | DateFormatOptions>;
+default: () => "d";
+};
+formatPlaceholder: {
+type: PropType<DateInputFormatPlaceholder>;
+default: () => DateInputFormatPlaceholder;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+tabIndex: PropType<number>;
+title: PropType<string>;
+steps: PropType<DateInputIncrementalSteps>;
+placeholder: PropType<string>;
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+maxTime: {
+type: PropType<Date>;
+default: () => Date;
+};
+minTime: {
+type: PropType<Date>;
+default: () => Date;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+spinners: {
+type: PropType<boolean>;
+default: boolean;
+};
+name: PropType<string>;
+dir: PropType<string>;
+label: PropType<string>;
+id: PropType<string>;
+validationMessage: {
+type: PropType<string>;
+default: string;
+};
+required: {
+type: PropType<boolean>;
+default: boolean;
+};
+validityStyles: {
+type: PropType<boolean>;
+default: boolean;
+};
+validate: PropType<boolean>;
+valid: {
+type: PropType<boolean>;
+default: any;
+};
+ariaRole: {
+type: PropType<string>;
+default: string;
+};
+ariaControls: PropType<string>;
+ariaLabel: PropType<string>;
+ariaExpanded: {
+type: PropType<boolean>;
+default: any;
+};
+ariaHasPopup: {
+type: PropType<String>;
+default: any;
+};
+}>, {
+inputRef: Ref<any, any>;
+kendoIntlService: {};
+kendoLocalizationService: {};
+}, {
+kendoDate: any;
+currentFormat: any;
+valueDuringOnChange: any;
+hasMounted: boolean;
+isEmpty: any;
+lastSelectedSymbol: any;
+isFocused: boolean;
+}, {
+computedValue(): Date | null;
+wrapperClassNames(): object;
+}, {
+selection(): Selection_2;
+element(): HTMLInputElement | null;
+focus(e: any): void;
+handleFocus(e: any): void;
+handleBlur(e: any): void;
+intl(): IntlService;
+setValidity(): void;
+spinnersMouseDown(event: any): void;
+elementChange(event: any): void;
+elementClick(_: any): void;
+wheel(event: any): void;
+increasePart(event: any): void;
+decreasePart(event: any): void;
+elementKeyDown(event: any): void;
+setSelection(selection: Selection_2): void;
+triggerChange(event: any, oldValue: Date | null): void;
+selectionBySymbol(symbol: string): Selection_2;
+selectionByIndex(index: number): Selection_2;
+switchDateSegment(offset: number): void;
+modifyDateSegmentValue(offset: number, event: any): void;
+validity(): FormComponentValidity;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+change: any;
+changemodel: any;
+'update:modelValue': any;
+focus: any;
+blur: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+modelValue: PropType<Date>;
+value: PropType<Date>;
+defaultValue: PropType<Date>;
+format: {
+type: PropType<string | DateFormatOptions>;
+default: () => "d";
+};
+formatPlaceholder: {
+type: PropType<DateInputFormatPlaceholder>;
+default: () => DateInputFormatPlaceholder;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+tabIndex: PropType<number>;
+title: PropType<string>;
+steps: PropType<DateInputIncrementalSteps>;
+placeholder: PropType<string>;
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+maxTime: {
+type: PropType<Date>;
+default: () => Date;
+};
+minTime: {
+type: PropType<Date>;
+default: () => Date;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+spinners: {
+type: PropType<boolean>;
+default: boolean;
+};
+name: PropType<string>;
+dir: PropType<string>;
+label: PropType<string>;
+id: PropType<string>;
+validationMessage: {
+type: PropType<string>;
+default: string;
+};
+required: {
+type: PropType<boolean>;
+default: boolean;
+};
+validityStyles: {
+type: PropType<boolean>;
+default: boolean;
+};
+validate: PropType<boolean>;
+valid: {
+type: PropType<boolean>;
+default: any;
+};
+ariaRole: {
+type: PropType<string>;
+default: string;
+};
+ariaControls: PropType<string>;
+ariaLabel: PropType<string>;
+ariaExpanded: {
+type: PropType<boolean>;
+default: any;
+};
+ariaHasPopup: {
+type: PropType<String>;
+default: any;
+};
+}>> & Readonly<{
+onBlur?: (...args: any[] | unknown[]) => any;
+onChange?: (...args: any[] | unknown[]) => any;
+onFocus?: (...args: any[] | unknown[]) => any;
+onChangemodel?: (...args: any[] | unknown[]) => any;
+"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
+}>, {
+required: boolean;
+size: string;
+format: "d";
+max: Date;
+min: Date;
+rounded: string;
+fillMode: string;
+disabled: boolean;
+validationMessage: string;
+maxTime: Date;
+minTime: Date;
+spinners: boolean;
+validityStyles: boolean;
+valid: boolean;
+ariaRole: string;
+ariaExpanded: boolean;
+ariaHasPopup: String;
+formatPlaceholder: DateInputFormatPlaceholder;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The arguments for the `change` event of the DateInput.
+ * The generic argument sets the target type of the event. Defaults to `DateInput`.
+ */
+export declare interface DateInputChangeEvent {
+    event?: any;
+    value: Date | null;
+    component: any;
+    target: any;
+}
+
+/**
+ * The interface which defines a custom-format placeholder structure in the DateInput.
+ */
+export declare interface DateInputCustomFormatPlaceholder {
+    /**
+     * Defines the description for the `year` format section.
+     */
+    year?: string;
+    /**
+     * Defines the description for the `month` format section.
+     */
+    month?: string;
+    /**
+     * Defines the description for the `day` format section.
+     */
+    day?: string;
+    /**
+     * Defines the description for the `hour` format section.
+     */
+    hour?: string;
+    /**
+     * Defines the description for the `minute` format section.
+     */
+    minute?: string;
+    /**
+     * Defines the description for the `second` format section.
+     */
+    second?: string;
+}
+
+/**
+ * The union type which defines all possible format options of the DateInput placeholder.
+ *
+ * The available options are:
+ * * `'wide'`&mdash;Displays the full description of the format section. For example, turns `MM` into `month`. Retrieved from [CLDR](https://github.com/telerik/kendo-intl/blob/develop/docs/cldr/index.md).
+ * * `'narrow'`&mdash;Displays the narrow description of the format section. For example, turns `MM` into `mo.`. Retrieved from [CLDR](https://github.com/telerik/kendo-intl/blob/develop/docs/cldr/index.md).
+ * * `'short'`&mdash;Displays the short description of the format section. For example, turns `MM` into `mo.`. Retrieved from [CLDR](https://github.com/telerik/kendo-intl/blob/develop/docs/cldr/index.md).
+ * * `'formatPattern'`&mdash;Directly displays the format section. For example, turns `MM` into `MM`.
+ */
+export declare type DateInputFormatPlaceholder = 'wide' | 'narrow' | 'short' | 'formatPattern' | DateInputCustomFormatPlaceholder;
+
+/**
+ * The interface which defines all possible incremental steps in the DateInput.
+ */
+export declare interface DateInputIncrementalSteps {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+}
+
+/**
+ * Represents the props of the [Kendo UI for Vue DateInput component]({% slug overview_dateinput %}). The generic argument is passed to the `change` property and is used as a target in the [`DateInputChangeEvent`]({% slug api_dateinputs_dateinputchangeevent %}) interface.
+ */
+export declare interface DateInputProps extends FormComponentProps, DateInputSettings {
+    /**
+     * Specifies the value of the placeholder.
+     */
+    placeholder?: string;
+    /**
+     * @hidden
+     */
+    modelValue?: Date | null;
+    /**
+     * Specifies the value of the DateInput.
+     */
+    value?: Date | null;
+    /**
+     * Specifies the validate of the DateInput.
+     */
+    validate?: boolean;
+    /**
+     * Specifies the default value of the DateInput. If `value` is not set, this value will correspond to the initial value.
+     */
+    defaultValue?: Date | null;
+    /**
+     * Determines the event handler that will be fired when the user edits the value ([see example]({% slug dateranges_dateinput %}).
+     */
+    onChange?: (event: any) => void;
+}
+
+/**
+ * @hidden
+ */
+export declare interface DateInputSettings {
+    /**
+     * Specifies the `date` format which is used for formatting the value ([see example]({% slug formats_dateinput %}). If not set, the default format will be used.
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Specifies the descriptions of the format sections in the input field ([more information and example]({% slug placeholders_dateinput %}).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the width of the DateInput.
+     */
+    width?: number | string;
+    /**
+     * Configures the `size` of the DateInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the DateInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the DateInput.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Sets the `tabIndex` property of the DateInput.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the DateInput.
+     */
+    title?: string;
+    /**
+     * Sets the aria-label of the DateInput.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the aria role of the DateInput.
+     */
+    ariaRole?: string;
+    /**
+     * Sets the aria-controls of the DateInput.
+     */
+    ariaControls?: string;
+    /**
+     * Sets the aria-haspopup of the DateInput.
+     */
+    ariaHasPopup?: String;
+    /**
+     * Sets the aria-expanded of the DateInput.
+     */
+    ariaExpanded?: boolean;
+    /**
+     * Specifies the incremental steps of the DateInput ([see example]({% slug incrementalsteps_dateinput %}).
+     *
+     * The available options are:
+     * - `year: Number`&mdash;Controls the incremental step of the year value.
+     * - `month: Number`&mdash;Controls the incremental step of the month value.
+     * - `day: Number`&mdash;Controls the incremental step of the day value.
+     * - `hour: Number`&mdash;Controls the incremental step of the hour value.
+     * - `minute: Number`&mdash;Controls the incremental step of the minute value.
+     * - `second: Number`&mdash;Controls the incremental step of the second value.
+     */
+    steps?: DateInputIncrementalSteps;
+    /**
+     * Specifies the smallest date that is valid ([see example]({% slug dateranges_dateinput %}).
+     */
+    min?: Date;
+    /**
+     * Specifies the greatest date that is valid ([see example]({% slug dateranges_dateinput %}).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest time that is valid ([see example]({% slug dateranges_dateinput %}#toc-limiting-the-time-range).
+     */
+    minTime?: Date;
+    /**
+     * Specifies the greatest time that is valid ([see example]({% slug dateranges_dateinput %}#toc-limiting-the-time-range).
+     */
+    maxTime?: Date;
+    /**
+     * Determines whether the DateInput is disabled ([see example]({% slug disabled_dateinput %})).
+     */
+    disabled?: boolean;
+    /**
+     * Specifies whether the **Up** and **Down** spin buttons will be rendered ([see example]({% slug spinbuttons_dateinput %})).
+     */
+    spinners?: boolean;
+    /**
+     * Specifies the name property of the input DOM element.
+     */
+    name?: string;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Renders a floating label for the DateInput.
+     */
+    label?: string;
+    /**
+     * Sets the `id` of the `input` DOM element.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+}
+
+declare interface DateInputsPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled.
+     */
+    animate?: boolean;
+    /**
+     * Controls the popup container. By default, the popup is appended to the [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element.
+     */
+    appendTo?: HTMLElement;
+    /**
+     * Specifies a list of CSS classes that are used for styling the popup.
+     */
+    popupClass?: string;
+}
+
+/**
+ * @hidden
+ */
+export declare const DatePicker: DefineComponent<ExtractPropTypes<    {
+defaultShow: {
+type: BooleanConstructor;
+default: boolean;
+};
+modelValue: {
+type: DateConstructor;
+default: any;
+};
+defaultValue: {
+type: DateConstructor;
+default: any;
+};
+disabled: {
+type: BooleanConstructor;
+default: boolean;
+};
+dateInput: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+calendar: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+toggleButton: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+label: StringConstructor;
+placeholder: StringConstructor;
+popup: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+rounded: {
+type: StringConstructor;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: StringConstructor;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: StringConstructor;
+default: string;
+validator: (value: string) => any;
+};
+focusedDate: DateConstructor;
+format: {
+type: (ObjectConstructor | StringConstructor)[];
+default: () => "d";
+};
+formatPlaceholder: (ObjectConstructor | StringConstructor)[];
+id: StringConstructor;
+max: {
+type: DateConstructor;
+default: () => Date;
+};
+min: {
+type: DateConstructor;
+default: () => Date;
+};
+name: StringConstructor;
+popupSettings: {
+type: ObjectConstructor;
+default: () => {};
+};
+show: {
+type: BooleanConstructor;
+default: any;
+};
+tabIndex: {
+type: NumberConstructor;
+default: number;
+};
+title: {
+type: StringConstructor;
+default: () => "";
+};
+value: DateConstructor;
+weekNumber: BooleanConstructor;
+width: (StringConstructor | NumberConstructor)[];
+validityStyles: {
+type: BooleanConstructor;
+default: boolean;
+};
+validationMessage: StringConstructor;
+required: BooleanConstructor;
+validate: BooleanConstructor;
+valid: {
+type: BooleanConstructor;
+default: any;
+};
+ariaLabel: StringConstructor;
+}>, {
+listRef: Ref<any, any>;
+kendoAnchorRef: Ref<any, any>;
+kendoLocalizationService: {};
+}, {
+isFocused: boolean;
+currentValue: any;
+currentShow: any;
+valueDuringOnChange: any;
+showDuringOnChange: any;
+shouldFocusDateInput: boolean;
+}, {
+computedValue(): Date | null;
+computedShow(): boolean;
+}, {
+focus(): void;
+handleFocus(event: any): void;
+handleBlur(event: any): void;
+calendarBlur(): void;
+calendarFocus(): void;
+createBlurTimeout(): void;
+validity(): FormComponentValidity;
+nextValue(nextProps: DatePickerProps, nextState: any): any;
+nextShow(nextProps: DatePickerProps, nextState: any): any;
+setShow(show: boolean): void;
+mergeTime(value: Date | null): Date | null;
+handleInputValueChange(event: DateInputChangeEvent): void;
+handleCalendarValueChange(event: CalendarChangeEvent): void;
+getDateInputText(): any;
+handleValueChange(value: Date | null, event: DateInputChangeEvent | CalendarChangeEvent): void;
+handleIconClick(event: any): void;
+handleIconMouseDown(event: any): void;
+handleKeyDown(event: any): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+change: any;
+changemodel: any;
+'update:modelValue': any;
+iconclick: any;
+focus: any;
+blur: any;
+keydown: any;
+open: any;
+close: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+defaultShow: {
+type: BooleanConstructor;
+default: boolean;
+};
+modelValue: {
+type: DateConstructor;
+default: any;
+};
+defaultValue: {
+type: DateConstructor;
+default: any;
+};
+disabled: {
+type: BooleanConstructor;
+default: boolean;
+};
+dateInput: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+calendar: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+toggleButton: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+label: StringConstructor;
+placeholder: StringConstructor;
+popup: {
+type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+default: () => any;
+};
+rounded: {
+type: StringConstructor;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: StringConstructor;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: StringConstructor;
+default: string;
+validator: (value: string) => any;
+};
+focusedDate: DateConstructor;
+format: {
+type: (ObjectConstructor | StringConstructor)[];
+default: () => "d";
+};
+formatPlaceholder: (ObjectConstructor | StringConstructor)[];
+id: StringConstructor;
+max: {
+type: DateConstructor;
+default: () => Date;
+};
+min: {
+type: DateConstructor;
+default: () => Date;
+};
+name: StringConstructor;
+popupSettings: {
+type: ObjectConstructor;
+default: () => {};
+};
+show: {
+type: BooleanConstructor;
+default: any;
+};
+tabIndex: {
+type: NumberConstructor;
+default: number;
+};
+title: {
+type: StringConstructor;
+default: () => "";
+};
+value: DateConstructor;
+weekNumber: BooleanConstructor;
+width: (StringConstructor | NumberConstructor)[];
+validityStyles: {
+type: BooleanConstructor;
+default: boolean;
+};
+validationMessage: StringConstructor;
+required: BooleanConstructor;
+validate: BooleanConstructor;
+valid: {
+type: BooleanConstructor;
+default: any;
+};
+ariaLabel: StringConstructor;
+}>> & Readonly<{
+onBlur?: (...args: any[] | unknown[]) => any;
+onChange?: (...args: any[] | unknown[]) => any;
+onClose?: (...args: any[] | unknown[]) => any;
+onFocus?: (...args: any[] | unknown[]) => any;
+onKeydown?: (...args: any[] | unknown[]) => any;
+onOpen?: (...args: any[] | unknown[]) => any;
+onChangemodel?: (...args: any[] | unknown[]) => any;
+"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
+onIconclick?: (...args: any[] | unknown[]) => any;
+}>, {
+required: boolean;
+title: string;
+tabIndex: number;
+size: string;
+format: string | Record<string, any>;
+max: Date;
+min: Date;
+weekNumber: boolean;
+rounded: string;
+fillMode: string;
+disabled: boolean;
+defaultValue: Date;
+show: boolean;
+popupSettings: Record<string, any>;
+popup: string | Function | Record<string, any>;
+modelValue: Date;
+validate: boolean;
+validityStyles: boolean;
+valid: boolean;
+defaultShow: boolean;
+dateInput: string | Function | Record<string, any>;
+calendar: string | Function | Record<string, any>;
+toggleButton: string | Function | Record<string, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The arguments for the `change` event of the DatePicker.
+ */
+export declare interface DatePickerChangeEvent {
+    event: any;
+    value: Date | null;
+    show: boolean;
+    target: any;
+    component: any;
+}
+
+/**
+ * The arguments for the `close` event of the DatePicker.
+ */
+export declare interface DatePickerCloseEvent {
+    component: any;
+}
+
+/**
+ * The arguments for the `open` event of the DatePicker.
+ */
+export declare interface DatePickerOpenEvent {
+    component: any;
+}
+
+/**
+ * Represents the props of the [Kendo UI for Vue DatePicker component]({% slug overview_datepicker %}).
+ */
+export declare interface DatePickerProps extends DatePickerSettings, FormComponentProps {
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
+    /**
+     * Sets the default value of the DatePicker ([see example]({% slug default_value_datepicker %})).
+     */
+    defaultValue?: Date;
+    /**
+     * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)).
+     */
+    onChange?: (event: DatePickerChangeEvent) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    onIconclick?: (event: any) => void;
+    /**
+     * Renders a floating label for the DatePicker.
+     */
+    label?: string;
+    /**
+     * Specifies the value of the placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Specifies the value of the DatePicker ([see example]({% slug controlled_datepicker %}#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;
+    /**
+     * Specifies the validate of the DatePicker.
+     */
+    validate?: boolean;
+    /**
+     * Specifies the validate of the DatePicker.
+     */
+    ariaLabel?: string;
+}
+
+/**
+ * @hidden
+ */
+export declare interface DatePickerSettings {
+    /**
+     * Enables the customization or the override of the default wrapping component around the `DateInput` and `ToggleButton` rendered by the DatePicker
+     * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-toggle-button)).
+     */
+    pickerWrap?: any;
+    /**
+     * Enables the customization or the override of the default Toggle button which is rendered by the DatePicker
+     * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-toggle-button)).
+     */
+    toggleButton?: any;
+    /**
+     * Enables the customization or the override of the default Calendar which is rendered by the DatePicker
+     * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-calendar)).
+     */
+    calendar?: any;
+    /**
+     * Enables the customization or the override of the default Popup which is rendered by the DatePicker
+     * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-popup)).
+     */
+    popup?: any;
+    /**
+     * Enables the customization or the override of the default DateInput which is rendered by the DatePicker
+     * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-dateinput)).
+     */
+    dateInput?: any;
+    /**
+     * Sets the default state of the DatePicker upon render ([see example]({% slug default_value_datepicker %})).
+     */
+    defaultShow?: boolean;
+    /**
+     * Determines whether the DatePicker is disabled ([see example]({% slug disabled_datepicker %})).
+     */
+    disabled?: boolean;
+    /**
+     * Configures the `size` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the TimeInput.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Specifies the focused date of the DatePicker ([see example]({% slug dates_datepicker %})).
+     */
+    focusedDate?: Date;
+    /**
+     * Specifies the date format that is used to display the input value ([see example]({% slug formats_datepicker %})).
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Defines the descriptions of the format sections in the input field ([more information and examples]({% slug placeholders_datepicker %})).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the `id` of the DatePicker.
+     */
+    id?: string;
+    /**
+     * Specifies the greatest valid date ([see example]({% slug dateranges_datepicker %})).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid date ([see example]({% slug dateranges_datepicker %})).
+     */
+    min?: Date;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     */
+    name?: string;
+    /**
+     * Fires each time any of the DatePicker elements gets blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the user focuses any of the DatePicker elements.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Configures the popup options of the DatePicker.
+     *
+     * The available options are:
+     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `appendTo`: &mdash; Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     */
+    popupSettings?: DateInputsPopupSettings;
+    /**
+     * Specifies if the calendar will be displayed ([see example]({% slug controlled_datepicker %}#toc-controlling-the-popup-state)).
+     */
+    show?: boolean;
+    /**
+     * Sets the `tabIndex` property of the DatePicker.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the DatePicker.
+     */
+    title?: string;
+    /**
+     * Determines whether to display a week number column in the `month` view of the Calendar ([see example]({% slug weeknumcolumn_datepicker %})).
+     */
+    weekNumber?: boolean;
+    /**
+     * Specifies the width of the DatePicker.
+     */
+    width?: number | string;
+}
+
+/**
+ * @hidden
+ */
+export declare const DateRangePicker: DefineComponent<ExtractPropTypes<    {
+allowReverse: {
+type: PropType<boolean>;
+default: boolean;
+};
+calendarSettings: PropType<DateRangePickerCalendarSettings>;
+defaultShow: {
+type: PropType<boolean>;
+default: boolean;
+};
+defaultValue: {
+type: PropType<SelectionRange>;
+default: () => SelectionRange;
+};
+modelValue: {
+type: PropType<Date>;
+default: any;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+popup: PropType<any>;
+calendar: PropType<any>;
+startDateInput: PropType<any>;
+endDateInput: PropType<any>;
+endDateInputSettings: PropType<DateRangePickerDateInputSettings>;
+focusedDate: PropType<Date>;
+format: {
+type: PropType<string | DateFormatOptions>;
+default: () => "d";
+};
+id: PropType<string>;
+ariaLabelledBy: PropType<string>;
+ariaDescribedBy: PropType<string>;
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+popupSettings: {
+type: PropType<DateRangePickerPopupSettings>;
+default: () => any;
+};
+show: {
+type: PropType<boolean>;
+default: any;
+};
+startDateInputSettings: PropType<DateRangePickerDateInputSettings>;
+swapButton: {
+type: PropType<boolean>;
+default: boolean;
+};
+tabIndex: PropType<number>;
+value: {
+type: PropType<SelectionRange>;
+default: () => any;
+};
+}>, {
+kendoAnchorRef: Ref<any, any>;
+kendoLocalizationService: {};
+}, {
+currentShow: boolean;
+currentValue: any;
+valueDuringOnChange: any;
+shouldFocusDateInput: boolean;
+shouldFocusCalendar: boolean;
+}, {
+rootClassName(): DateRangePickerComputed['rootClassName'];
+computedValue(): DateRangePickerComputed['computedValue'];
+computedShow(): DateRangePickerComputed['computedShow'];
+swapButtonClass(): {
+[x: string]: any;
+'k-button': boolean;
+'k-button-flat': boolean;
+'k-button-flat-base': boolean;
+'k-icon-button': boolean;
+};
+}, {
+focus(): void;
+focusCalendarElement(): void;
+focusDateInputElement(): void;
+calculateValue(props: DateRangePickerProps, state: DateRangePickerData): SelectionRange;
+calculateShow(nextProps: DateRangePickerProps, nextState: DateRangePickerData): boolean;
+setShow(show: boolean): void;
+handleReverseClick(event: any): void;
+handleReverseMouseDown(event: any): void;
+handleFocus(event: any): void;
+calendarBlur(): void;
+calendarFocus(): void;
+createBlurTimeout(): void;
+getStartInput(): any;
+getEndInput(): any;
+getCalendar(): any;
+handleBlur(event: any): void;
+handleEndChange(event: DateInputChangeEvent): void;
+handleStartChange(event: DateInputChangeEvent): void;
+extractRangeFromValue(event: CalendarChangeEvent): SelectionRange;
+handleCalendarChange(event: CalendarChangeEvent): void;
+handleKeyDown(event: any): void;
+handleChange(value: SelectionRange, event: CalendarChangeEvent | DateInputChangeEvent | ReverseClickEvent): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+blur: any;
+change: any;
+changemodel: any;
+'update:modelValue': any;
+focus: any;
+keydown: any;
+open: any;
+close: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+allowReverse: {
+type: PropType<boolean>;
+default: boolean;
+};
+calendarSettings: PropType<DateRangePickerCalendarSettings>;
+defaultShow: {
+type: PropType<boolean>;
+default: boolean;
+};
+defaultValue: {
+type: PropType<SelectionRange>;
+default: () => SelectionRange;
+};
+modelValue: {
+type: PropType<Date>;
+default: any;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+popup: PropType<any>;
+calendar: PropType<any>;
+startDateInput: PropType<any>;
+endDateInput: PropType<any>;
+endDateInputSettings: PropType<DateRangePickerDateInputSettings>;
+focusedDate: PropType<Date>;
+format: {
+type: PropType<string | DateFormatOptions>;
+default: () => "d";
+};
+id: PropType<string>;
+ariaLabelledBy: PropType<string>;
+ariaDescribedBy: PropType<string>;
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+popupSettings: {
+type: PropType<DateRangePickerPopupSettings>;
+default: () => any;
+};
+show: {
+type: PropType<boolean>;
+default: any;
+};
+startDateInputSettings: PropType<DateRangePickerDateInputSettings>;
+swapButton: {
+type: PropType<boolean>;
+default: boolean;
+};
+tabIndex: PropType<number>;
+value: {
+type: PropType<SelectionRange>;
+default: () => any;
+};
+}>> & Readonly<{
+onBlur?: (...args: any[] | unknown[]) => any;
+onChange?: (...args: any[] | unknown[]) => any;
+onClose?: (...args: any[] | unknown[]) => any;
+onFocus?: (...args: any[] | unknown[]) => any;
+onKeydown?: (...args: any[] | unknown[]) => any;
+onOpen?: (...args: any[] | unknown[]) => any;
+onChangemodel?: (...args: any[] | unknown[]) => any;
+"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
+}>, {
+value: SelectionRange;
+size: string;
+format: "d";
+max: Date;
+min: Date;
+rounded: string;
+fillMode: string;
+disabled: boolean;
+defaultValue: SelectionRange;
+show: boolean;
+popupSettings: DateRangePickerPopupSettings;
+allowReverse: boolean;
+modelValue: Date;
+defaultShow: boolean;
+swapButton: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Represents the settings that can be passed to the Calendar inside the DateRangePicker.
+ */
+export declare interface DateRangePickerCalendarSettings extends CalendarSettings {
+}
+
+/**
+ * The arguments for the `onChange` event of the DateRangePicker.
+ */
+export declare interface DateRangePickerChangeEvent {
+    event?: any;
+    value: SelectionRange;
+    show?: boolean;
+    target: any;
+    component?: any;
+}
+
+/**
+ * The arguments for the `close` event of the DateRangePicker.
+ */
+export declare interface DateRangePickerCloseEvent {
+    component: any;
+}
+
+/**
+ * @hidden
+ */
+declare interface DateRangePickerComputed {
+    [key: string]: any;
+    rootClassName: object;
+    computedValue: SelectionRange;
+    computedShow: boolean;
+}
+
+/**
+ * @hidden
+ */
+declare interface DateRangePickerData {
+    currentShow: boolean;
+    currentValue: SelectionRange;
+    valueDuringOnChange: SelectionRange | undefined;
+    shouldFocusDateInput: boolean;
+    shouldFocusCalendar: boolean;
+}
+
+/**
+ * Represents the settings that can be passed to the DateInput inside the DateRangePicker.
+ */
+export declare interface DateRangePickerDateInputSettings extends DateInputSettings {
+}
+
+/**
+ * The arguments for the `open` event of the DateRangePicker.
+ */
+export declare interface DateRangePickerOpenEvent {
+    component: any;
+}
+
+/**
+ * Represents the settings that can be passed to the Popup inside the DateRangePicker.
+ */
+export declare interface DateRangePickerPopupSettings extends PopupSettings {
+}
+
+/**
+ * Represents the props of the [Kendo UI for Vue DateRangePicker component]({% slug overview_daterangepicker %}).
+ */
+export declare interface DateRangePickerProps extends DateRangePickerSettings {
+    /**
+     * Overrides the validity state of the component.
+     * If `valid` is set, the `required` property will be ignored.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    valid?: boolean;
+    /**
+     * Sets the default value of the DateRangePicker ([see example]({% slug default_value_daterangepicker %})).
+     */
+    defaultValue?: SelectionRange;
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
+    /**
+     * Fires each time the user selects a part of a date range ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
+     */
+    onChange?: (event: DateRangePickerChangeEvent) => void;
+    /**
+     * Specifies the selected date range of the DateRangePicker ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
+     *
+     * > The `value` has to be an object with `start` and `end` valid JavaScript [`Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instances or `null`.
+     */
+    value?: SelectionRange;
+}
+
+/**
+ * @hidden
+ */
+export declare interface DateRangePickerSettings {
+    /**
+     * Enables the customization or the override of the default start DateInput which is rendered by the DateRangePicker
+     * ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-dateinputs)).
+     */
+    startDateInput?: any;
+    /**
+     * Enables the customization or the override of the default end DateInput which is rendered by the DateRangePicker
+     * ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-calendar)).
+     */
+    endDateInput?: any;
+    /**
+     * Enables the customization or the override of the default Popup which is rendered by the DateRangePicker
+     * ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-popup)).
+     */
+    popup?: any;
+    /**
+     * Enables the customization or the override of the default Calendar which is rendered by the DateRangePicker.
+     */
+    calendar?: any;
+    /**
+     * If `allowReverse` is set to `true`, the component skips the validation of whether the `from` value is after the `to` value ([see example]({% slug reverse_daterangepicker %})).
+     *
+     * > If the [`calendarSettings`](#toc-calendarsettings) property is set, its `allowReverse` will take precedence.
+     */
+    allowReverse?: boolean;
+    /**
+     * Represents the additional props that can be passed to the [MultiViewCalendar]({% slug overview_multiviewcalendar %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-multiviewcalendar)).
+     */
+    calendarSettings?: DateRangePickerCalendarSettings;
+    /**
+     * Sets the default state of the DateRangePicker upon render ([see example]({% slug default_value_daterangepicker %})).
+     */
+    defaultShow?: boolean;
+    /**
+     * Determines whether the DateRangePicker is disabled ([see example]({% slug disabled_daterangepicker %})).
+     */
+    disabled?: boolean;
+    /**
+     * Represents the additional props that can be passed to the end-date [DateInput]({% slug overview_dateinput %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-dateinputs)).
+     */
+    endDateInputSettings?: DateRangePickerDateInputSettings;
+    /**
+     * Specifies the focused date of the DateRangePicker ([see example]({% slug focused_daterangepicker %})).
+     */
+    focusedDate?: Date;
+    /**
+     * Specifies the `date` format which is used for formatting the value of the DateInput ([see example]({% slug formats_dateinput %})).
+     *
+     * > If [`startDateInputSettings`](#toc-startdateinputsettings) or [`endDateInputSettings`](#toc-enddateinputsettings) are set, their `format` will take precedence.
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Specifies the `id` of the DateRangePicker.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specifies the greatest valid date ([see example]({% slug dateranges_daterangepicker %})).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid date ([see example]({% slug dateranges_daterangepicker %})).
+     */
+    min?: Date;
+    /**
+     * Configures the `size` of the DateRangePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the DateRangePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the DateRangePicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Fires each time any of the DateRangePicker elements gets blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the user focuses any of the DateRangePicker elements.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Represents the additional props that will be passed to the [Popup]({% slug overview_popup %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-popup)).
+     */
+    popupSettings?: DateRangePickerPopupSettings;
+    /**
+     * Specifies if the calendar will be displayed ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-popup-state)).
+     */
+    show?: boolean;
+    /**
+     * Represents the additional props that will be passed to the start-date [DateInput]({% slug overview_dateinput %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-dateinputs)).
+     */
+    startDateInputSettings?: DateRangePickerDateInputSettings;
+    /**
+     * Determines whether the DateRangePicker will display a **Swap Value** button ([see example]({% slug reverse_daterangepicker %}#toc-swapping-start-and-end-dates-in-ranges)).
+     *
+     * > The DateRangePicker will display the swap button only if the [`allowReverse`](#toc-allowreverse) property is also set to `true`.
+     */
+    swapButton?: boolean;
+    /**
+     * Sets the `tabIndex` property of the DatePicker.
+     */
+    tabIndex?: number;
+}
+
+/**
+ * @hidden
+ */
+export declare const DateTimePicker: DefineComponent<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 | DateFormatOptions>;
+default: () => "g";
+};
+formatPlaceholder: {
+type: PropType<DateInputFormatPlaceholder>;
+default: () => DateInputFormatPlaceholder;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+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<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;
+};
+}>, {
+kendoAnchorRef: 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: any): void;
+handleBlur(event: any): void;
+timeSelectorBlur(event: any): void;
+timeSelectorFocus(): void;
+createBlurTimeout(): void;
+handleDateIconClick(event: any): void;
+handleIconMouseDown(event: any): void;
+handleKeyDown(event: any): void;
+dateInputElement(): any;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+changemodel: any;
+'update:modelValue': any;
+iconclick: any;
+change: any;
+focus: any;
+blur: any;
+keydown: any;
+open: any;
+close: any;
+}, string, PublicProps, Readonly<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 | DateFormatOptions>;
+default: () => "g";
+};
+formatPlaceholder: {
+type: PropType<DateInputFormatPlaceholder>;
+default: () => DateInputFormatPlaceholder;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+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<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;
+};
+}>> & Readonly<{
+onBlur?: (...args: any[] | unknown[]) => any;
+onChange?: (...args: any[] | unknown[]) => any;
+onClose?: (...args: any[] | unknown[]) => any;
+onFocus?: (...args: any[] | unknown[]) => any;
+onKeydown?: (...args: any[] | unknown[]) => any;
+onOpen?: (...args: any[] | unknown[]) => any;
+onChangemodel?: (...args: any[] | unknown[]) => any;
+"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
+onIconclick?: (...args: any[] | unknown[]) => any;
+}>, {
+required: boolean;
+title: string;
+tabIndex: number;
+size: string;
+format: "g";
+max: Date;
+min: Date;
+weekNumber: boolean;
+rounded: string;
+fillMode: string;
+disabled: boolean;
+defaultValue: Date;
+show: boolean;
+popupSettings: object;
+popup: any;
+modelValue: Date;
+steps: TimePickerIncrementalSteps;
+maxTime: Date;
+minTime: Date;
+validityStyles: boolean;
+valid: boolean;
+formatPlaceholder: DateInputFormatPlaceholder;
+defaultShow: boolean;
+dateInput: any;
+calendar: any;
+cancelButton: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The arguments for the `onChange` event of the DateTimePicker.
+ */
+export declare interface DateTimePickerChangeEvent {
+    event: any;
+    value: Date | null;
+    show: boolean;
+    target: any;
+}
+
+/**
+ * The arguments for the `close` event of the DateTimePicker.
+ */
+export declare interface DateTimePickerCloseEvent {
+    component: any;
+}
+
+/**
+ * @hidden
+ */
+declare interface DateTimePickerComputed {
+    [key: string]: any;
+    computedValue: Date | null;
+    computedShow: boolean;
+}
+
+/**
+ * The arguments for the `open` event of the DateTimePicker.
+ */
+export declare interface DateTimePickerOpenEvent {
+    component: any;
+}
+
+/**
+ * Represents the props of the [Kendo UI for Vue DateTimePicker component]({% slug overview_datetimepicker %}).
+ */
+export declare 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 declare interface DateTimePickerSettings {
+    /**
+     * Enables the customization or the override of the default Calendar which is rendered by the DateTimePicker
+     * ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-calendar)).
+     */
+    calendar?: any;
+    /**
+     * Enables the customization or the override of the default Popup which is rendered by the DateTimePicker
+     * ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-popup)).
+     */
+    popup?: any;
+    /**
+     * Enables the customization or the override of the default DateInput which is rendered by the DateTimePicker
+     * ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-dateinput)).
+     */
+    dateInput?: any;
+    /**
+     * Sets if the calendar popup is opened upon initial render.
+     * For more information, refer to the article on
+     */
+    defaultShow?: boolean;
+    /**
+     * Determines whether the DateTimePicker is disabled
+     * ([see example]({% slug disabled_datetimepicker %})).
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the initial focusedDate of the Calendar inside the DateTimePicker
+     * ([see example]({% slug dates_datetimepicker %})).
+     */
+    focusedDate?: Date;
+    /**
+     * Specifies the date format that is used to display the input value
+     * ([see example]({% slug formats_datetimepicker %})).
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Defines the descriptions of the format sections in the input field
+     * ([more information and examples]({% slug placeholders_datetimepicker %})).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the `id` of the DateTimePicker.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specifies the greatest valid date
+     * ([see example]({% slug dateranges_datetimepicker %})).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid date
+     * ([see example]({% slug dateranges_datetimepicker %})).
+     */
+    min?: Date;
+    minTime?: Date;
+    maxTime?: Date;
+    /**
+     * Configures the `size` of the DateTimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the DateTimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the DateTimePicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     */
+    name?: string;
+    /**
+     * Renders a floating label for the DateTimePicker.
+     */
+    label?: string;
+    /**
+     * Specifies the value of the placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Configures the popup options of the DateTimePicker.
+     *
+     * The available options are:
+     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `appendTo:`&mdash; Defines the container to which the Popup will
+     * be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     */
+    popupSettings?: object;
+    /**
+     * Fires each time any of the DateTimePicker elements gets blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the user focuses any of the DateTimePicker elements.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    onIconclick?: (event: any) => void;
+    /**
+     * Specifies if the popup will be displayed
+     * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-popup-state)).
+     */
+    show?: boolean;
+    /**
+     * Sets the `tabIndex` property of the DateTimePicker.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the DateTimePicker.
+     */
+    title?: string;
+    /**
+     * Configures the incremental steps of the DateTimePicker.
+     *
+     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
+     */
+    steps?: TimePickerIncrementalSteps;
+    /**
+     * Determines whether to display a week number column of the Calendar inside the DateTimePicker
+     * ([see example]({% slug weeksnumbers_calendar %})).
+     */
+    weekNumber?: boolean;
+    /**
+     * Specifies the width of the DateTimePicker.
+     */
+    width?: number | string;
+    /**
+     * Determines whether to display the **Cancel** button in the popup.
+     */
+    cancelButton?: boolean;
+    /**
+     * Specifies the validate of the DateTimePicker.
+     */
+    validate?: boolean;
+    /**
+     * Controls the form error message of the component. If set to an empty string, no error will be thrown.
+     *
+     */
+    validationMessage?: string;
+}
+
+/**
+ * @hidden
+ */
+declare interface DateTimeSelectorChangeEvent {
+    event?: any;
+    value: Date | null;
+    target: any;
+    cancelButton?: boolean;
+}
+
+/**
+ * @hidden
+ */
+declare interface NavigationEventArguments {
+    event?: any;
+    value: Date;
+    target: any;
+}
+
+/**
+ * @hidden
+ */
+export declare const PickerWrap: DefineComponent<ExtractPropTypes<    {
+id: StringConstructor;
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+id: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Represents the props of the Kendo UI for
+ *  Vue [PickerWrap]({% slug api_dateinputs_pickerwrapprops %}) component.
+ */
+export declare interface PickerWrapProps {
+    id?: string;
+}
+
+/**
+ * @hidden
+ */
+declare interface ReverseClickEvent {
+    event?: any;
+}
+
+/**
+ * @hidden
+ */
+declare type Selection_2 = {
+    start: number;
+    end: number;
+};
+
+/**
+ * The type that defines the selection range of the Calendar.
+ */
+export declare interface SelectionRange {
+    /**
+     * The beginning of the selection range.
+     */
+    start: Date | null;
+    /**
+     * The end of the selection range.
+     */
+    end: Date | null;
+}
+
+/**
+ * The literal type that defines which end of the selection range is active.
+ */
+declare type SelectionRangeEnd = 'start' | 'end' | null;
+
+/**
+ * @hidden
+ */
+export declare const TimePicker: DefineComponent<ExtractPropTypes<    {
+cancelButton: {
+type: PropType<boolean>;
+default: boolean;
+};
+nowButton: {
+type: PropType<boolean>;
+default: any;
+};
+defaultShow: {
+type: PropType<boolean>;
+default: boolean;
+};
+modelValue: {
+type: PropType<Date>;
+default: any;
+};
+defaultValue: {
+type: PropType<Date>;
+default: () => any;
+};
+dateInput: {
+type: PropType<any>;
+default: () => any;
+};
+popup: {
+type: PropType<any>;
+default: () => any;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+format: {
+type: PropType<string | DateFormatOptions>;
+default: () => "t";
+};
+formatPlaceholder: {
+type: PropType<DateInputFormatPlaceholder>;
+default: () => DateInputFormatPlaceholder;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+id: PropType<string>;
+ariaLabelledBy: PropType<string>;
+ariaDescribedBy: PropType<string>;
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+name: PropType<string>;
+label: PropType<string>;
+placeholder: PropType<string>;
+popupSettings: {
+type: PropType<PopupProps>;
+default: () => {};
+};
+show: {
+type: PropType<boolean>;
+default: any;
+};
+tabIndex: {
+type: PropType<number>;
+default: number;
+};
+steps: {
+type: PropType<TimePickerIncrementalSteps>;
+default: () => {};
+};
+smoothScroll: {
+type: PropType<boolean>;
+default: boolean;
+};
+title: {
+type: PropType<string>;
+default: () => "";
+};
+value: {
+type: PropType<Date>;
+default: () => any;
+};
+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;
+};
+}>, {
+kendoAnchorRef: Ref<any, any>;
+kendoLocalizationService: {};
+}, {
+currentValue: any;
+currentShow: boolean;
+valueDuringOnChange: any;
+showDuringOnChange: any;
+isFocused: boolean;
+}, {
+timeSelector(): any;
+computedValue(): Date | null;
+computedShow(): boolean;
+}, {
+validity(): FormComponentValidity;
+getDateInputText(): any;
+focus(): void;
+normalizeTime(date: Date): Date;
+setShow(show: boolean): void;
+mergeTime(value: Date | null): Date | null;
+handleInputValueChange(event: DateInputChangeEvent): void;
+handleValueChange(event: DateInputChangeEvent | TimeSelectorChangeEvent): void;
+handleFocus(event: any): void;
+handleBlur(event: any): void;
+timeBlur(event: any): void;
+timeFocus(): void;
+createBlurTimeout(): void;
+handleValueReject(_: any): void;
+handleIconClick(event: any): void;
+handleIconMouseDown(event: any): void;
+handleKeyDown(event: any): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+changemodel: any;
+'update:modelValue': any;
+iconclick: any;
+change: any;
+focus: any;
+blur: any;
+keydown: any;
+open: any;
+close: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+cancelButton: {
+type: PropType<boolean>;
+default: boolean;
+};
+nowButton: {
+type: PropType<boolean>;
+default: any;
+};
+defaultShow: {
+type: PropType<boolean>;
+default: boolean;
+};
+modelValue: {
+type: PropType<Date>;
+default: any;
+};
+defaultValue: {
+type: PropType<Date>;
+default: () => any;
+};
+dateInput: {
+type: PropType<any>;
+default: () => any;
+};
+popup: {
+type: PropType<any>;
+default: () => any;
+};
+disabled: {
+type: PropType<boolean>;
+default: boolean;
+};
+format: {
+type: PropType<string | DateFormatOptions>;
+default: () => "t";
+};
+formatPlaceholder: {
+type: PropType<DateInputFormatPlaceholder>;
+default: () => DateInputFormatPlaceholder;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+size: {
+type: PropType<string>;
+default: string;
+validator: (value: string) => any;
+};
+id: PropType<string>;
+ariaLabelledBy: PropType<string>;
+ariaDescribedBy: PropType<string>;
+min: {
+type: PropType<Date>;
+default: () => Date;
+};
+max: {
+type: PropType<Date>;
+default: () => Date;
+};
+name: PropType<string>;
+label: PropType<string>;
+placeholder: PropType<string>;
+popupSettings: {
+type: PropType<PopupProps>;
+default: () => {};
+};
+show: {
+type: PropType<boolean>;
+default: any;
+};
+tabIndex: {
+type: PropType<number>;
+default: number;
+};
+steps: {
+type: PropType<TimePickerIncrementalSteps>;
+default: () => {};
+};
+smoothScroll: {
+type: PropType<boolean>;
+default: boolean;
+};
+title: {
+type: PropType<string>;
+default: () => "";
+};
+value: {
+type: PropType<Date>;
+default: () => any;
+};
+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;
+};
+}>> & Readonly<{
+onBlur?: (...args: any[] | unknown[]) => any;
+onChange?: (...args: any[] | unknown[]) => any;
+onClose?: (...args: any[] | unknown[]) => any;
+onFocus?: (...args: any[] | unknown[]) => any;
+onKeydown?: (...args: any[] | unknown[]) => any;
+onOpen?: (...args: any[] | unknown[]) => any;
+onChangemodel?: (...args: any[] | unknown[]) => any;
+"onUpdate:modelValue"?: (...args: any[] | unknown[]) => any;
+onIconclick?: (...args: any[] | unknown[]) => any;
+}>, {
+required: boolean;
+value: Date;
+title: string;
+tabIndex: number;
+size: string;
+format: "t";
+max: Date;
+min: Date;
+rounded: string;
+fillMode: string;
+disabled: boolean;
+defaultValue: Date;
+show: boolean;
+popupSettings: PopupProps;
+popup: any;
+modelValue: Date;
+steps: TimePickerIncrementalSteps;
+validityStyles: boolean;
+valid: boolean;
+formatPlaceholder: DateInputFormatPlaceholder;
+defaultShow: boolean;
+dateInput: any;
+smoothScroll: boolean;
+cancelButton: boolean;
+nowButton: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * The arguments for the `onChange` event of the TimePicker.
+ */
+export declare interface TimePickerChangeEvent {
+    event?: any;
+    value: Date | null;
+    show: boolean;
+    target: any;
+}
+
+/**
+ * The arguments for the `close` event of the TimePicker.
+ */
+export declare interface TimePickerCloseEvent {
+    component: any;
+}
+
+/**
+ * The interface which defines all possible incremental steps in the TimePicker.
+ */
+declare interface TimePickerIncrementalSteps {
+    hour?: number;
+    minute?: number;
+    second?: number;
+}
+
+/**
+ * The arguments for the `open` event of the TimePicker.
+ */
+export declare interface TimePickerOpenEvent {
+    component: any;
+}
+
+/**
+ * Represents the props of the [Kendo UI for Vue TimePicker component]({% slug overview_timepicker %}).
+ */
+export declare interface TimePickerProps extends TimePickerSettings, FormComponentProps {
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
+    /**
+     * Sets the default value of the TimePicker ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-value)).
+     */
+    defaultValue?: Date;
+    /**
+     * Fires each time the user selects a new value ([see example]({% slug controlled_timepicker %}#toc-controlling-the-date-value)).
+     */
+    onChange?: (event: TimePickerChangeEvent) => void;
+    /**
+     * Specifies the value of the TimePicker ([see example]({% slug controlled_timepicker %}#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 declare interface TimePickerSettings {
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Determines whether to display the **Cancel** button in the popup.
+     */
+    cancelButton?: boolean;
+    /**
+     * Determines whether to display the **Now** button in the popup.
+     *
+     * > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
+     */
+    nowButton?: boolean;
+    /**
+     * Sets the default state of the popup upon render ([see example]({% slug default_value_timepicker %}#toc-setting-the-default-popup-state)).
+     */
+    defaultShow?: boolean;
+    /**
+     * Determines whether the TimePicker is disabled ([see example]({% slug disabled_timepicker %})).
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the date format that is used to display the input value ([see example]({% slug formats_timepicker %})).
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Defines the descriptions of the format sections in the input field ([see example]({% slug placeholders_timepicker %})).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the `id` of the TimePicker.
+     */
+    id?: string;
+    /**
+     * Specifies the greatest valid time ([see example]({% slug timeranges_timepicker %})).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid time ([see example]({% slug timeranges_timepicker %})).
+     */
+    min?: Date;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     */
+    name?: string;
+    /**
+     * Renders a floating label for the TimePicker.
+     */
+    label?: string;
+    /**
+     * Specifies the value of the placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Configures the `size` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the TimeInput.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Fires each time any of the TimePicker elements gets blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the user focuses any of the TimePicker elements.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    onIconclick?: (event: any) => void;
+    /**
+     * Configures the popup options of the TimePicker.
+     *
+     * The available options are:
+     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `appendTo:`&mdash; Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     */
+    popupSettings?: DateInputsPopupSettings;
+    /**
+     * Specifies if a time selector will be displayed ([see example]({% slug controlled_timepicker %}#toc-controlling-the-popup-state)).
+     */
+    show?: boolean;
+    /**
+     * Configures the incremental steps of the TimePicker ([see example]({% slug incrementalsteps_timepicker %})).
+     *
+     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
+     */
+    steps?: TimePickerIncrementalSteps;
+    /**
+     * Toggles the smooth scroll animation on time click. By default, the animation is enabled.
+     */
+    smoothScroll?: boolean;
+    /**
+     * Sets the `tabIndex` property of the TimePicker.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the TimePicker.
+     */
+    title?: string;
+    /**
+     * Specifies the width of the TimePicker.
+     */
+    width?: number | string;
+    /**
+     * Enables the customization or the override of the default Popup which is rendered by the TimePicker
+     * ([see example]({% slug custom_rendering_timepicker %}#toc-customizing-the-popup)).
+     */
+    popup?: any;
+    /**
+     * Enables the customization or the override of the default DateInput which is rendered by the TimePicker
+     * ([see example]({% slug custom_rendering_timepicker %}#toc-customizing-the-dateinput)).
+     */
+    dateInput?: any;
+    /**
+     * Specifies the validate of the TimePicker.
+     */
+    validate?: boolean;
+}
+
+/**
+ * @hidden
+ */
+declare interface TimeSelectorChangeEvent {
+    event?: any;
+    value: Date;
+    target: any;
+}
+
+/**
+ * @hidden
+ */
+export declare const ToggleButton: DefineComponent<ExtractPropTypes<    {
+ariaLabel: PropType<string>;
+ariaPressed: PropType<boolean>;
+title: PropType<string>;
+dir: PropType<string>;
+selected: {
+type: PropType<boolean>;
+default: any;
+};
+togglable: {
+type: PropType<boolean>;
+default: boolean;
+};
+icon: {
+type: PropType<string>;
+default: () => any;
+};
+svgIcon: PropType<SVGIcon>;
+iconClass: {
+type: PropType<string>;
+default: () => any;
+};
+imageUrl: {
+type: PropType<string>;
+default: () => any;
+};
+imageAlt: PropType<string>;
+disabled: {
+type: PropType<boolean>;
+default: any;
+};
+size: {
+type: PropType<string>;
+default: string;
+};
+shape: {
+type: PropType<string>;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+};
+themeColor: {
+type: PropType<string>;
+default: string;
+};
+tabIndex: PropType<number>;
+accessKey: PropType<string>;
+id: PropType<string>;
+type: PropType<string>;
+role: PropType<string>;
+}>, {}, {
+currentActive: any;
+}, {
+computedSelected(): boolean;
+buttonClasses(): {
+[x: string]: any;
+'k-icon-button': boolean;
+'k-disabled': any;
+'k-selected': any;
+'k-rtl': boolean;
+};
+}, {
+focus(e: any): void;
+toggleIfApplicable(): void;
+handleClick(event: any): void;
+handleMouseDown(event: any): void;
+handlePointerDown(event: any): void;
+handleMouseUp(event: any): void;
+handlePointerUp(event: any): void;
+handleFocus(event: any): void;
+handleBlur(event: any): void;
+handleKeypress(event: any): void;
+handleKeydown(event: any): void;
+handleContextmenu(event: any): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+click: any;
+mousedown: any;
+mouseup: any;
+pointerdown: any;
+pointerup: any;
+focus: any;
+blur: any;
+keypress: any;
+keydown: any;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+ariaLabel: PropType<string>;
+ariaPressed: PropType<boolean>;
+title: PropType<string>;
+dir: PropType<string>;
+selected: {
+type: PropType<boolean>;
+default: any;
+};
+togglable: {
+type: PropType<boolean>;
+default: boolean;
+};
+icon: {
+type: PropType<string>;
+default: () => any;
+};
+svgIcon: PropType<SVGIcon>;
+iconClass: {
+type: PropType<string>;
+default: () => any;
+};
+imageUrl: {
+type: PropType<string>;
+default: () => any;
+};
+imageAlt: PropType<string>;
+disabled: {
+type: PropType<boolean>;
+default: any;
+};
+size: {
+type: PropType<string>;
+default: string;
+};
+shape: {
+type: PropType<string>;
+};
+rounded: {
+type: PropType<string>;
+default: string;
+};
+fillMode: {
+type: PropType<string>;
+default: string;
+};
+themeColor: {
+type: PropType<string>;
+default: string;
+};
+tabIndex: PropType<number>;
+accessKey: PropType<string>;
+id: PropType<string>;
+type: PropType<string>;
+role: PropType<string>;
+}>> & Readonly<{
+onClick?: (...args: any[] | unknown[]) => any;
+onBlur?: (...args: any[] | unknown[]) => any;
+onFocus?: (...args: any[] | unknown[]) => any;
+onKeydown?: (...args: any[] | unknown[]) => any;
+onKeypress?: (...args: any[] | unknown[]) => any;
+onMousedown?: (...args: any[] | unknown[]) => any;
+onMouseup?: (...args: any[] | unknown[]) => any;
+onPointerdown?: (...args: any[] | unknown[]) => any;
+onPointerup?: (...args: any[] | unknown[]) => any;
+}>, {
+themeColor: string;
+size: string;
+icon: string;
+rounded: string;
+fillMode: string;
+selected: boolean;
+togglable: boolean;
+iconClass: string;
+imageUrl: string;
+disabled: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * @hidden
+ */
+declare interface ViewListEventArguments {
+    event?: any;
+    value: Date;
+    target: any;
+    isTodayClick?: boolean;
+}
+
+/**
+ * @hidden
+ */
+declare interface ViewWeekCellEventArguments {
+    event?: any;
+    value: number | null;
+}
+
+/**
+ * @hidden
+ */
+declare interface ViewWeekNameEventArguments {
+    event?: any;
+    value: string | null;
+}
+
+export { }