@progress/kendo-vue-dateinputs/daterangepicker/DateRangePicker.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { DateInputChangeEvent } from '../dateinput/interfaces/DateInputEventArguments';
import { CalendarChangeEvent } from '../calendar/components/interfaces/CalendarEventArguments';
import { SelectionRange } from '../calendar/models/main';
import { DateRangePickerSettings } from './models/main';
import { PropType } from 'vue';
import { DateRangePickerFocusEvent, DateRangePickerBlurEvent } from './interfaces/DateRangePickerFocusBlurEvents';
/**
 * @hidden
 */
export interface ReverseClickEvent {
    event?: any;
}
/**
 * The arguments for the `onChange` event of the DateRangePicker.
 */
export interface DateRangePickerChangeEvent {
    event?: any;
    value: SelectionRange;
    show?: boolean;
    target: any;
    component?: any;
}
/**
 * The arguments for the `open` event of the DateRangePicker.
 */
export interface DateRangePickerOpenEvent {
    component: any;
}
/**
 * The arguments for the `close` event of the DateRangePicker.
 */
export interface DateRangePickerCloseEvent {
    component: any;
}
/**
 * Represents the props of the [Kendo UI for Vue DateRangePicker component]({% slug overview_daterangepicker %}).
 */
export 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 interface DateRangePickerData {
    currentShow: boolean;
    currentValue: SelectionRange;
    valueDuringOnChange: SelectionRange | undefined;
    shouldFocusDateInput: boolean;
    shouldFocusCalendar: boolean;
}
/**
 * @hidden
 */
export interface DateRangePickerComputed {
    [key: string]: any;
    rootClassName: object;
    computedValue: SelectionRange;
    computedShow: boolean;
}
/**
 * @hidden
 */
declare const DateRangePicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
    allowReverse: {
        type: PropType<boolean>;
        default: boolean;
    };
    calendarSettings: PropType<import('./models/DateRangePickerCalendarSettings').DateRangePickerCalendarSettings>;
    defaultShow: {
        type: PropType<boolean>;
        default: boolean;
    };
    defaultValue: {
        type: PropType<SelectionRange>;
        default: () => SelectionRange;
    };
    modelValue: {
        type: PropType<Date>;
        default: any;
    };
    disabled: {
        type: PropType<boolean>;
        default: boolean;
    };
    popup: PropType<any>;
    calendar: PropType<any>;
    startDateInput: PropType<any>;
    endDateInput: PropType<any>;
    endDateInputSettings: PropType<import('./models/DateRangePickerDateInputSettings').DateRangePickerDateInputSettings>;
    focusedDate: PropType<Date>;
    format: {
        type: PropType<string | import('@progress/kendo-vue-intl').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>;
        validator: (value: string) => boolean;
    };
    fillMode: {
        type: PropType<string>;
        validator: (value: string) => boolean;
    };
    size: {
        type: PropType<"small" | "medium" | "large">;
        validator: (value: string) => boolean;
    };
    popupSettings: {
        type: PropType<import('./models/DateRangePickerPopupSettings').DateRangePickerPopupSettings>;
        default: () => any;
    };
    show: {
        type: PropType<boolean>;
        default: any;
    };
    startDateInputSettings: PropType<import('./models/DateRangePickerDateInputSettings').DateRangePickerDateInputSettings>;
    swapButton: {
        type: PropType<boolean>;
        default: boolean;
    };
    tabIndex: PropType<number>;
    value: {
        type: PropType<SelectionRange>;
        default: () => any;
    };
    inputAttributes: PropType<Object>;
}>, {
    kendoAnchorRef: import('vue').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: 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;
}, import('vue').ComponentOptionsMixin, import('vue').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, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    allowReverse: {
        type: PropType<boolean>;
        default: boolean;
    };
    calendarSettings: PropType<import('./models/DateRangePickerCalendarSettings').DateRangePickerCalendarSettings>;
    defaultShow: {
        type: PropType<boolean>;
        default: boolean;
    };
    defaultValue: {
        type: PropType<SelectionRange>;
        default: () => SelectionRange;
    };
    modelValue: {
        type: PropType<Date>;
        default: any;
    };
    disabled: {
        type: PropType<boolean>;
        default: boolean;
    };
    popup: PropType<any>;
    calendar: PropType<any>;
    startDateInput: PropType<any>;
    endDateInput: PropType<any>;
    endDateInputSettings: PropType<import('./models/DateRangePickerDateInputSettings').DateRangePickerDateInputSettings>;
    focusedDate: PropType<Date>;
    format: {
        type: PropType<string | import('@progress/kendo-vue-intl').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>;
        validator: (value: string) => boolean;
    };
    fillMode: {
        type: PropType<string>;
        validator: (value: string) => boolean;
    };
    size: {
        type: PropType<"small" | "medium" | "large">;
        validator: (value: string) => boolean;
    };
    popupSettings: {
        type: PropType<import('./models/DateRangePickerPopupSettings').DateRangePickerPopupSettings>;
        default: () => any;
    };
    show: {
        type: PropType<boolean>;
        default: any;
    };
    startDateInputSettings: PropType<import('./models/DateRangePickerDateInputSettings').DateRangePickerDateInputSettings>;
    swapButton: {
        type: PropType<boolean>;
        default: boolean;
    };
    tabIndex: PropType<number>;
    value: {
        type: PropType<SelectionRange>;
        default: () => any;
    };
    inputAttributes: PropType<Object>;
}>> & 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: import('./models/DateRangePickerPopupSettings').DateRangePickerPopupSettings;
    allowReverse: boolean;
    modelValue: Date;
    defaultShow: boolean;
    swapButton: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export { DateRangePicker };