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

package/datetimepicker/DateTimeSelector.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { LocalizationService, DateFormatOptions } from '@progress/kendo-react-intl';
+import { Calendar, CalendarProps } from '../calendar/components/Calendar.js';
+import { TimePart } from '../timepicker/TimePart.js';
+import { DateInputsClassStructure } from '@progress/kendo-react-common';
+import { DateInputIncrementalSteps } from '../dateinput/models/index.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorChangeEvent<T = DateTimeSelector> {
+    nativeEvent?: any;
+    syntheticEvent: React.SyntheticEvent<any>;
+    value: Date | null;
+    target: T;
+    cancelButton?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorRejectEvent<T = DateTimeSelector> {
+    nativeEvent?: any;
+    syntheticEvent: React.SyntheticEvent<any>;
+    value: Date | null;
+    target: T;
+    cancelButton?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorProps<T = DateTimeSelector> {
+    value: Date | null;
+    onChange: (event: DateTimeSelectorChangeEvent<T>) => void;
+    onReject: (event: DateTimeSelectorRejectEvent<T>) => void;
+    disabled?: boolean;
+    cancelButton?: boolean;
+    min: Date;
+    max: Date;
+    minTime?: Date;
+    maxTime?: Date;
+    weekNumber?: boolean;
+    focusedDate?: Date;
+    format?: string | DateFormatOptions;
+    calendar?: React.ComponentType<CalendarProps<any>>;
+    steps?: DateInputIncrementalSteps;
+    mobileMode?: boolean;
+    footerActions?: boolean;
+    unstyled?: DateInputsClassStructure;
+}
+/**
+ * @hidden
+ */
+export interface DateTimeSelectorState {
+    tab: 'date' | 'time';
+    dateValue: Date | null;
+    timeValue: Date;
+}
+/**
+ * @hidden
+ */
+export declare class DateTimeSelector extends React.Component<DateTimeSelectorProps, DateTimeSelectorState> {
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        footerActions: boolean;
+    };
+    private _calendar;
+    private _timePart;
+    private _cancelButton;
+    private _acceptButton;
+    private _dateButtonRef;
+    private _calendarWrap;
+    private shouldFocusPart;
+    get calendar(): Calendar | null;
+    get timePart(): TimePart | null;
+    protected get hasDateValue(): boolean;
+    protected get localizationService(): LocalizationService;
+    constructor(props: DateTimeSelectorProps);
+    componentDidUpdate(prevProps: DateTimeSelectorProps, prevState: DateTimeSelectorState): void;
+    render(): React.JSX.Element;
+    focus: (args?: FocusOptions) => void;
+    private calendarElement;
+    protected get minTime(): Date | null;
+    protected get maxTime(): Date | null;
+    protected normalizeRange(candidate: Date, value: Date | null): Date | null;
+    protected hasActiveButton(): boolean | null;
+    protected mergeTime(current: Date | null, candidate: Date | null): Date | null;
+    protected mergeDate(candidate: Date | null, value: Date): Date | null;
+    protected move: (direction: 'left' | 'right') => void;
+    private dateTimeFooter;
+    handleReject: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+    handleAccept: (event: React.SyntheticEvent<HTMLButtonElement>, timeOverride?: Date) => void;
+    private handleNowClick;
+    private handleCalendarValueChange;
+    private handleTimeListContainerChange;
+    private handleDateClick;
+    private handleTimeClick;
+    private handleKeyDown;
+    private handleCancelKeyDown;
+    private handleSetKeyDown;
+    private handleDateKeyDown;
+    private handleTimeKeyDown;
+    private handleTimePartMount;
+}

package/datetimepicker/DateTimeSelector.mjs

@@ -11,7 +11,7 @@ import { dateTimePickerCancel as D, messages as f, dateTimePickerSet as _, date
 import { Button as g, ButtonGroup as x } from "@progress/kendo-react-buttons";
 import { Calendar as z } from "../calendar/components/Calendar.mjs";
 import { TimePart as A } from "../timepicker/TimePart.mjs";
-import { MIDNIGHT_DATE as v, MIN_TIME as F, MAX_TIME as L, getToday as V, setTime as P } from "../utils.mjs";
+import { MIDNIGHT_DATE as v, MAX_TIME as F, MIN_TIME as L, getToday as V, setTime as P } from "../utils.mjs";
 import { isEqualDate as k } from "@progress/kendo-date-math";
 import { classNames as l, uDateTimePicker as u, uTime as B, Keys as h, getActiveElement as I } from "@progress/kendo-react-common";
 import { getNow as w } from "../timepicker/utils.mjs";
@@ -225,8 +225,8 @@ const y = class y extends i.Component {
         ref: (c) => {
           this._timePart = c;
         },
-        min: this.minTime || F,
-        max: this.maxTime || L,
+        min: this.minTime || L,
+        max: this.maxTime || F,
         steps: this.props.steps,
         value: this.state.timeValue,
         format: r,

package/datetimepicker/models/DateTimePickerSettings.d.ts

@@ -0,0 +1,154 @@
+/**
+ * @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 { DateFormatOptions } from '@progress/kendo-react-intl';
+import { CalendarProps } from '../../calendar/components/Calendar.js';
+import { PopupProps } from '@progress/kendo-react-popup';
+import { DateInputIncrementalSteps, DateInputProps } from '../../index.js';
+/**
+ * @hidden
+ */
+export interface DateTimePickerSettings {
+    /**
+     * Enables the customization or the override of the default Calendar which is rendered by the DateTimePicker
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering#toc-customizing-the-calendar)).
+     */
+    calendar?: React.ComponentType<CalendarProps>;
+    /**
+     * Enables the customization or the override of the default Popup which is rendered by the DateTimePicker
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering#toc-customizing-the-popup)).
+     */
+    popup?: React.ComponentType<PopupProps>;
+    /**
+     * Enables the customization or the override of the default DateInput which is rendered by the DateTimePicker
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering#toc-customizing-the-dateinput)).
+     */
+    dateInput?: React.ComponentType<DateInputProps>;
+    /**
+     * Sets the `className` of the DateTimePicker.
+     */
+    className?: string;
+    /**
+     * Sets if the calendar popup is opened upon initial render.
+     * For more information, refer to the article on
+     * [uncontrolled components in React](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+     */
+    defaultShow?: boolean;
+    /**
+     * Specifies the incremental steps of the `DateInput` and the internal `TimePart` ([see examples](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/incremental-steps)).
+     *
+     * The available options are:
+     * - `year: Number`&mdash;Controls the incremental step of the year value.
+     * - `month: Number`&mdash;Controls the incremental step of the month value.
+     * - `day: Number`&mdash;Controls the incremental step of the day value.
+     * - `hour: Number`&mdash;Controls the incremental step of the hour value.
+     * - `minute: Number`&mdash;Controls the incremental step of the minute value.
+     * - `second: Number`&mdash;Controls the incremental step of the second value.
+     */
+    steps?: DateInputIncrementalSteps;
+    /**
+     * Determines whether the DateTimePicker is disabled
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/disabled-state)).
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the initial focusedDate of the Calendar inside the DateTimePicker
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/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/datetimepicker/formats)).
+     */
+    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/datetimepicker/placeholders)).
+     */
+    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](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/date-ranges)).
+     */
+    max?: Date;
+    /**
+     * Specifies the smallest valid date
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/date-ranges)).
+     */
+    min?: Date;
+    /**
+     * Specifies the smallest valid time within the day ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/date-ranges)).
+     */
+    minTime?: Date;
+    /**
+     * Specifies the greatest valid time within the day ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/date-ranges)).
+     */
+    maxTime?: Date;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     */
+    name?: string;
+    /**
+     * Fires each time any of the DateTimePicker elements gets blurred.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
+    /**
+     * Fires each time the user focuses any of the DateTimePicker elements.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
+    /**
+     * Specifies if the popup will be displayed
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/controlled-state#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;
+    /**
+     * Determines whether to display a week number column of the Calendar inside the DateTimePicker
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/weeks-numbers)).
+     */
+    weekNumber?: boolean;
+    /**
+     * Specifies the width of the DateTimePicker.
+     */
+    width?: number | string;
+    /**
+     * Determines whether to display the **Cancel** button in the popup.
+     */
+    cancelButton?: boolean;
+    /**
+     * Renders a floating label for the DateTimePicker.
+     */
+    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/datetimepicker/placeholders).
+     */
+    placeholder?: string | null;
+}

package/datetimepicker/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 { DateTimePickerSettings } from './DateTimePickerSettings.js';
+export { DateTimePickerSettings };