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

package/dateinput/DateInput.d.ts

@@ -0,0 +1,260 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { IntlService } from '@progress/kendo-vue-intl';
+import { Selection, DateInputFormatPlaceholder } from './models/main';
+import { FormComponentValidity } from '@progress/kendo-vue-common';
+import { DateInputChangeEvent } from './interfaces/DateInputEventArguments';
+import { DateInputFocusEvent } from './interfaces/DateInputFocusEvent';
+import { DateInputBlurEvent } from './interfaces/DateInputBlurEvent';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const DateInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: PropType<Date>;
+    value: PropType<Date>;
+    defaultValue: PropType<Date>;
+    format: {
+        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
+        default: () => string | object;
+    };
+    formatPlaceholder: {
+        type: PropType<DateInputFormatPlaceholder>;
+        default: () => DateInputFormatPlaceholder;
+    };
+    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;
+    };
+    tabIndex: PropType<number>;
+    title: PropType<string>;
+    steps: PropType<import('./models/incremental-steps').DateInputIncrementalSteps>;
+    placeholder: PropType<string>;
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    maxTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    minTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    spinners: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    name: PropType<string>;
+    dir: PropType<string>;
+    label: PropType<string>;
+    id: PropType<string>;
+    validationMessage: {
+        type: PropType<string>;
+        default: string;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validate: PropType<boolean>;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    ariaRole: {
+        type: PropType<string>;
+        default: string;
+    };
+    ariaControls: PropType<string>;
+    ariaLabel: PropType<string>;
+    ariaExpanded: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    ariaHasPopup: {
+        type: PropType<String>;
+        default: any;
+    };
+    inputAttributes: PropType<Object>;
+}>, {
+    inputRef: import('vue').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;
+    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): void;
+    triggerChange(event: any, oldValue: Date | null): void;
+    selectionBySymbol(symbol: string): Selection;
+    selectionByIndex(index: number): Selection;
+    switchDateSegment(offset: number): void;
+    modifyDateSegmentValue(offset: number, event: any): void;
+    validity(): FormComponentValidity;
+}, import('vue').ComponentOptionsMixin, import('vue').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, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: PropType<Date>;
+    value: PropType<Date>;
+    defaultValue: PropType<Date>;
+    format: {
+        type: PropType<string | import('@progress/kendo-vue-intl').DateFormatOptions>;
+        default: () => string | object;
+    };
+    formatPlaceholder: {
+        type: PropType<DateInputFormatPlaceholder>;
+        default: () => DateInputFormatPlaceholder;
+    };
+    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;
+    };
+    tabIndex: PropType<number>;
+    title: PropType<string>;
+    steps: PropType<import('./models/incremental-steps').DateInputIncrementalSteps>;
+    placeholder: PropType<string>;
+    max: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    min: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    maxTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    minTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    spinners: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    name: PropType<string>;
+    dir: PropType<string>;
+    label: PropType<string>;
+    id: PropType<string>;
+    validationMessage: {
+        type: PropType<string>;
+        default: string;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    validate: PropType<boolean>;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    ariaRole: {
+        type: PropType<string>;
+        default: string;
+    };
+    ariaControls: PropType<string>;
+    ariaLabel: PropType<string>;
+    ariaExpanded: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    ariaHasPopup: {
+        type: PropType<String>;
+        default: any;
+    };
+    inputAttributes: PropType<Object>;
+}>> & 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, import('vue').ComponentProvideOptions, true, {}, any>;
+export { DateInput };

package/dateinput/DateInput.mjs

@@ -9,7 +9,7 @@ import { defineComponent as T, createVNode as o, mergeProps as _, ref as O, inje
 import { isEqual as B, cloneDate as u } from "@progress/kendo-date-math";
 import { provideLocalizationService as E, provideIntlService as A } from "@progress/kendo-vue-intl";
 import { KendoDate as z } from "./models/kendo-date.mjs";
-import { getDefaultSlots as L, setRef as j, noop as R, getRef as N, canUseDOM as c, kendoThemeMaps as v, validatePackage as K, guid as q } from "@progress/kendo-vue-common";
+import { getDefaultSlots as L, noop as j, setRef as R, getRef as N, canUseDOM as c, kendoThemeMaps as v, validatePackage as K, guid as q } from "@progress/kendo-vue-common";
 import { Button as D } from "@progress/kendo-vue-buttons";
 import { packageMetadata as H } from "../package-metadata.mjs";
 import { isInRange as U, approximateStringMatching as X, defaultFormatPlaceholder as Y, defaultFormat as G } from "./utils.mjs";
@@ -426,7 +426,7 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       onClick: this.elementClick,
       onInput: this.elementChange,
       onKeydown: this.elementKeyDown,
-      onChange: R,
+      onChange: j,
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur,
       value: $,
@@ -436,7 +436,7 @@ const se = "Please enter a valid value!", De = /* @__PURE__ */ T({
       "aria-haspopup": F,
       "aria-controls": I,
       "aria-disabled": this.$props.disabled,
-      ref: j(this, "input")
+      ref: R(this, "input")
     }, M), null), e, this.$props.spinners && o("span", {
       class: "k-input-spinner k-spin-button",
       onMousedown: this.spinnersMouseDown

package/dateinput/interfaces/DateInputBlurEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 `onBlur` event of the DateInput.
+ */
+export interface DateInputBlurEvent {
+    /**
+     * The native browser blur event.
+     */
+    event: FocusEvent;
+}

package/dateinput/interfaces/DateInputComputed.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface DateInputComputed {
+    [key: string]: any;
+    computedValue: any;
+    wrapperClassNames: object;
+}

package/dateinput/interfaces/DateInputData.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KendoDate } from '../models/main';
+/**
+ * @hidden
+ */
+export interface DateInputData {
+    kendoDate: KendoDate;
+    currentFormat: string;
+    valueDuringOnChange: Date | null | undefined;
+    lastSelectedSymbol: string;
+    isFocused: boolean;
+}

package/dateinput/interfaces/DateInputEventArguments.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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 `change` event of the DateInput.
+ * The generic argument sets the target type of the event. Defaults to `DateInput`.
+ */
+export interface DateInputChangeEvent {
+    event?: any;
+    value: Date | null;
+    component: any;
+    target: any;
+}

package/dateinput/interfaces/DateInputFocusEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 DateInput.
+ */
+export interface DateInputFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}

package/dateinput/interfaces/DateInputMethods.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { IntlService } from '@progress/kendo-vue-intl';
+import { FormComponentValidity } from '@progress/kendo-vue-common';
+import { Selection } from '../models/main';
+/**
+ * @hidden
+ */
+export interface DateInputMethods {
+    [key: string]: any;
+    handleFocus?: (_: any) => void;
+    handleBlur?: (_: any) => void;
+    element: () => HTMLInputElement | null;
+    focus: () => void;
+    intl: () => IntlService;
+    setValidity: () => void;
+    spinnersMouseDown: (event: any) => void;
+    elementChange: (event: any) => void;
+    elementClick: (event: any) => void;
+    wheel: (event: any) => void;
+    increasePart: (event: any) => void;
+    decreasePart: (event: any) => void;
+    elementKeyDown: (event: any) => void;
+    setSelection: (selection: Selection) => void;
+    triggerChange: (event: any, oldValue: Date | null) => void;
+    selection: () => Selection;
+    selectionBySymbol: (symbol: string) => Selection;
+    selectionByIndex: (index: number) => Selection;
+    switchDateSegment: (offset: number) => void;
+    modifyDateSegmentValue: (offset: number, event: any) => void;
+    validity: () => FormComponentValidity;
+}

package/dateinput/interfaces/DateInputProps.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { DateInputSettings } from '../models/main';
+/**
+ * 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 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;
+}

package/dateinput/interfaces/DateInputState.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface DateInputState {
+    _element: any;
+    _inputId: string;
+    _emptyText: string;
+    inputRef: any;
+}

package/dateinput/models/DateInputSettings.d.ts

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

package/dateinput/models/format-placeholder.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The interface which defines a custom-format placeholder structure in the DateInput.
+ */
+export 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 type DateInputFormatPlaceholder = 'wide' | 'narrow' | 'short' | 'formatPattern' | DateInputCustomFormatPlaceholder;