@progress/kendo-vue-dateinputs 8.0.3-develop.1 → 8.0.3-develop.3

package/daterangepicker/DateRangePicker.d.ts

@@ -0,0 +1,315 @@
+/**
+ * @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 };

package/daterangepicker/interfaces/DateRangePickerFocusBlurEvents.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` event of the DateRangePicker.
+ */
+export interface DateRangePickerFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}
+/**
+ * The arguments for the `onBlur` event of the DateRangePicker.
+ */
+export interface DateRangePickerBlurEvent {
+    /**
+     * The native browser blur event.
+     */
+    event: FocusEvent;
+}

package/daterangepicker/models/DateRangePickerCalendarSettings.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CalendarSettings } from '../../calendar/models/CalendarSettings';
+/**
+ * Represents the settings that can be passed to the Calendar inside the DateRangePicker.
+ */
+export interface DateRangePickerCalendarSettings extends CalendarSettings {
+}

package/daterangepicker/models/DateRangePickerDateInputSettings.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateInputSettings } from '../../dateinput/models/DateInputSettings';
+/**
+ * Represents the settings that can be passed to the DateInput inside the DateRangePicker.
+ */
+export interface DateRangePickerDateInputSettings extends DateInputSettings {
+}

package/daterangepicker/models/DateRangePickerPopupSettings.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupSettings } from '@progress/kendo-vue-popup';
+/**
+ * Represents the settings that can be passed to the Popup inside the DateRangePicker.
+ */
+export interface DateRangePickerPopupSettings extends PopupSettings {
+}

package/daterangepicker/models/DateRangePickerSettings.d.ts

@@ -0,0 +1,162 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateRangePickerCalendarSettings } from './DateRangePickerCalendarSettings';
+import { DateRangePickerDateInputSettings } from './DateRangePickerDateInputSettings';
+import { DateRangePickerPopupSettings } from './DateRangePickerPopupSettings';
+import { DateFormatOptions } from '@progress/kendo-vue-intl';
+/**
+ * @hidden
+ */
+export 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;
+}

package/daterangepicker/models/main.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateRangePickerCalendarSettings } from './DateRangePickerCalendarSettings';
+import { DateRangePickerDateInputSettings } from './DateRangePickerDateInputSettings';
+import { DateRangePickerSettings } from './DateRangePickerSettings';
+import { DateRangePickerPopupSettings } from './DateRangePickerPopupSettings';
+export { type DateRangePickerCalendarSettings, type DateRangePickerDateInputSettings, type DateRangePickerSettings, type DateRangePickerPopupSettings };