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

package/datetimepicker/DateTimeSelector.d.ts

@@ -0,0 +1,188 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TimePickerIncrementalSteps } from '../timepicker/models/main';
+import { DateFormatOptions } from '@progress/kendo-vue-intl';
+import { CalendarChangeEvent } from '..';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorChangeEvent {
+    event?: any;
+    value: Date | null;
+    target: any;
+    cancelButton?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorRejectEvent {
+    event?: any;
+    value: Date | null;
+    target: any;
+    cancelButton?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorProps {
+    value: Date | null;
+    disabled?: boolean;
+    cancelButton?: boolean;
+    min: Date;
+    max: Date;
+    minTime?: Date;
+    maxTime?: Date;
+    weekNumber?: boolean;
+    steps?: TimePickerIncrementalSteps;
+    focusedDate?: Date;
+    format?: string | DateFormatOptions;
+    calendar?: any;
+    onChange?: (event: DateTimeSelectorChangeEvent) => void;
+    onReject?: (event: DateTimeSelectorRejectEvent) => void;
+    onFocus?: (event: any) => void;
+    onBlur?: (event: any) => void;
+    onKeydown?: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorComputed {
+    [key: string]: any;
+    hasDateValue: boolean;
+    computedMinTime: Date | null;
+    computedMaxTime: Date | null;
+}
+/**
+ * @hidden
+ */
+declare const DateTimeSelector: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: PropType<Date>;
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    min: {
+        type: PropType<Date>;
+        default: Date;
+    };
+    max: {
+        type: PropType<Date>;
+        default: Date;
+    };
+    maxTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    minTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    weekNumber: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    steps: {
+        type: PropType<TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    focusedDate: PropType<Date>;
+    format: PropType<string | DateFormatOptions>;
+    calendar: PropType<any>;
+    onChange: PropType<(event: DateTimeSelectorChangeEvent) => void>;
+    onReject: PropType<(event: DateTimeSelectorRejectEvent) => void>;
+    onFocus: PropType<(event: any) => void>;
+    onBlur: PropType<(event: any) => void>;
+    onKeydown: PropType<(event: any) => void>;
+}>, {
+    kendoAnchorRef: import('vue').Ref<any, any>;
+    kendoLocalizationService: {};
+}, {
+    currentTab: any;
+    dateValue: any;
+    timeValue: DateConstructor;
+}, {
+    hasDateValue(): boolean;
+    computedMinTime(): Date | null;
+    computedMaxTime(): Date | null;
+}, {
+    handleBlur(event: any): void;
+    handleFocus(event: any): void;
+    focus(args?: any): void;
+    calendarElement(): any;
+    normalizeRange(candidate: Date, value: Date | null): Date | null;
+    hasActiveButton(): boolean;
+    mergeTime(current: Date | null, candidate: Date | null): Date | null;
+    mergeDate(candidate: Date | null, value: Date): Date | null;
+    move(direction: 'left' | 'right'): void;
+    handleReject(event: any): void;
+    handleAccept(event: any, timeOverride?: Date): void;
+    handleNowClick(event: any): void;
+    handleCalendarValueChange(event: CalendarChangeEvent): void;
+    handleTimeListContainerChange(candidate: Date): void;
+    handleDateClick(event: any): void;
+    handleTimeClick(event: any): void;
+    handleKeyDown(event: any): void;
+    handleTimePartMount(value: Date): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: PropType<Date>;
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    cancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    min: {
+        type: PropType<Date>;
+        default: Date;
+    };
+    max: {
+        type: PropType<Date>;
+        default: Date;
+    };
+    maxTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    minTime: {
+        type: PropType<Date>;
+        default: () => Date;
+    };
+    weekNumber: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    steps: {
+        type: PropType<TimePickerIncrementalSteps>;
+        default: () => {};
+    };
+    focusedDate: PropType<Date>;
+    format: PropType<string | DateFormatOptions>;
+    calendar: PropType<any>;
+    onChange: PropType<(event: DateTimeSelectorChangeEvent) => void>;
+    onReject: PropType<(event: DateTimeSelectorRejectEvent) => void>;
+    onFocus: PropType<(event: any) => void>;
+    onBlur: PropType<(event: any) => void>;
+    onKeydown: PropType<(event: any) => void>;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    weekNumber: boolean;
+    max: Date;
+    min: Date;
+    steps: TimePickerIncrementalSteps;
+    maxTime: Date;
+    minTime: Date;
+    cancelButton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { DateTimeSelector };

package/datetimepicker/interfaces/DateTimePickerFocusBlurEvents.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 DateTimePicker.
+ */
+export interface DateTimePickerFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}
+/**
+ * The arguments for the `onBlur` event of the DateTimePicker.
+ */
+export interface DateTimePickerBlurEvent {
+    /**
+     * The native browser blur event.
+     */
+    event: FocusEvent;
+}

package/datetimepicker/models/DateTimePickerSettings.d.ts

@@ -0,0 +1,199 @@
+/**
+ * @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 '../../dateinput/models/format-placeholder';
+import { DateFormatOptions } from '@progress/kendo-vue-intl';
+import { TimePickerIncrementalSteps } from '../../timepicker/models/main';
+/**
+ * @hidden
+ */
+export interface DateTimePickerSettings {
+    /**
+     * Enables the customization or the override of the default Calendar which is rendered by the DateTimePicker
+     * ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-calendar)).
+     */
+    calendar?: any;
+    /**
+     * Enables the customization or the override of the default Popup which is rendered by the DateTimePicker
+     * ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-popup)).
+     */
+    popup?: any;
+    /**
+     * Enables the customization or the override of the default DateInput which is rendered by the DateTimePicker
+     * ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-dateinput)).
+     */
+    dateInput?: any;
+    /**
+     * Sets if the calendar popup is opened upon initial render.
+     * For more information, refer to the article on
+     */
+    defaultShow?: boolean;
+    /**
+     * Determines whether the DateTimePicker is disabled
+     * ([see example]({% slug disabled_datetimepicker %})).
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the initial focusedDate of the Calendar inside the DateTimePicker
+     * ([see example]({% slug dates_datetimepicker %})).
+     */
+    focusedDate?: Date;
+    /**
+     * Specifies the date format that is used to display the input value
+     * ([see example]({% slug formats_datetimepicker %})).
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Defines the descriptions of the format sections in the input field
+     * ([more information and examples]({% slug placeholders_datetimepicker %})).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the `id` of the DateTimePicker.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specifies the greatest valid date
+     * ([see example]({% slug dateranges_datetimepicker %})).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid date
+     * ([see example]({% slug dateranges_datetimepicker %})).
+     */
+    min?: Date;
+    minTime?: Date;
+    maxTime?: Date;
+    /**
+     * Configures the `size` of the DateTimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DateTimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the DateTimePicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     */
+    name?: string;
+    /**
+     * Renders a floating label for the DateTimePicker.
+     */
+    label?: string;
+    /**
+     * Specifies the value of the placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Configures the popup options of the DateTimePicker.
+     *
+     * The available options are:
+     * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
+     * - `appendTo:`— Defines the container to which the Popup will
+     * be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
+     */
+    popupSettings?: object;
+    /**
+     * Fires each time any of the DateTimePicker elements gets blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the user focuses any of the DateTimePicker elements.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    onIconclick?: (event: any) => void;
+    /**
+     * Specifies if the popup will be displayed
+     * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-popup-state)).
+     */
+    show?: boolean;
+    /**
+     * Sets the `tabIndex` property of the DateTimePicker.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the DateTimePicker.
+     */
+    title?: string;
+    /**
+     * Configures the incremental steps of the DateTimePicker.
+     *
+     * > If the incremental step is greater than `1`, the **Now** button will be hidden.
+     */
+    steps?: TimePickerIncrementalSteps;
+    /**
+     * Determines whether to display a week number column of the Calendar inside the DateTimePicker
+     * ([see example]({% slug weeksnumbers_calendar %})).
+     */
+    weekNumber?: boolean;
+    /**
+     * Specifies the width of the DateTimePicker.
+     */
+    width?: number | string;
+    /**
+     * Determines whether to display the **Cancel** button in the popup.
+     */
+    cancelButton?: boolean;
+    /**
+     * Specifies the validate of the DateTimePicker.
+     */
+    validate?: boolean;
+    /**
+     * Controls the form error message of the component. If set to an empty string, no error will be thrown.
+     *
+     */
+    validationMessage?: string;
+    /**
+     * Sets the built-in HTML attributes of the inner focusable input element.
+     * Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes?: Object;
+}

package/datetimepicker/models/main.d.ts

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

package/defaults.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @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 declare const MIDNIGHT_DATE: Date;
+/**
+ * @hidden
+ */
+export declare const MIN_DATE: Date;
+/**
+ * @hidden
+ */
+export declare const MAX_DATE: Date;
+/**
+ * @hidden
+ */
+export declare const MIN_TIME: Date;
+/**
+ * @hidden
+ */
+export declare const MAX_TIME: Date;