@progress/kendo-vue-dateinputs
Version:
1,813 lines (1,781 loc) • 93.7 kB
text/typescript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 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 { 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<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_2;
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`—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<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: () => string | object;
};
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_2>;
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;
};
inputAttributes: PropType<Object>;
}>, {
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: () => string | object;
};
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_2>;
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;
};
inputAttributes: PropType<Object>;
}>> & 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: string | object;
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'`—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' | string;
/**
* 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<ExtractPropTypes< {
defaultShow: {
type: PropType<boolean>;
default: boolean;
};
modelValue: {
type: PropType<Date>;
default: any;
};
defaultValue: {
type: PropType<Date>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
dateInput: {
type: PropType<any>;
default: () => any;
};
calendar: {
type: PropType<any>;
default: () => any;
};
toggleButton: {
type: PropType<any>;
default: () => any;
};
label: PropType<string>;
placeholder: PropType<string>;
popup: {
type: PropType<any>;
default: () => any;
};
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;
};
focusedDate: PropType<Date>;
format: {
type: PropType<string | DateFormatOptions>;
default: () => string | object;
};
formatPlaceholder: PropType<DateInputFormatPlaceholder_2>;
id: PropType<string>;
max: {
type: PropType<Date>;
default: () => Date;
};
min: {
type: PropType<Date>;
default: () => Date;
};
name: PropType<string>;
popupSettings: {
type: PropType<DateInputsPopupSettings>;
default: () => {};
};
show: {
type: PropType<boolean>;
default: any;
};
tabIndex: {
type: PropType<number>;
default: number;
};
title: {
type: PropType<string>;
default: () => "";
};
value: PropType<Date>;
weekNumber: PropType<boolean>;
width: PropType<string | number>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
validationMessage: PropType<string>;
required: PropType<boolean>;
validate: PropType<boolean>;
valid: {
type: PropType<boolean>;
default: any;
};
ariaLabel: PropType<string>;
inputAttributes: PropType<Object>;
}>, {
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: PropType<boolean>;
default: boolean;
};
modelValue: {
type: PropType<Date>;
default: any;
};
defaultValue: {
type: PropType<Date>;
default: any;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
dateInput: {
type: PropType<any>;
default: () => any;
};
calendar: {
type: PropType<any>;
default: () => any;
};
toggleButton: {
type: PropType<any>;
default: () => any;
};
label: PropType<string>;
placeholder: PropType<string>;
popup: {
type: PropType<any>;
default: () => any;
};
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;
};
focusedDate: PropType<Date>;
format: {
type: PropType<string | DateFormatOptions>;
default: () => string | object;
};
formatPlaceholder: PropType<DateInputFormatPlaceholder_2>;
id: PropType<string>;
max: {
type: PropType<Date>;
default: () => Date;
};
min: {
type: PropType<Date>;
default: () => Date;
};
name: PropType<string>;
popupSettings: {
type: PropType<DateInputsPopupSettings>;
default: () => {};
};
show: {
type: PropType<boolean>;
default: any;
};
tabIndex: {
type: PropType<number>;
default: number;
};
title: {
type: PropType<string>;
default: () => "";
};
value: PropType<Date>;
weekNumber: PropType<boolean>;
width: PropType<string | number>;
validityStyles: {
type: PropType<boolean>;
default: boolean;
};
validationMessage: PropType<string>;
required: PropType<boolean>;
validate: PropType<boolean>;
valid: {
type: PropType<boolean>;
default: any;
};
ariaLabel: PropType<string>;
inputAttributes: PropType<Object>;
}>> & 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;
}>, {
title: string;
tabIndex: number;
size: string;
format: string | object;
max: Date;
min: Date;
rounded: string;
fillMode: string;
disabled: boolean;
defaultValue: Date;
show: boolean;
popupSettings: DateInputsPopupSettings;
popup: any;
modelValue: Date;
validityStyles: boolean;
valid: boolean;
defaultShow: boolean;
dateInput: any;
calendar: any;
toggleButton: 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—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—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<ExtractPropTypes< {
allowReverse: {
type: PropType<boolean>;
default: boolean;
};
calendarSettings: PropType<DateRangePickerCalendarSettings_2>;
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_2>;
focusedDate: PropType<Date>;
format: {
type: PropType<string | DateFormatOptions>;
default: () => string | object;
};
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_2>;
default: () => any;
};
show: {
type: PropType<boolean>;
default: any;
};
startDateInputSettings: PropType<DateRangePickerDateInputSettings_2>;
swapButton: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: PropType<number>;
value: {
type: PropType<SelectionRange>;
default: () => any;
};
inputAttributes: PropType<Object>;
}>, {
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_2>;
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_2>;
focusedDate: PropType<Date>;
format: {
type: PropType<string | DateFormatOptions>;
default: () => string | object;
};
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_2>;
default: () => any;
};
show: {
type: PropType<boolean>;
default: any;
};
startDateInputSettings: PropType<DateRangePickerDateInputSettings_2>;
swapButton: {
type: PropType<boolean>;
default: boolean;
};
tabIndex: PropType<number>;
value: {
type: PropType<SelectionRange>;
default: () => any;
};
inputAttributes: PropType<Object>;
}>> & 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: string | object;
max: Date;
min: D