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

package/datepicker/DatePicker.mjs

@@ -8,41 +8,41 @@
 import * as n from "react";
 import e from "prop-types";
 import { Popup as ut } from "@progress/kendo-react-popup";
-import { cloneDate as le, getDate as st } from "@progress/kendo-date-math";
-import { useId as ct, useAdaptiveModeContext as dt, usePropsContext as ft, canUseDOM as ie, AsyncFocusBlur as mt, classNames as ue, kendoThemeMaps as se, createPropsContext as pt, Keys as O } from "@progress/kendo-react-common";
+import { cloneDate as ie, getDate as st } from "@progress/kendo-date-math";
+import { createPropsContext as ct, useId as dt, useAdaptiveModeContext as ft, usePropsContext as mt, canUseDOM as le, AsyncFocusBlur as pt, classNames as ue, kendoThemeMaps as se, Keys as O } from "@progress/kendo-react-common";
 import { calendarIcon as gt } from "@progress/kendo-svg-icons";
 import { DateInput as ht } from "../dateinput/DateInput.mjs";
 import { Calendar as vt } from "../calendar/components/Calendar.mjs";
-import { nullable as r, MAX_DATE as bt, MIN_DATE as wt, isInDateRange as yt, setTime as Ct } from "../utils.mjs";
+import { MIN_DATE as bt, MAX_DATE as wt, isInDateRange as yt, setTime as Ct, nullable as r } from "../utils.mjs";
 import { toggleCalendar as ce, messages as Dt } from "../messages/index.mjs";
 import { useLocalization as Ot } from "@progress/kendo-react-intl";
-import { ToggleButton as Mt } from "./ToggleButton.mjs";
-import { PickerFloatingLabel as kt } from "../hooks/usePickerFloatingLabel.mjs";
+import { ToggleButton as kt } from "./ToggleButton.mjs";
+import { PickerFloatingLabel as Mt } from "../hooks/usePickerFloatingLabel.mjs";
 import { ActionSheetContent as Pt } from "@progress/kendo-react-layout";
 import { AdaptiveMode as Rt } from "../common/AdaptiveMode.mjs";
 const de = n.forwardRef((a, fe) => {
-  const L = ct(a.id), me = Ot(), h = dt(), {
-    defaultShow: pe = l.defaultShow,
-    defaultValue: ge = l.defaultValue,
-    dateInput: he = l.dateInput,
-    calendar: ve = l.calendar,
-    toggleButton: be = l.toggleButton,
-    popup: we = l.popup,
-    disabled: v = l.disabled,
-    format: ye = l.format,
-    max: R = l.max,
-    min: _ = l.min,
-    popupSettings: b = l.popupSettings,
-    tabIndex: Ce = l.tabIndex,
-    weekNumber: De = l.weekNumber,
-    validityStyles: K = l.validityStyles,
-    size: I = l.size,
-    rounded: S = l.rounded,
-    fillMode: E = l.fillMode,
-    autoFocus: Oe = l.autoFocus,
+  const L = dt(a.id), me = Ot(), h = ft(), {
+    defaultShow: pe = i.defaultShow,
+    defaultValue: ge = i.defaultValue,
+    dateInput: he = i.dateInput,
+    calendar: ve = i.calendar,
+    toggleButton: be = i.toggleButton,
+    popup: we = i.popup,
+    disabled: v = i.disabled,
+    format: ye = i.format,
+    max: R = i.max,
+    min: _ = i.min,
+    popupSettings: b = i.popupSettings,
+    tabIndex: Ce = i.tabIndex,
+    weekNumber: De = i.weekNumber,
+    validityStyles: K = i.validityStyles,
+    size: I = i.size,
+    rounded: S = i.rounded,
+    fillMode: E = i.fillMode,
+    autoFocus: Oe = i.autoFocus,
     show: q,
-    autoSwitchParts: Me,
-    autoSwitchKeys: ke,
+    autoSwitchParts: ke,
+    autoSwitchKeys: Me,
     twoDigitYearMax: Pe,
     ariaLabel: Re,
     adaptive: It,
@@ -66,13 +66,13 @@ const de = n.forwardRef((a, fe) => {
     onOpen: Y,
     onClose: $,
     ...j
-  } = ft(_t, a), x = () => {
-    if (ie)
+  } = mt(_t, a), x = () => {
+    if (le)
       return y.current && y.current.ownerDocument || window.document;
   }, u = () => !!(g.windowWidth && h && g.windowWidth <= (h == null ? void 0 : h.medium) && a.adaptive), f = () => {
-    const t = M.current !== void 0 ? M.current : B !== void 0 ? B : g.value;
-    return t !== null ? le(t) : null;
-  }, i = () => k.current !== void 0 ? k.current : q !== void 0 ? q : g.show, Fe = () => he || l.dateInput, Ne = () => be || l.toggleButton, ze = () => ve || l.calendar, Le = () => we || l.popup, X = () => a.required !== void 0 ? a.required : !1, T = () => {
+    const t = k.current !== void 0 ? k.current : B !== void 0 ? B : g.value;
+    return t !== null ? ie(t) : null;
+  }, l = () => M.current !== void 0 ? M.current : q !== void 0 ? q : g.show, Fe = () => he || i.dateInput, Ne = () => be || i.toggleButton, ze = () => ve || i.calendar, Le = () => we || i.popup, X = () => a.required !== void 0 ? a.required : !1, T = () => {
     const t = f() || B || null, o = _, s = R, P = yt(t, o, s), F = W !== void 0, N = (!X() || t != null) && P, z = H !== void 0 ? H : N;
     return {
       customError: F,
@@ -89,25 +89,25 @@ const de = n.forwardRef((a, fe) => {
   }, Z = (t) => {
     d.current = t;
   }, m = (t) => {
-    i() !== t && (D({ show: t }), t && Y && Y({ target: w.current }), !t && $ && $({ target: w.current }));
+    l() !== t && (D({ show: t }), t && Y && Y({ target: w.current }), !t && $ && $({ target: w.current }));
   }, We = (t) => {
     const o = f();
     return o && t ? Ct(t, o) : t;
   }, He = (t) => {
     b != null && b.onMouseDownOutside && b.onMouseDownOutside(t);
   }, G = (t, o) => {
-    D({ value: le(t || void 0) }), M.current = t, k.current = !1, u() || (p.current = !0), U && U({
+    D({ value: ie(t || void 0) }), k.current = t, M.current = !1, u() || (p.current = !0), U && U({
       syntheticEvent: o.syntheticEvent,
       nativeEvent: o.nativeEvent,
       value: f(),
-      show: i(),
+      show: l(),
       target: w.current
-    }), M.current = void 0, k.current = void 0, m(!1);
+    }), k.current = void 0, M.current = void 0, m(!1);
   }, Ue = (t) => {
     const o = We(t.value);
     G(o, t);
   }, J = () => {
-    const { popupClass: t, ...o } = b, s = i(), P = f(), F = P && st(P), N = ue(t), z = {
+    const { popupClass: t, ...o } = b, s = l(), P = f(), F = P && st(P), N = ue(t), z = {
       popupClass: "k-datepicker-popup",
       show: s,
       anchor: y.current,
@@ -133,13 +133,13 @@ const de = n.forwardRef((a, fe) => {
       className: u() ? "k-calendar-lg" : "",
       navigation: !u(),
       onChange: Ue
-    }, ae = ze(), it = Le();
-    return u() ? /* @__PURE__ */ n.createElement(ae, { _ref: Z, ...re }) : /* @__PURE__ */ n.createElement(it, { ...z }, /* @__PURE__ */ n.createElement(ae, { _ref: Z, ...re }));
+    }, ae = ze(), lt = Le();
+    return u() ? /* @__PURE__ */ n.createElement(ae, { _ref: Z, ...re }) : /* @__PURE__ */ n.createElement(lt, { ...z }, /* @__PURE__ */ n.createElement(ae, { _ref: Z, ...re }));
   }, Q = () => {
     D({ focused: !1 }), m(!1);
   }, Ye = () => {
     const { windowWidth: t = 0 } = g, o = {
-      expand: i(),
+      expand: l(),
       onClose: Q,
       title: _e,
       subTitle: Ie,
@@ -151,14 +151,14 @@ const de = n.forwardRef((a, fe) => {
   }, je = () => {
     D({ focused: !0 });
   }, Xe = () => {
-    m(!i());
+    m(!l());
   }, A = () => {
-    v || (p.current = !0, m(!i()));
+    v || (p.current = !0, m(!l()));
   }, Ze = (t) => {
     t.preventDefault();
   }, Ge = (t) => {
     const { altKey: o, keyCode: s } = t;
-    if (s === O.esc && i()) {
+    if (s === O.esc && l()) {
       p.current = !0, m(!1);
       return;
     }
@@ -181,7 +181,7 @@ const de = n.forwardRef((a, fe) => {
         return a.name;
       },
       get show() {
-        return i();
+        return l();
       },
       get validity() {
         return T();
@@ -197,7 +197,7 @@ const de = n.forwardRef((a, fe) => {
       focus: qe
     })
   ), n.useImperativeHandle(fe, () => w.current);
-  const M = n.useRef(void 0), k = n.useRef(void 0), Je = n.useRef(null), p = n.useRef(!1), V = n.useRef(!1), C = n.useRef(null), [g, Qe] = n.useState({
+  const k = n.useRef(void 0), M = n.useRef(void 0), Je = n.useRef(null), p = n.useRef(!1), V = n.useRef(!1), C = n.useRef(null), [g, Qe] = n.useState({
     value: ge,
     show: pe,
     focused: !1
@@ -205,17 +205,17 @@ const de = n.forwardRef((a, fe) => {
     Qe((o) => ({ ...o, ...t }));
   };
   n.useEffect(() => {
-    d.current && d.current.element && i() && !V.current && d.current.element.focus({ preventScroll: !0 }), u() && i() && !V.current && setTimeout(() => {
+    d.current && d.current.element && l() && !V.current && d.current.element.focus({ preventScroll: !0 }), u() && l() && !V.current && setTimeout(() => {
       d.current && d.current.element && d.current.element.focus({ preventScroll: !0 });
-    }, 300), c.current && c.current.element && !i() && p.current && c.current.element.focus({ preventScroll: !0 }), V.current = i(), p.current = !1;
+    }, 300), c.current && c.current.element && !l() && p.current && c.current.element.focus({ preventScroll: !0 }), V.current = l(), p.current = !1;
   }), n.useEffect(() => {
     var t;
-    return C.current = ie && window.ResizeObserver && new window.ResizeObserver((o) => Ke(o)), i() && et(), (t = x()) != null && t.body && C.current && C.current.observe(x().body), () => {
+    return C.current = le && window.ResizeObserver && new window.ResizeObserver((o) => Ke(o)), l() && et(), (t = x()) != null && t.body && C.current && C.current.observe(x().body), () => {
       var o;
       clearTimeout(Je.current), (o = x()) != null && o.body && C.current && C.current.disconnect();
     };
   }, []);
-  const ee = L + "-popup-id", tt = J(), nt = Fe(), ot = f(), rt = Ne(), at = Ye(), te = !K || T().valid, ne = me.toLanguageString(ce, Dt[ce]), lt = {
+  const ee = L + "-popup-id", tt = J(), nt = Fe(), ot = f(), rt = Ne(), at = Ye(), te = !K || T().valid, ne = me.toLanguageString(ce, Dt[ce]), it = {
     disabled: v,
     format: ye,
     formatPlaceholder: Se,
@@ -229,7 +229,7 @@ const de = n.forwardRef((a, fe) => {
     onChange: $e,
     required: a.required,
     _ref: c,
-    tabIndex: i() ? -1 : Ce,
+    tabIndex: l() ? -1 : Ce,
     title: a.title,
     valid: T().valid,
     validationMessage: W,
@@ -237,20 +237,17 @@ const de = n.forwardRef((a, fe) => {
     value: ot,
     label: void 0,
     placeholder: g.focused ? null : Ve,
-    ariaExpanded: i(),
-    size: null,
-    fillMode: null,
-    rounded: null,
+    ariaExpanded: l(),
     autoFill: a.autoFill,
     twoDigitYearMax: Pe,
     enableMouseWheel: a.enableMouseWheel,
     autoCorrectParts: a.autoCorrectParts,
-    autoSwitchParts: Me,
-    autoSwitchKeys: ke,
+    autoSwitchParts: ke,
+    autoSwitchKeys: Me,
     allowCaretMode: a.allowCaretMode,
     inputAttributes: Ee
   }, oe = /* @__PURE__ */ n.createElement(
-    mt,
+    pt,
     {
       onFocus: je,
       onBlur: u() ? void 0 : Q,
@@ -286,10 +283,10 @@ const de = n.forwardRef((a, fe) => {
         {
           _ref: c,
           ariaRole: "combobox",
-          ariaExpanded: i(),
+          ariaExpanded: l(),
           ariaControls: ee,
           autoFocus: Oe,
-          ...lt
+          ...it
         }
       ),
       /* @__PURE__ */ n.createElement(
@@ -300,7 +297,6 @@ const de = n.forwardRef((a, fe) => {
           svgIcon: gt,
           title: ne,
           className: "k-input-button",
-          rounded: null,
           onClick: u() ? void 0 : A,
           "aria-label": ne,
           fillMode: E,
@@ -311,7 +307,7 @@ const de = n.forwardRef((a, fe) => {
     ), u() && at)
   );
   return a.label ? /* @__PURE__ */ n.createElement(
-    kt,
+    Mt,
     {
       dateInput: c,
       label: a.label,
@@ -384,38 +380,38 @@ de.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"]),
   adaptive: e.bool,
   adaptiveTitle: e.string,
   adaptiveSubtitle: e.string,
   autoFocus: e.bool,
   inputAttributes: e.object
 };
-const l = {
+const i = {
   defaultShow: !1,
   defaultValue: null,
   dateInput: ht,
   calendar: vt,
-  toggleButton: Mt,
+  toggleButton: kt,
   popup: ut,
   disabled: !1,
   format: "d",
-  max: bt,
-  min: wt,
+  max: wt,
+  min: bt,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
   autoFocus: !1
-}, _t = pt();
+}, _t = ct();
 de.displayName = "KendoReactDatePicker";
 export {
   de as DatePicker,
   _t as DatePickerPropsContext,
-  l as datePickerDefaultProps
+  i as datePickerDefaultProps
 };

package/datepicker/ToggleButton.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { ButtonProps } from '@progress/kendo-react-buttons';
+/**
+ * Represents the props of the KendoReact [Toggle Button](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/togglebutton) component.
+ */
+export interface ToggleButtonProps extends ButtonProps {
+}
+/**
+ * Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker).
+ */
+export declare const ToggleButton: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<import('@progress/kendo-react-buttons').ButtonHandle | null>>;

package/datepicker/models/DatePickerSettings.d.ts

@@ -0,0 +1,248 @@
+/**
+ * @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 '../../dateinput/models/format-placeholder.js';
+import { DateInputsPopupSettings } from '../../PopupSettings.js';
+import { CalendarProps } from '../../calendar/components/Calendar.js';
+import { PopupProps } from '@progress/kendo-react-popup';
+import { DateInputProps, MultiViewCalendarProps } from '../../index.js';
+import { DateFormatOptions } from '@progress/kendo-react-intl';
+import { ToggleButtonProps } from '../ToggleButton.js';
+/**
+ * @hidden
+ */
+export interface DatePickerSettings {
+    /**
+     * Allows you to customize or replace the default Toggle button rendered by DatePicker.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-toggle-button)).
+     * Example usage of the `toggleButton` property:
+     * ```jsx
+     * <DatePicker toggleButton={CustomToggleButton} />
+     * ```
+     */
+    toggleButton?: React.ComponentType<ToggleButtonProps>;
+    /**
+     * Allows you to customize or replace the default Calendar rendered by DatePicker.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-calendar)).
+     * Example usage of the `calendar` property:
+     * ```jsx
+     * <DatePicker calendar={CustomCalendar} />
+     * ```
+     */
+    calendar?: React.ComponentType<CalendarProps<any>> | React.ComponentType<MultiViewCalendarProps<any>>;
+    /**
+     * Allows you to customize or replace the default Popup rendered by DatePicker.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-popup)).
+     * Example usage of the `popup` property:
+     * ```jsx
+     * <DatePicker popup={CustomPopup} />
+     * ```
+     */
+    popup?: React.ComponentType<PopupProps>;
+    /**
+     * Allows you to customize or replace the default DateInput rendered by DatePicker.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-dateinput)).
+     * Example usage of the `dateInput` property:
+     * ```jsx
+     * <DatePicker dateInput={CustomDateInput} />
+     * ```
+     */
+    dateInput?: React.ComponentType<DateInputProps<any>>;
+    /**
+     * Sets the `className` of the DatePicker.
+     * Example usage of the `className` property:
+     * ```jsx
+     * <DatePicker className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the default state of the DatePicker upon render ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/default-value)).
+     * Example usage of the `defaultShow` property:
+     * ```jsx
+     * <DatePicker defaultShow={true} />
+     * ```
+     */
+    defaultShow?: boolean;
+    /**
+     * Determines whether the DatePicker is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/disabled-state)).
+     * Example usage of the `disabled` property:
+     * ```jsx
+     * <DatePicker disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the focused date of the DatePicker ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date)).
+     * Example usage of the `focusedDate` property:
+     * ```jsx
+     * <DatePicker focusedDate={new Date()} />
+     * ```
+     */
+    focusedDate?: Date;
+    /**
+     * Specifies the date format that is used to display the input value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/formats)).
+     * Example usage of the `format` property:
+     * ```jsx
+     * <DatePicker format="MM/dd/yyyy" />
+     * ```
+     */
+    format?: string | DateFormatOptions;
+    /**
+     * Defines the descriptions of the format sections in the input field ([more information and examples](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/placeholders)).
+     * Example usage of the `formatPlaceholder` property:
+     * ```jsx
+     * <DatePicker formatPlaceholder="Enter date" />
+     * ```
+     */
+    formatPlaceholder?: DateInputFormatPlaceholder;
+    /**
+     * Specifies the `id` of the DatePicker.
+     * Example usage of the `id` property:
+     * ```jsx
+     * <DatePicker id="datepicker-id" />
+     * ```
+     */
+    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.
+     * Example usage of the `ariaDescribedBy` property:
+     * ```jsx
+     * <DatePicker ariaDescribedBy="description-id" />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     * Example usage of the `ariaLabelledBy` property:
+     * ```jsx
+     * <DatePicker ariaLabelledBy="label-id" />
+     * ```
+     */
+    ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     * Example usage of the `ariaLabel` property:
+     * ```jsx
+     * <DatePicker ariaLabel="Date Picker" />
+     * ```
+     */
+    ariaLabel?: string;
+    /**
+     * Specifies the greatest valid date ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date-ranges)).
+     * Example usage of the `max` property:
+     * ```jsx
+     * <DatePicker max={new Date(2099, 11, 31)} />
+     * ```
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid date ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date-ranges)).
+     * Example usage of the `min` property:
+     * ```jsx
+     * <DatePicker min={new Date(1900, 0, 1)} />
+     * ```
+     */
+    min?: Date;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     * Example usage of the `name` property:
+     * ```jsx
+     * <DatePicker name="datepicker-name" />
+     * ```
+     */
+    name?: string;
+    /**
+     * Fires each time any of the DatePicker elements gets blurred.
+     * Example usage of the `onBlur` property:
+     * ```jsx
+     * <DatePicker onBlur={(event) => console.log('Blur event:', event)} />
+     * ```
+     */
+    onBlur?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
+    /**
+     * Fires each time the user focuses any of the DatePicker elements.
+     * Example usage of the `onFocus` property:
+     * ```jsx
+     * <DatePicker onFocus={(event) => console.log('Focus event:', event)} />
+     * ```
+     */
+    onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
+    /**
+     * Configures the popup options of the DatePicker.
+     *
+     * The available options are:
+     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `appendTo`: &mdash; 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`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * Example usage of the `popupSettings` property:
+     * ```jsx
+     * <DatePicker popupSettings={{ animate: true, popupClass: 'custom-popup' }} />
+     * ```
+     */
+    popupSettings?: DateInputsPopupSettings;
+    /**
+     * Specifies if the calendar will be displayed ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/controlled-state#toc-controlling-the-popup-state)).
+     * Example usage of the `show` property:
+     * ```jsx
+     * <DatePicker show={true} />
+     * ```
+     */
+    show?: boolean;
+    /**
+     * Sets the `tabIndex` property of the DatePicker.
+     * Example usage of the `tabIndex` property:
+     * ```jsx
+     * <DatePicker tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Sets the title of the `input` element of the DatePicker.
+     * Example usage of the `title` property:
+     * ```jsx
+     * <DatePicker title="Date Picker Title" />
+     * ```
+     */
+    title?: string;
+    /**
+     * Determines whether to display a week number column in the `month` view of the Calendar ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/week-num-column)).
+     * Example usage of the `weekNumber` property:
+     * ```jsx
+     * <DatePicker weekNumber={true} />
+     * ```
+     */
+    weekNumber?: boolean;
+    /**
+     * Specifies the width of the DatePicker.
+     * Example usage of the `width` property:
+     * ```jsx
+     * <DatePicker width="300px" />
+     * ```
+     */
+    width?: number | string;
+    /**
+     * Renders a floating label for the DatePicker.
+     * Example usage of the `label` property:
+     * ```jsx
+     * <DatePicker label="Date Picker Label" />
+     * ```
+     */
+    label?: React.ReactNode;
+    /**
+     * 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/datepicker/placeholders).
+     * Example usage of the `placeholder` property:
+     * ```jsx
+     * <DatePicker placeholder="Enter a date" />
+     * ```
+     */
+    placeholder?: string | null;
+}

package/datepicker/models/index.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 { DatePickerSettings } from './DatePickerSettings.js';
+export { DatePickerSettings };