@progress/kendo-react-dateinputs 13.3.0 → 13.4.0-develop.2

package/dateinput/DateInput.mjs

@@ -11,44 +11,44 @@ import { cloneDate as D, isEqual as ke } from "@progress/kendo-date-math";
 import { Button as $ } from "@progress/kendo-react-buttons";
 import { caretAltUpIcon as _e, caretAltDownIcon as Fe } from "@progress/kendo-svg-icons";
 import { useInternationalization as He, useLocalization as Be } from "@progress/kendo-react-intl";
-import { useId as qe, useUnstyled as ze, usePropsContext as Q, classNames as h, uDateInput as O, createPropsContext as Ue, getActiveElement as ee } from "@progress/kendo-react-common";
+import { createPropsContext as qe, useId as ze, useUnstyled as Ue, usePropsContext as Q, classNames as h, uDateInput as O, getActiveElement as ee } from "@progress/kendo-react-common";
 import { FloatingLabel as We } from "@progress/kendo-react-labels";
 import { DateInput as je } from "@progress/kendo-dateinputs-common";
-import { DEFAULT_FORMAT as Ke, DEFAULT_FORMAT_PLACEHOLDER as Je, isInRange as Ye } from "./utils.mjs";
-import { nullable as u, MAX_DATE as Xe, MIN_DATE as Ze, MIN_TIME as Ge, MAX_TIME as $e } from "../utils.mjs";
+import { DEFAULT_FORMAT_PLACEHOLDER as Ke, DEFAULT_FORMAT as Je, isInRange as Ye } from "./utils.mjs";
+import { MAX_TIME as Xe, MIN_TIME as Ze, MIN_DATE as Ge, MAX_DATE as $e, nullable as u } from "../utils.mjs";
 import { increaseValue as T, messages as M, decreaseValue as S } from "../messages/index.mjs";
 import { isInTimeRange as Qe } from "../timepicker/utils.mjs";
 import et from "../common/ClearButton.mjs";
 import { DateInputIntl as tt } from "./dateInputIntl.mjs";
 const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
   var G;
-  const ae = qe(t.id), ie = He(), E = Be(), le = ze(), F = Q(te, t).unstyled || le, {
-    format: P = l.format,
-    size: oe = l.size,
-    rounded: ue = l.rounded,
-    fillMode: se = l.fillMode,
-    formatPlaceholder: ce = l.formatPlaceholder,
-    spinners: de = l.spinners,
-    disabled: I = l.disabled,
-    min: me = l.min,
-    max: fe = l.max,
-    minTime: ge = l.minTime,
-    maxTime: ve = l.maxTime,
-    validityStyles: ye = l.validityStyles,
-    validationMessage: H = l.validationMessage,
-    placeholder: f = l.placeholder,
-    enableMouseWheel: be = l.enableMouseWheel,
-    autoCorrectParts: he = l.autoCorrectParts,
-    autoSwitchParts: Oe = l.autoSwitchParts,
-    allowCaretMode: Ee = l.allowCaretMode,
-    twoDigitYearMax: Ie = l.twoDigitYearMax,
-    ariaHasPopup: xe = l.ariaHasPopup,
-    autoFocus: g = l.autoFocus
+  const ae = ze(t.id), ie = He(), E = Be(), oe = Ue(), F = Q(te, t).unstyled || oe, {
+    format: P = o.format,
+    size: le = o.size,
+    rounded: ue = o.rounded,
+    fillMode: se = o.fillMode,
+    formatPlaceholder: ce = o.formatPlaceholder,
+    spinners: de = o.spinners,
+    disabled: I = o.disabled,
+    min: fe = o.min,
+    max: me = o.max,
+    minTime: ge = o.minTime,
+    maxTime: ve = o.maxTime,
+    validityStyles: ye = o.validityStyles,
+    validationMessage: H = o.validationMessage,
+    placeholder: m = o.placeholder,
+    enableMouseWheel: be = o.enableMouseWheel,
+    autoCorrectParts: he = o.autoCorrectParts,
+    autoSwitchParts: Oe = o.autoSwitchParts,
+    allowCaretMode: Ee = o.allowCaretMode,
+    twoDigitYearMax: Ie = o.twoDigitYearMax,
+    ariaHasPopup: xe = o.ariaHasPopup,
+    autoFocus: g = o.autoFocus
   } = Q(te, t), d = () => w.current !== void 0 ? w.current : a.current && a.current.value, B = () => {
     const n = a.current && a.current.currentText || "", i = d();
-    return f != null && !Ae.focused && !i ? f : n;
+    return m != null && !Ae.focused && !i ? m : n;
   }, q = () => t.required !== void 0 ? t.required : !1, R = () => {
-    const n = d() || t.value, i = me, b = fe, V = Ye(n, i, b) && Qe(n, ge, ve), k = H !== void 0, _ = (!q() || n != null) && V, Ve = t.valid !== void 0 ? t.valid : _;
+    const n = d() || t.value, i = fe, b = me, V = Ye(n, i, b) && Qe(n, ge, ve), k = H !== void 0, _ = (!q() || n != null) && V, Ve = t.valid !== void 0 ? t.valid : _;
     return {
       customError: k,
       rangeOverflow: n && b.getTime() < n.getTime() || !1,
@@ -57,14 +57,14 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
       valueMissing: n === null
     };
   }, Ce = () => {
-    o.current && o.current.focus();
+    l.current && l.current.focus();
   }, z = () => new tt(ie), x = () => {
     const n = d();
     return {
       format: P,
       steps: t.steps,
       formatPlaceholder: ce,
-      placeholder: f,
+      placeholder: m,
       selectPreviousSegmentOnBackspace: !0,
       value: t.value || n,
       intlService: z(),
@@ -84,12 +84,12 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
     inputFormat: n,
     displayFormat: n
   }, U = (n) => {
-    w.current = d(), Ne(), m.current = n, w.current = void 0;
+    w.current = d(), Ne(), f.current = n, w.current = void 0;
   }, W = (n) => {
     t.onChange && t.onChange(n);
   }, j = (n) => {
-    ee(document) === o.current && n.preventDefault();
-  }, Se = () => new je(o.current, {
+    ee(document) === l.current && n.preventDefault();
+  }, Se = () => new je(l.current, {
     ...x(),
     format: Me(x().format),
     events: {
@@ -99,39 +99,39 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
       click: W
     }
   }), K = () => {
-    o.current && o.current.setCustomValidity && o.current.setCustomValidity(
-      R().valid ? "" : H || l.validationMessage
+    l.current && l.current.setCustomValidity && l.current.setCustomValidity(
+      R().valid ? "" : H || o.validationMessage
     );
   }, J = r.useCallback(
     (n) => {
       var i;
-      if (o.current && g && n) {
+      if (l.current && g && n) {
         const b = (a == null ? void 0 : a.current).currentText, V = (a == null ? void 0 : a.current).currentText.search(/[^a-zA-Z]/), k = b[V], _ = b.split(k)[0].length;
         s.current && s.current.classList.add("k-focus"), (i = a == null ? void 0 : a.current) == null || i.selectNearestSegment(_);
       }
     },
     [g]
   ), Pe = (n) => {
-    !o.current || !a.current || U(n);
+    !l.current || !a.current || U(n);
   }, Re = (n) => {
     n.preventDefault();
     const i = ee(document);
-    o.current && i !== o.current && o.current.focus({ preventScroll: !0 });
+    l.current && i !== l.current && l.current.focus({ preventScroll: !0 });
   }, c = (n) => {
     const i = d();
-    m.current && t.onChange && !ke(m.current.oldValue, i) && t.onChange.call(void 0, {
+    f.current && t.onChange && !ke(f.current.oldValue, i) && t.onChange.call(void 0, {
       syntheticEvent: n,
-      nativeEvent: m.current.event,
-      value: m.current.value,
+      nativeEvent: f.current.event,
+      value: f.current.value,
       target: C.current
-    }), m.current = null;
+    }), f.current = null;
   }, Le = (n) => {
     var i;
     (i = a.current) == null || i.modifyDateSegmentValue(1), c(n);
   }, pe = (n) => {
     var i;
     (i = a.current) == null || i.modifyDateSegmentValue(-1), c(n);
-  }, C = r.useRef(null), o = r.useRef(null), s = r.useRef(null);
+  }, C = r.useRef(null), l = r.useRef(null), s = r.useRef(null);
   r.useImperativeHandle(
     C,
     () => ({
@@ -143,7 +143,7 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
         return B();
       },
       get element() {
-        return o.current;
+        return l.current;
       },
       get name() {
         return t.name;
@@ -159,13 +159,13 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
       updateOnPaste: Pe
     })
   ), r.useImperativeHandle(re, () => C.current);
-  const a = r.useRef(null), L = r.useRef(null), p = r.useRef(!1), w = r.useRef(null), m = r.useRef(null), v = r.useRef(t), [Ae, A] = r.useState({ focused: !1 }), [, Ne] = r.useReducer((n) => n + 1, 0);
+  const a = r.useRef(null), L = r.useRef(null), p = r.useRef(!1), w = r.useRef(null), f = r.useRef(null), v = r.useRef(t), [Ae, A] = r.useState({ focused: !1 }), [, Ne] = r.useReducer((n) => n + 1, 0);
   r.useLayoutEffect(() => {
     p.current || (a.current = Se(), L.current = a.current.dateObject, p.current = !0);
   }, []), r.useEffect(() => (K(), p.current || s.current && s.current.addEventListener("wheel", j, { passive: !1 }), g && (A({ focused: !0 }), J(!0)), () => {
     s.current && s.current.removeEventListener("wheel", j);
   }), []), r.useEffect(() => {
-    K(), a.current && ((Te(v.current.format, P) || v.current.readonly !== t.readonly || JSON.stringify(v.current.steps) !== JSON.stringify(t.steps) || z().locale !== a.current.options.intlService.locale) && a.current.setOptions(x(), !0), v.current.value !== t.value && (L.current.getValue() !== null || t.value !== null) && L.current.setValue(t.value), t.ariaExpanded !== void 0 && t.ariaExpanded && (a.current.options.placeholder = null), t.ariaExpanded !== void 0 && !t.ariaExpanded && (a.current.options.placeholder = f), a.current.refreshElementValue(), v.current = {
+    K(), a.current && ((Te(v.current.format, P) || v.current.readonly !== t.readonly || JSON.stringify(v.current.steps) !== JSON.stringify(t.steps) || z().locale !== a.current.options.intlService.locale) && a.current.setOptions(x(), !0), v.current.value !== t.value && (L.current.getValue() !== null || t.value !== null) && L.current.setValue(t.value), t.ariaExpanded !== void 0 && t.ariaExpanded && (a.current.options.placeholder = null), t.ariaExpanded !== void 0 && !t.ariaExpanded && (a.current.options.placeholder = m), a.current.refreshElementValue(), v.current = {
       format: P,
       readonly: t.readonly,
       ariaExpanded: t.ariaExpanded,
@@ -186,7 +186,7 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
       className: h(
         O.wrapper({
           c: y,
-          size: oe,
+          size: le,
           fillMode: se,
           rounded: ue,
           disabled: I,
@@ -200,7 +200,7 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
       "input",
       {
         ref: (n) => {
-          o.current = n;
+          l.current = n;
         },
         role: t.ariaRole || "textbox",
         readOnly: t.readonly,
@@ -240,7 +240,6 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
       {
         tabIndex: -1,
         type: "button",
-        rounded: null,
         className: h(O.spinnerIncrease({ c: y })),
         icon: "caret-alt-up",
         svgIcon: _e,
@@ -253,7 +252,6 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
       {
         tabIndex: -1,
         type: "button",
-        rounded: null,
         className: h(O.spinnerDecrease({ c: y })),
         icon: "caret-alt-down",
         svgIcon: Fe,
@@ -268,7 +266,7 @@ const nt = "Please enter a valid value!", ne = r.forwardRef((t, re) => {
     {
       label: t.label,
       editorId: Y,
-      editorValue: (G = o.current) == null ? void 0 : G.value,
+      editorValue: (G = l.current) == null ? void 0 : G.value,
       editorValid: N,
       editorDisabled: I,
       children: Z,
@@ -343,24 +341,24 @@ ne.propTypes = {
   validationMessage: e.string,
   required: e.bool,
   valid: e.bool,
-  size: e.oneOf([null, "small", "medium", "large"]),
-  rounded: e.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: e.oneOf([null, "solid", "flat", "outline"]),
+  size: e.oneOf(["small", "medium", "large"]),
+  rounded: e.oneOf(["small", "medium", "large", "full"]),
+  fillMode: e.oneOf(["solid", "flat", "outline"]),
   autoFocus: e.bool,
   inputAttributes: e.object
 };
-const l = {
-  format: Ke,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
-  formatPlaceholder: Je,
+const o = {
+  format: Je,
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
+  formatPlaceholder: Ke,
   spinners: !1,
   disabled: !1,
-  max: D(Xe),
-  min: D(Ze),
-  minTime: D(Ge),
-  maxTime: D($e),
+  max: D($e),
+  min: D(Ge),
+  minTime: D(Ze),
+  maxTime: D(Xe),
   validityStyles: !0,
   validationMessage: nt,
   placeholder: null,
@@ -371,10 +369,10 @@ const l = {
   twoDigitYearMax: 68,
   ariaHasPopup: "grid",
   autoFocus: !1
-}, te = Ue();
+}, te = qe();
 ne.displayName = "KendoReactDateInput";
 export {
   ne as DateInput,
   te as DateInputPropsContext,
-  l as dateInputDefaultProps
+  o as dateInputDefaultProps
 };

package/dateinput/dateInputIntl.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateFieldNameOptions, DateFormatOptions, DateFormatPart, NumberFormatOptions } from '@progress/kendo-intl';
+import { IntlService } from '@progress/kendo-react-intl';
+/**
+ * @hidden
+ */
+export declare class DateInputIntl {
+    private service;
+    format: (format: string, ...values: any[]) => string;
+    toString: (value: any, format: any, localeId?: string) => string;
+    formatDate: (value: Date, format?: string | DateFormatOptions, localeId?: string) => string;
+    parseDate: (value: string, format?: string | DateFormatOptions | string[] | DateFormatOptions[], localeId?: string) => Date;
+    parseNumber: (value: string, format?: string | NumberFormatOptions, localeId?: string) => number;
+    formatNumber: (value: number, format: string | NumberFormatOptions, localeId?: string) => string;
+    splitDateFormat: (format: string | DateFormatOptions, localeId?: string) => DateFormatPart[];
+    numberSymbols: (localeId?: string) => void;
+    firstDay: (localeId?: string) => number;
+    weekendRange: (localeId?: string) => any;
+    dateFieldName: (options: DateFieldNameOptions, localeId?: string) => string;
+    dateFormatNames: (localeId: any, options: any) => any;
+    cldr: any;
+    locale: string;
+    constructor(service: IntlService);
+}

package/dateinput/models/DateInputSettings.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as React } from 'react';
+import { DateInputFormatPlaceholder } from './format-placeholder.js';
+import { DateInputIncrementalSteps } from './incremental-steps.js';
+import { DateFormatOptions } from '@progress/kendo-react-intl';
+/**
+ * @hidden
+ */
+export interface DateInputSettings {
+    /**
+     * Specifies the `date` format which is used for formatting the value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/formats)). 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](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/placeholders)).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the width of the DateInput.
+     */
+    width?: number | string;
+    /**
+     * Sets the `tabIndex` property of the DateInput.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the DateInput.
+     */
+    title?: string;
+    /**
+     * Specifies the incremental steps of the DateInput ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/incremental-steps)).
+     *
+     * 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](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/date-ranges)).
+     */
+    min?: Date;
+    /**
+     * Specifies the greatest date that is valid ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/date-ranges)).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest time that is valid ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/date-ranges#toc-limiting-the-time-range)).
+     */
+    minTime?: Date;
+    /**
+     * Specifies the greatest time that is valid ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/date-ranges#toc-limiting-the-time-range)).
+     */
+    maxTime?: Date;
+    /**
+     * Determines whether the DateInput is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/disabled-state)).
+     */
+    disabled?: boolean;
+    /**
+     * Specifies whether the **Up** and **Down** spin buttons will be rendered ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/spin-buttons)).
+     */
+    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?: React.ReactNode;
+    /**
+     * 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;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection.
+     * For more information, refer to the article on
+     * [placeholders](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/placeholders).
+     */
+    placeholder?: string | null;
+}

package/dateinput/models/common-package-props.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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 DateInputCommonPackageProps {
+    /**
+     * Determines whether to autocorrect invalid segments automatically.
+     *
+     * @default `true`
+     */
+    autoCorrectParts?: boolean;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default `true`
+     */
+    autoSwitchParts?: boolean;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     *
+     * @default `[]`
+     */
+    autoSwitchKeys?: string[];
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default `false`
+     */
+    allowCaretMode?: boolean;
+}

package/dateinput/models/dateinput-options.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateFormatOptions } from '@progress/kendo-intl';
+import { DateInputIncrementalSteps } from './incremental-steps.js';
+import { DateInputIntl } from '../dateInputIntl.js';
+import { DateInputFormatPlaceholder } from './format-placeholder.js';
+/**
+ * Represents the options type of the DateInput.
+ */
+export interface DateInputOptions {
+    /**
+     * Specifies the `date` format which is used for formatting the value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/formats)). If not set, the default format will be used.
+     */
+    format: string | DateFormatOptions;
+    /**
+     * Specifies the incremental steps of the DateInput ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/incremental-steps)).
+     *
+     * 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 descriptions of the format sections in the input field ([more information and example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/placeholders)).
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection.
+     * For more information, refer to the article on
+     * [placeholders](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/placeholders).
+     */
+    placeholder?: string | null;
+    /**
+     * Example usage of the `placeholder` property:
+     * ```jsx
+     * <DateInput placeholder="Enter a date" />
+     * ```
+     */
+    /**
+     * Determines wether should select the previous segment on backspace.
+     *
+     * @default `true`
+     */
+    selectPreviousSegmentOnBackspace: boolean;
+    /**
+     * Specifies the value of the DateInput.
+     */
+    value: Date | null;
+    /**
+     * The Intl object that provides internationalization support.
+     */
+    intlService: DateInputIntl;
+    /**
+     * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
+     *
+     * @default `false`
+     */
+    autoFill: boolean;
+    /**
+     * Enables mouse wheel scrolling to increase or decrease date segment values.
+     *
+     * @default `true`
+     */
+    enableMouseWheel: boolean;
+    /**
+     * Indicates whether the mouse scroll can be used to increase/decrease the date segments values.
+     *
+     * @default `true`
+     */
+    autoCorrectParts: boolean;
+    /**
+     * Determines whether to automatically move to the next segment after the user completes the current one.
+     *
+     * @default `true`
+     */
+    autoSwitchParts: boolean;
+    /**
+     * A string array representing custom keys, which will move the focus to the next date format segment.
+     *
+     * @default `[]`
+     */
+    autoSwitchKeys: string[];
+    /**
+     * The maximum year to assume to be from the current century when typing two-digit year value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/formats#toc-two---digit-year-max)).
+     * The default value of 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
+     *
+     * @default `68`
+     */
+    twoDigitYearMax: number;
+    /**
+     * Determines if the users should see a blinking caret inside the Date Input when possible.
+     *
+     * @default `false`
+     */
+    allowCaretMode: boolean;
+}

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;

package/dateinput/models/incremental-steps.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 all possible incremental steps in the DateInput.
+ */
+export interface DateInputIncrementalSteps {
+    /** Controls the incremental step of the year value */
+    year?: number;
+    /** Controls the incremental step of the month value */
+    month?: number;
+    /** Controls the incremental step of the day value */
+    day?: number;
+    /** Controls the incremental step of the hour value */
+    hour?: number;
+    /** Controls the incremental step of the minute value */
+    minute?: number;
+    /** Controls the incremental step of the second value */
+    second?: number;
+}

package/dateinput/models/index.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder } from './format-placeholder.js';
+import { DateInputIncrementalSteps } from './incremental-steps.js';
+import { DateInputSettings } from './DateInputSettings.js';
+import { DatePart, KendoDate } from './kendo-date.js';
+import { Mask } from './mask.js';
+import { Selection } from './selection.js';
+import { DateInputCommonPackageProps } from './common-package-props.js';
+export { DateInputFormatPlaceholder, DateInputCustomFormatPlaceholder, DateInputIncrementalSteps, DateInputSettings, DateInputCommonPackageProps, DatePart, KendoDate, Mask, Selection };