/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { ButtonBlurEvent } from '@progress/kendo-vue-buttons'; import { ButtonFocusEvent } from '@progress/kendo-vue-buttons'; import { ComponentOptionsMixin } from 'vue'; import { ComponentProvideOptions } from 'vue'; import { DateFormatOptions } from '@progress/kendo-vue-intl'; import { DateInputFormatPlaceholder as DateInputFormatPlaceholder_2 } from '..'; import { DateInputIncrementalSteps as DateInputIncrementalSteps_2 } from './models/incremental-steps'; import { DateInputsPopupSettings } from '../PopupSettings'; import { DateRangePickerCalendarSettings as DateRangePickerCalendarSettings_2 } from './models/DateRangePickerCalendarSettings'; import { DateRangePickerDateInputSettings as DateRangePickerDateInputSettings_2 } from './models/DateRangePickerDateInputSettings'; import { DateRangePickerPopupSettings as DateRangePickerPopupSettings_2 } from './models/DateRangePickerPopupSettings'; 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 { SelectionRangeEnd } from '../models/SelectionRangeEnd'; import { SVGIcon } from '@progress/kendo-vue-common'; import { TimePickerIncrementalSteps } from './models/IncrementalSteps'; import { TimePickerIncrementalSteps as TimePickerIncrementalSteps_3 } from '../timepicker/models/IncrementalSteps'; /** * The literal type that defines all possible Calendar views. */ export declare type ActiveView = 'month' | 'year' | 'decade' | 'century'; /** * @hidden */ export declare const Calendar: DefineComponent; default: any; }; allowReverse: { type: PropType; default: boolean; }; cell: PropType; className: PropType; defaultActiveView: { type: PropType; default: string; }; modelValue: { type: PropType; default: any; }; defaultValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; focusedDate: PropType; id: { type: PropType; default: () => any; }; headerTitle: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; mode: () => CalendarMode; navigation: { type: PropType; default: boolean; }; tabIndex: PropType; value: PropType; views: { type: PropType; default: number; }; weekNumber: PropType; weekCell: PropType; topView: { type: PropType; default: string; }; bottomView: { type: PropType; 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; default: any; }; allowReverse: { type: PropType; default: boolean; }; cell: PropType; className: PropType; defaultActiveView: { type: PropType; default: string; }; modelValue: { type: PropType; default: any; }; defaultValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; focusedDate: PropType; id: { type: PropType; default: () => any; }; headerTitle: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; mode: () => CalendarMode; navigation: { type: PropType; default: boolean; }; tabIndex: PropType; value: PropType; views: { type: PropType; default: number; }; weekNumber: PropType; weekCell: PropType; topView: { type: PropType; default: string; }; bottomView: { type: PropType; 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; disabled: boolean; navigation: boolean; max: Date; min: Date; activeRangeEnd: SelectionRangeEnd; defaultValue: Date | SelectionRange | Date[]; allowReverse: boolean; views: number; modelValue: Date | SelectionRange | Date[]; defaultActiveView: string; topView: string; bottomView: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * @hidden */ export declare const CalendarCell: DefineComponent; view: PropType; formattedValue: PropType; id: PropType; isWeekend: PropType; isFocused: PropType; isSelected: PropType; isInRange: PropType; isRangeStart: PropType; isRangeEnd: PropType; isRangeMid: PropType; isRangeSplitEnd: PropType; isRangeSplitStart: PropType; isToday: PropType; title: PropType; value: PropType; }>, {}, {}, {}, { handleClick(event: any): void; handleMouseDown(event: any): void; handleMouseEnter(): void; handleMouseLeave(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { click: (event: MouseEvent) => true; mousedown: (event: MouseEvent) => true; mouseenter: (event: MouseEvent) => true; mouseleave: (event: MouseEvent) => true; }, string, PublicProps, Readonly; view: PropType; formattedValue: PropType; id: PropType; isWeekend: PropType; isFocused: PropType; isSelected: PropType; isInRange: PropType; isRangeStart: PropType; isRangeEnd: PropType; isRangeMid: PropType; isRangeSplitEnd: PropType; isRangeSplitStart: PropType; isToday: PropType; title: PropType; value: PropType; }>> & Readonly<{ onClick?: (event: MouseEvent) => any; onMousedown?: (event: MouseEvent) => any; onMouseenter?: (event: MouseEvent) => any; onMouseleave?: (event: MouseEvent) => 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_2; currentMin: Date; currentMax: Date; } /** * @hidden */ export declare const CalendarHeaderTitle: DefineComponent; value: PropType; view: PropType; }>, {}, {}, {}, { handleClick(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { click: (event: MouseEvent) => true; }, string, PublicProps, Readonly; value: PropType; view: PropType; }>> & Readonly<{ onClick?: (event: MouseEvent) => 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`—Renders a single-date selection. * * `multiple`—Renders a multiple-date selection. * * `range`—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_2; /** * 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`—Renders a single-date selection. * * `multiple`—Renders a multiple-date selection. * * `range`—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; } /** * 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; value: PropType; className: PropType; }>, {}, {}, {}, { handleClick(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { click: (event: MouseEvent) => true; }, string, PublicProps, Readonly; value: PropType; className: PropType; }>> & Readonly<{ onClick?: (event: MouseEvent) => 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; value: PropType; defaultValue: PropType; format: { type: PropType; default: () => string | object; }; formatPlaceholder: { type: PropType; default: () => DateInputFormatPlaceholder; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; tabIndex: PropType; title: PropType; steps: PropType; placeholder: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; maxTime: { type: PropType; default: () => Date; }; minTime: { type: PropType; default: () => Date; }; disabled: { type: PropType; default: boolean; }; spinners: { type: PropType; default: boolean; }; name: PropType; dir: PropType; label: PropType; id: PropType; validationMessage: { type: PropType; default: string; }; required: { type: PropType; default: boolean; }; validityStyles: { type: PropType; default: boolean; }; validate: PropType; valid: { type: PropType; default: any; }; ariaRole: { type: PropType; default: string; }; ariaControls: PropType; ariaLabel: PropType; ariaExpanded: { type: PropType; default: any; }; ariaHasPopup: { type: PropType; default: any; }; inputAttributes: PropType; }>, { inputRef: Ref; 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: FocusEvent): void; handleBlur(e: FocusEvent): 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: (event: DateInputChangeEvent) => true; changemodel: (value: Date | null) => true; 'update:modelValue': (value: Date | null) => true; focus: (event: DateInputFocusEvent) => true; blur: (event: DateInputBlurEvent) => true; }, string, PublicProps, Readonly; value: PropType; defaultValue: PropType; format: { type: PropType; default: () => string | object; }; formatPlaceholder: { type: PropType; default: () => DateInputFormatPlaceholder; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; tabIndex: PropType; title: PropType; steps: PropType; placeholder: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; maxTime: { type: PropType; default: () => Date; }; minTime: { type: PropType; default: () => Date; }; disabled: { type: PropType; default: boolean; }; spinners: { type: PropType; default: boolean; }; name: PropType; dir: PropType; label: PropType; id: PropType; validationMessage: { type: PropType; default: string; }; required: { type: PropType; default: boolean; }; validityStyles: { type: PropType; default: boolean; }; validate: PropType; valid: { type: PropType; default: any; }; ariaRole: { type: PropType; default: string; }; ariaControls: PropType; ariaLabel: PropType; ariaExpanded: { type: PropType; default: any; }; ariaHasPopup: { type: PropType; default: any; }; inputAttributes: PropType; }>> & Readonly<{ onBlur?: (event: DateInputBlurEvent) => any; onChange?: (event: DateInputChangeEvent) => any; onFocus?: (event: DateInputFocusEvent) => any; onChangemodel?: (value: Date) => any; "onUpdate:modelValue"?: (value: Date) => any; }>, { required: boolean; disabled: boolean; format: string | object; max: Date; min: Date; 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 `onBlur` event of the DateInput. */ export declare interface DateInputBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * 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 arguments for the `onFocus` event of the DateInput. */ export declare interface DateInputFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * The union type which defines all possible format options of the DateInput placeholder. * * The available options are: * * `'wide'`—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'`—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'`—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'`—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—Does not set a size `class`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DateInput. * * The available options are: * - small * - medium * - large * - circle * - full * - null—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—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`—Controls the incremental step of the year value. * - `month: Number`—Controls the incremental step of the month value. * - `day: Number`—Controls the incremental step of the day value. * - `hour: Number`—Controls the incremental step of the hour value. * - `minute: Number`—Controls the incremental step of the minute value. * - `second: Number`—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; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; } declare interface DateInputsPopupSettings_2 { /** * 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; default: boolean; }; modelValue: { type: PropType; default: any; }; defaultValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; dateInput: { type: PropType; default: () => any; }; calendar: { type: PropType; default: () => any; }; toggleButton: { type: PropType; default: () => any; }; label: PropType; placeholder: PropType; popup: { type: PropType; default: () => any; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; focusedDate: PropType; format: { type: PropType; default: () => string | object; }; formatPlaceholder: PropType; id: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; name: PropType; popupSettings: { type: PropType; default: () => {}; }; show: { type: PropType; default: any; }; tabIndex: { type: PropType; default: number; }; title: { type: PropType; default: () => ""; }; value: PropType; weekNumber: PropType; width: PropType; validityStyles: { type: PropType; default: boolean; }; validationMessage: PropType; required: PropType; validate: PropType; valid: { type: PropType; default: any; }; ariaLabel: PropType; inputAttributes: PropType; }>, { listRef: Ref; kendoAnchorRef: Ref; kendoLocalizationService: {}; }, { isFocused: boolean; currentValue: any; currentShow: any; valueDuringOnChange: any; showDuringOnChange: any; shouldFocusDateInput: boolean; }, { computedValue(): Date | null; computedShow(): boolean; }, { focus(): void; handleFocus(event: FocusEvent): void; handleBlur(event: FocusEvent): void; calendarBlur(event: FocusEvent): void; calendarFocus(event: FocusEvent): 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: (event: DatePickerChangeEvent) => true; changemodel: (value: Date | null) => true; 'update:modelValue': (value: Date | null) => true; iconclick: (event: Event) => true; focus: (event: DatePickerFocusEvent) => true; blur: (event: DatePickerBlurEvent) => true; keydown: (event: KeyboardEvent) => true; open: (event: DatePickerOpenEvent) => true; close: (event: DatePickerCloseEvent) => true; }, string, PublicProps, Readonly; default: boolean; }; modelValue: { type: PropType; default: any; }; defaultValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; dateInput: { type: PropType; default: () => any; }; calendar: { type: PropType; default: () => any; }; toggleButton: { type: PropType; default: () => any; }; label: PropType; placeholder: PropType; popup: { type: PropType; default: () => any; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; focusedDate: PropType; format: { type: PropType; default: () => string | object; }; formatPlaceholder: PropType; id: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; name: PropType; popupSettings: { type: PropType; default: () => {}; }; show: { type: PropType; default: any; }; tabIndex: { type: PropType; default: number; }; title: { type: PropType; default: () => ""; }; value: PropType; weekNumber: PropType; width: PropType; validityStyles: { type: PropType; default: boolean; }; validationMessage: PropType; required: PropType; validate: PropType; valid: { type: PropType; default: any; }; ariaLabel: PropType; inputAttributes: PropType; }>> & Readonly<{ onBlur?: (event: DatePickerBlurEvent) => any; onChange?: (event: DatePickerChangeEvent) => any; onClose?: (event: DatePickerCloseEvent) => any; onFocus?: (event: DatePickerFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onOpen?: (event: DatePickerOpenEvent) => any; onChangemodel?: (value: Date) => any; "onUpdate:modelValue"?: (value: Date) => any; onIconclick?: (event: Event) => any; }>, { title: string; tabIndex: number; calendar: any; popup: any; disabled: boolean; format: string | object; max: Date; min: Date; defaultValue: Date; show: boolean; popupSettings: DateInputsPopupSettings; modelValue: Date; validityStyles: boolean; valid: boolean; defaultShow: boolean; dateInput: any; toggleButton: any; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the DatePicker. */ export declare interface DatePickerBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * 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 `onFocus` event of the DatePicker. */ export declare interface DatePickerFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * 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—Does not set a size `class`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the TimeInput. * * The available options are: * - small * - medium * - large * - circle * - full * - null—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—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`—Controls the popup animation. By default, the open and close animations are enabled. * - `appendTo`: — 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`—Specifies a list of CSS classes that are used to style the popup. */ popupSettings?: DateInputsPopupSettings_2; /** * 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; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; } /** * @hidden */ export declare const DateRangePicker: DefineComponent; default: boolean; }; calendarSettings: PropType; defaultShow: { type: PropType; default: boolean; }; defaultValue: { type: PropType; default: () => SelectionRange; }; modelValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; popup: PropType; calendar: PropType; startDateInput: PropType; endDateInput: PropType; endDateInputSettings: PropType; focusedDate: PropType; format: { type: PropType; default: () => string | object; }; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; popupSettings: { type: PropType; default: () => any; }; show: { type: PropType; default: any; }; startDateInputSettings: PropType; swapButton: { type: PropType; default: boolean; }; tabIndex: PropType; value: { type: PropType; default: () => any; }; inputAttributes: PropType; }>, { kendoAnchorRef: Ref; 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: FocusEvent): void; calendarBlur(): void; calendarFocus(): void; createBlurTimeout(): void; getStartInput(): any; getEndInput(): any; getCalendar(): any; handleBlur(event: FocusEvent): 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: (event: DateRangePickerBlurEvent) => true; change: (event: DateRangePickerChangeEvent) => true; changemodel: (value: any) => true; 'update:modelValue': (value: any) => true; focus: (event: DateRangePickerFocusEvent) => true; keydown: (event: KeyboardEvent) => true; open: (event: DateRangePickerOpenEvent) => true; close: (event: DateRangePickerCloseEvent) => true; }, string, PublicProps, Readonly; default: boolean; }; calendarSettings: PropType; defaultShow: { type: PropType; default: boolean; }; defaultValue: { type: PropType; default: () => SelectionRange; }; modelValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; popup: PropType; calendar: PropType; startDateInput: PropType; endDateInput: PropType; endDateInputSettings: PropType; focusedDate: PropType; format: { type: PropType; default: () => string | object; }; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; max: { type: PropType; default: () => Date; }; min: { type: PropType; default: () => Date; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; popupSettings: { type: PropType; default: () => any; }; show: { type: PropType; default: any; }; startDateInputSettings: PropType; swapButton: { type: PropType; default: boolean; }; tabIndex: PropType; value: { type: PropType; default: () => any; }; inputAttributes: PropType; }>> & Readonly<{ onBlur?: (event: DateRangePickerBlurEvent) => any; onChange?: (event: DateRangePickerChangeEvent) => any; onClose?: (event: DateRangePickerCloseEvent) => any; onFocus?: (event: DateRangePickerFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onOpen?: (event: DateRangePickerOpenEvent) => any; onChangemodel?: (value: any) => any; "onUpdate:modelValue"?: (value: any) => any; }>, { value: SelectionRange; disabled: boolean; format: string | object; max: Date; min: Date; defaultValue: SelectionRange; show: boolean; popupSettings: DateRangePickerPopupSettings_2; allowReverse: boolean; modelValue: Date; defaultShow: boolean; swapButton: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the DateRangePicker. */ export declare interface DateRangePickerBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * 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 `onFocus` event of the DateRangePicker. */ export declare interface DateRangePickerFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * 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. */ 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-date-inputs)). */ 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 multipleviews_calendar %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-calendar)). */ 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—Does not set a size `class`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DateRangePicker. * * The available options are: * - small * - medium * - large * - circle * - full * - null—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—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; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; } /** * @hidden */ export declare const DateTimePicker: DefineComponent; default: any; }; defaultShow: { type: PropType; default: boolean; }; defaultValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; dateInput: { type: PropType; default: () => any; }; popup: { type: PropType; default: () => any; }; calendar: { type: PropType; default: () => any; }; focusedDate: PropType; format: { type: PropType; default: () => string | object; }; formatPlaceholder: { type: PropType; default: () => DateInputFormatPlaceholder; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; min: { type: PropType; default: () => Date; }; max: { type: PropType; default: () => Date; }; maxTime: { type: PropType; default: () => Date; }; minTime: { type: PropType; default: () => Date; }; name: PropType; label: PropType; placeholder: PropType; popupSettings: { type: PropType; default: () => {}; }; show: { type: PropType; default: any; }; tabIndex: { type: PropType; default: number; }; title: { type: PropType; default: () => ""; }; steps: { type: PropType; default: () => {}; }; value: PropType; weekNumber: { type: PropType; default: boolean; }; width: PropType; validationMessage: PropType; required: { type: PropType; default: boolean; }; validityStyles: { type: PropType; default: boolean; }; validate: PropType; valid: { type: PropType; default: any; }; cancelButton: { type: PropType; default: boolean; }; inputAttributes: PropType; }>, { kendoAnchorRef: Ref; 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; }, ComponentOptionsMixin, 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, PublicProps, Readonly; default: any; }; defaultShow: { type: PropType; default: boolean; }; defaultValue: { type: PropType; default: any; }; disabled: { type: PropType; default: boolean; }; dateInput: { type: PropType; default: () => any; }; popup: { type: PropType; default: () => any; }; calendar: { type: PropType; default: () => any; }; focusedDate: PropType; format: { type: PropType; default: () => string | object; }; formatPlaceholder: { type: PropType; default: () => DateInputFormatPlaceholder; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; min: { type: PropType; default: () => Date; }; max: { type: PropType; default: () => Date; }; maxTime: { type: PropType; default: () => Date; }; minTime: { type: PropType; default: () => Date; }; name: PropType; label: PropType; placeholder: PropType; popupSettings: { type: PropType; default: () => {}; }; show: { type: PropType; default: any; }; tabIndex: { type: PropType; default: number; }; title: { type: PropType; default: () => ""; }; steps: { type: PropType; default: () => {}; }; value: PropType; weekNumber: { type: PropType; default: boolean; }; width: PropType; validationMessage: PropType; required: { type: PropType; default: boolean; }; validityStyles: { type: PropType; default: boolean; }; validate: PropType; valid: { type: PropType; default: any; }; cancelButton: { type: PropType; default: boolean; }; inputAttributes: PropType; }>> & 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: TimePickerIncrementalSteps_3; maxTime: Date; minTime: Date; validityStyles: boolean; valid: boolean; formatPlaceholder: DateInputFormatPlaceholder; defaultShow: boolean; dateInput: any; cancelButton: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * The arguments for the `onBlur` event of the DateTimePicker. */ export declare interface DateTimePickerBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * 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 `onFocus` event of the DateTimePicker. */ export declare interface DateTimePickerFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * 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—Does not set a size `class`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DateTimePicker. * * The available options are: * - small * - medium * - large * - circle * - full * - null—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—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`—Controls the popup animation. By default, the open and close animations are enabled. * - `appendTo:`— 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`—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_2; /** * 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; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; } /** * @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, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly> & 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_2 = 'start' | 'end' | null; /** * @hidden */ export declare const TimePicker: DefineComponent; default: boolean; }; nowButton: { type: PropType; default: any; }; defaultShow: { type: PropType; default: boolean; }; modelValue: { type: PropType; default: any; }; defaultValue: { type: PropType; default: () => any; }; dateInput: { type: PropType; default: () => any; }; popup: { type: PropType; default: () => any; }; disabled: { type: PropType; default: boolean; }; format: { type: PropType; default: () => string | object; }; formatPlaceholder: { type: PropType; default: () => DateInputFormatPlaceholder; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; min: { type: PropType; default: () => Date; }; max: { type: PropType; default: () => Date; }; name: PropType; label: PropType; placeholder: PropType; popupSettings: { type: PropType; default: () => {}; }; show: { type: PropType; default: any; }; tabIndex: { type: PropType; default: number; }; steps: { type: PropType; default: () => {}; }; smoothScroll: { type: PropType; default: boolean; }; title: { type: PropType; default: () => ""; }; value: { type: PropType; default: () => any; }; width: PropType; validationMessage: PropType; required: { type: PropType; default: boolean; }; validityStyles: { type: PropType; default: boolean; }; validate: PropType; valid: { type: PropType; default: any; }; inputAttributes: PropType; }>, { kendoAnchorRef: Ref; 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: FocusEvent): void; handleBlur(event: FocusEvent): void; timeBlur(event: FocusEvent): void; timeFocus(): void; createBlurTimeout(): void; handleValueReject(_: any): void; handleIconClick(event: any): void; handleIconMouseDown(event: any): void; handleKeyDown(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { changemodel: (value: Date | null) => true; 'update:modelValue': (value: Date | null) => true; iconclick: (event: Event) => true; change: (event: TimePickerChangeEvent) => true; focus: (event: TimePickerFocusEvent) => true; blur: (event: TimePickerBlurEvent) => true; keydown: (event: KeyboardEvent) => true; open: (event: TimePickerOpenEvent) => true; close: (event: TimePickerCloseEvent) => true; }, string, PublicProps, Readonly; default: boolean; }; nowButton: { type: PropType; default: any; }; defaultShow: { type: PropType; default: boolean; }; modelValue: { type: PropType; default: any; }; defaultValue: { type: PropType; default: () => any; }; dateInput: { type: PropType; default: () => any; }; popup: { type: PropType; default: () => any; }; disabled: { type: PropType; default: boolean; }; format: { type: PropType; default: () => string | object; }; formatPlaceholder: { type: PropType; default: () => DateInputFormatPlaceholder; }; rounded: { type: PropType; validator: (value: string) => boolean; }; fillMode: { type: PropType; validator: (value: string) => boolean; }; size: { type: PropType<"small" | "medium" | "large">; validator: (value: string) => boolean; }; id: PropType; ariaLabelledBy: PropType; ariaDescribedBy: PropType; min: { type: PropType; default: () => Date; }; max: { type: PropType; default: () => Date; }; name: PropType; label: PropType; placeholder: PropType; popupSettings: { type: PropType; default: () => {}; }; show: { type: PropType; default: any; }; tabIndex: { type: PropType; default: number; }; steps: { type: PropType; default: () => {}; }; smoothScroll: { type: PropType; default: boolean; }; title: { type: PropType; default: () => ""; }; value: { type: PropType; default: () => any; }; width: PropType; validationMessage: PropType; required: { type: PropType; default: boolean; }; validityStyles: { type: PropType; default: boolean; }; validate: PropType; valid: { type: PropType; default: any; }; inputAttributes: PropType; }>> & Readonly<{ onBlur?: (event: TimePickerBlurEvent) => any; onChange?: (event: TimePickerChangeEvent) => any; onClose?: (event: TimePickerCloseEvent) => any; onFocus?: (event: TimePickerFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onOpen?: (event: TimePickerOpenEvent) => any; onChangemodel?: (value: Date) => any; "onUpdate:modelValue"?: (value: Date) => any; onIconclick?: (event: Event) => any; }>, { required: boolean; value: Date; title: string; tabIndex: number; popup: any; disabled: boolean; format: string | object; max: Date; min: Date; defaultValue: Date; show: boolean; popupSettings: PopupProps; 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 `onBlur` event of the TimePicker. */ export declare interface TimePickerBlurEvent { /** * The native browser blur event. */ event: FocusEvent; } /** * 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 arguments for the `onFocus` event of the TimePicker. */ export declare interface TimePickerFocusEvent { /** * The native browser focus event. */ event: FocusEvent; } /** * The interface which defines all possible incremental steps in the TimePicker. */ declare interface TimePickerIncrementalSteps_2 { 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—Does not set a size `class`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the TimeInput. * * The available options are: * - small * - medium * - large * - circle * - full * - null—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—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`—Controls the popup animation. By default, the open and close animations are enabled. * - `appendTo:`— 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`—Specifies a list of CSS classes that are used to style the popup. */ popupSettings?: DateInputsPopupSettings_2; /** * 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_2; /** * 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; /** * Sets the built-in HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ inputAttributes?: Object; } /** * @hidden */ declare interface TimeSelectorChangeEvent { event?: any; value: Date; target: any; } /** * @hidden */ export declare const ToggleButton: DefineComponent; ariaPressed: PropType; title: PropType; dir: PropType; selected: { type: PropType; default: any; }; togglable: { type: PropType; default: boolean; }; icon: { type: PropType; default: () => any; }; svgIcon: PropType; iconSize: { type: PropType; }; iconClass: { type: PropType; default: () => any; }; imageUrl: { type: PropType; default: () => any; }; imageAlt: PropType; disabled: { type: PropType; default: any; }; size: PropType<"small" | "medium" | "large">; rounded: PropType<"small" | "medium" | "large" | "full" | "none">; fillMode: PropType<"flat" | "link" | "solid" | "outline">; themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">; tabIndex: PropType; accessKey: PropType; id: PropType; type: PropType; role: PropType; }>, {}, { 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: FocusEvent): void; handleBlur(event: FocusEvent): void; handleKeypress(event: any): void; handleKeydown(event: any): void; handleContextmenu(event: any): void; }, ComponentOptionsMixin, ComponentOptionsMixin, { click: (event: Event) => true; mousedown: (event: MouseEvent) => true; mouseup: (event: MouseEvent) => true; pointerdown: (event: PointerEvent) => true; pointerup: (event: PointerEvent) => true; focus: (event: ButtonFocusEvent) => true; blur: (event: ButtonBlurEvent) => true; keypress: (event: KeyboardEvent) => true; keydown: (event: KeyboardEvent) => true; contextmenu: (event: MouseEvent) => true; }, string, PublicProps, Readonly; ariaPressed: PropType; title: PropType; dir: PropType; selected: { type: PropType; default: any; }; togglable: { type: PropType; default: boolean; }; icon: { type: PropType; default: () => any; }; svgIcon: PropType; iconSize: { type: PropType; }; iconClass: { type: PropType; default: () => any; }; imageUrl: { type: PropType; default: () => any; }; imageAlt: PropType; disabled: { type: PropType; default: any; }; size: PropType<"small" | "medium" | "large">; rounded: PropType<"small" | "medium" | "large" | "full" | "none">; fillMode: PropType<"flat" | "link" | "solid" | "outline">; themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">; tabIndex: PropType; accessKey: PropType; id: PropType; type: PropType; role: PropType; }>> & Readonly<{ onClick?: (event: Event) => any; onBlur?: (event: ButtonBlurEvent) => any; onContextmenu?: (event: MouseEvent) => any; onFocus?: (event: ButtonFocusEvent) => any; onKeydown?: (event: KeyboardEvent) => any; onKeypress?: (event: KeyboardEvent) => any; onMousedown?: (event: MouseEvent) => any; onMouseup?: (event: MouseEvent) => any; onPointerdown?: (event: PointerEvent) => any; onPointerup?: (event: PointerEvent) => any; }>, { icon: string; selected: boolean; disabled: boolean; togglable: boolean; iconClass: string; imageUrl: string; }, {}, {}, {}, 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 { }