/**----------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { ElementRef, OnDestroy, ChangeDetectorRef, EventEmitter, NgZone, OnInit, SimpleChanges, OnChanges, Renderer2, AfterViewInit, Injector } from '@angular/core'; import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, FormControl } from '@angular/forms'; import { Day } from '@progress/kendo-date-math'; import { PopupService } from '@progress/kendo-angular-popup'; import { IntlService } from '@progress/kendo-angular-intl'; import { MultiTabStop } from '@progress/kendo-angular-common'; import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { PickerService } from '../common/picker.service'; import { DisabledDatesService } from '../calendar/services/disabled-dates.service'; import { AdaptiveMode } from '../util'; import { CalendarComponent } from '../calendar/calendar.component'; import { TimeSelectorComponent } from '../timepicker/timeselector.component'; import { DateInputComponent } from '../dateinput/dateinput.component'; import { PreventableEvent } from '../preventable-event'; import { PopupSettings } from '../popup-settings.model'; import { DateInputFormatPlaceholder } from '../dateinput/models/format-placeholder.model'; import { DateInputIncrementalSteps } from '../dateinput/models/incremental-steps.model'; import { DateTimePickerActiveTab } from './models/active-tab.type'; import { CalendarType } from '../calendar/models/type'; import { CellTemplateDirective } from '../calendar/templates/cell-template.directive'; import { MonthCellTemplateDirective } from '../calendar/templates/month-cell-template.directive'; import { YearCellTemplateDirective } from '../calendar/templates/year-cell-template.directive'; import { DecadeCellTemplateDirective } from '../calendar/templates/decade-cell-template.directive'; import { CenturyCellTemplateDirective } from '../calendar/templates/century-cell-template.directive'; import { WeekNumberCellTemplateDirective } from '../calendar/templates/weeknumber-cell-template.directive'; import { HeaderTitleTemplateDirective } from '../calendar/templates/header-title-template.directive'; import { FormatSettings } from '../dateinput/models/format-settings.model'; import { DateInputSize } from '../common/models/size'; import { DateInputRounded } from '../common/models/rounded'; import { DateInputFillMode } from '../common/models/fillmode'; import { SVGIcon } from '@progress/kendo-svg-icons'; import { ActionSheetComponent } from '@progress/kendo-angular-navigation'; import { HeaderTemplateDirective } from '../calendar/templates/header-template.directive'; import { FooterTemplateDirective } from '../calendar/templates/footer-template.directive'; import { WeekDaysFormat } from '../common/models/week-days-format'; import { SegmentedItemSettings } from '@progress/kendo-angular-buttons'; import * as i0 from "@angular/core"; /** * Represents the Kendo UI DateTimePicker component for Angular. * Allows users to select both date and time values from an interactive calendar and time selector. * * @example * ```typescript * @Component({ * selector: 'my-app', * template: ` * * * ` * }) * export class AppComponent { * public dateTimeValue: Date = new Date(); * public minDate: Date = new Date(2000, 0, 1); * public maxDate: Date = new Date(2030, 11, 31); * } * ``` * * @remarks * Supported children components are: {@link DateTimePickerCustomMessagesComponent}. */ export declare class DateTimePickerComponent extends MultiTabStop implements OnInit, OnChanges, AfterViewInit, OnDestroy, ControlValueAccessor, Validator { private popupService; private intl; private cdr; private pickerService; private ngZone; wrapper: ElementRef; localization: LocalizationService; private disabledDatesService; private renderer; private injector; private adaptiveService; /** * @hidden */ calendarIcon: SVGIcon; /** * @hidden */ clockIcon: SVGIcon; /** * @hidden */ hostClasses: boolean; /** * @hidden */ get disabledClass(): boolean; /** * @hidden */ toggleButton: ElementRef; /** * @hidden */ get dateInput(): DateInputComponent; /** * @hidden */ get calendar(): CalendarComponent; /** * @hidden */ get timeSelector(): TimeSelectorComponent; /** * @hidden */ focusableId: string; /** * Sets the format of the displayed Calendar week days' names. * @default 'short' */ weekDaysFormat?: WeekDaysFormat; /** * Displays the days that fall out of the current month in the Calendar ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#displaying-other-month-days)). * You can set this to show or hide days from other months. * * For infinite Calendar the default value is `false`, while for classic Calendar it is `true`. */ showOtherMonthDays: boolean; /** * Sets the value of the DateTimePicker component. * You can set a specific date and time for the picker to display and use. * * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`. */ set value(value: Date | null); get value(): Date | null; /** * Specifies the date format for displaying the input value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/formats)). * * When using a string format, the same format is applied regardless of whether the input is focused or blurred. * When using a FormatSettings object, you can specify different inputFormat and displayFormat values for focused and blurred states. * * If a FormatSettings object is provided, the displayFormat value will be used for the popup TimePicker. */ set format(format: string | FormatSettings); get format(): string | FormatSettings; /** * The maximum year to assume to be from the current century when typing two-digit year value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/formats#two-digit-year-format)). * * The default value is 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; /** * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the DateTimePicker. * * @default 0 */ set tabindex(value: number); get tabindex(): number; /** * Sets the dates of the DateTimePicker that will be disabled * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-dates)). */ set disabledDates(value: ((date: Date) => boolean) | Date[] | Day[]); get disabledDates(): ((date: Date) => boolean) | Date[] | Day[]; /** * Configures the popup settings of the DateTimePicker * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#customizing-the-popup)). * * The available options are animate which controls the popup animation and by default, the open and close animations are enabled. * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component. * The `popupClass` option specifies a list of CSS classes that are used to style the popup. */ set popupSettings(settings: PopupSettings); get popupSettings(): PopupSettings; /** * Specifies the title of the input element of the DateTimePicker and the title text rendered * in the header of the popup (action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode). * @default '' */ adaptiveTitle: string; /** * Specifies the subtitle text rendered in the header of the popup (action sheet). * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode). * @default '' */ adaptiveSubtitle: string; /** * Specifies the `disabled` property of the DateTimePicker and determines whether the component is active * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-state)). * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/forms#managing-the-datetimepicker-disabled-state-in-reactive-forms). * @default false */ disabled: boolean; /** * Specifies the read-only state of the DateTimePicker * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/readonly-state#read-only-datetimepicker)). * @default false * * @default false */ readonly: boolean; /** * Determines whether the input field of the DateTimePicker is read-only * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/readonly-state#read-only-input)). * * If you set the [`readonly`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datetimepickercomponent#readonly) property value to `true`, * the input will be rendered in a read-only state regardless of the `readOnlyInput` value. * * @default false */ readOnlyInput: boolean; /** * Determines whether to display the **Cancel** button in the popup * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#toggling-the-cancel-button)). * @default true */ cancelButton: boolean; /** * Defines the descriptions of the format sections in the input field * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/placeholders#format-sections-description)). */ formatPlaceholder: DateInputFormatPlaceholder; /** * Specifies the hint which is displayed by the DateTimePicker when its value is `null` * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/placeholders#text-hints)). */ placeholder: string; /** * Configures the incremental steps of the DateInput and the popup component of the TimePicker * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/incremental-steps)). */ steps: DateInputIncrementalSteps; /** * Specifies the focused date of the popup Calendar * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#focused-dates)). */ focusedDate: Date; /** * Specifies the Calendar type. * * @default 'infinite' */ calendarType: CalendarType; /** * Determines whether to enable animation when navigating to previous/next Calendar view. * Applies to the [`classic`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datetimepickercomponent#calendartype) Calendar only. * * The feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill. * * @default false */ animateCalendarNavigation: boolean; /** * Determines whether to display a week number column in the `month` view of the popup Calendar * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#week-number-column)). * @default false */ weekNumber: boolean; /** * Specifies the smallest valid date. * The Calendar will not display dates before this value. * If the `min` value of the Calendar is selected, the TimePicker will not display * time entries before the specified time portion of this value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits)). */ set min(value: Date | null); get min(): Date; /** * Specifies the biggest valid date. * The Calendar will not display dates after this value. * If the `max` value of the Calendar is selected, the TimePicker will not display * time entries after the specified time portion of this value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits)). */ set max(value: Date | null); get max(): Date; /** * Determines whether the built-in `min` or `max` validators are enforced when validating a form * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits)). * * @default true */ rangeValidation: boolean; /** * Determines whether the built-in validator for disabled date ranges is enforced when validating a form * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-dates)). * @default true */ disabledDatesValidation: boolean; /** * Determines whether the built-in validation for incomplete dates is enforced when validating a form. * @default false */ incompleteDateValidation: boolean; /** * Determines whether to auto correct 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; /** * Specifies custom keys that move the focus to the next date format segment. */ autoSwitchKeys: string[]; /** * Determines whether you can use the mouse scroll to increase or decrease the time segment values. * * @default true */ enableMouseWheel: boolean; /** * Determines whether you can see a blinking caret inside the DateInput when possible. * * @default false */ allowCaretMode: boolean; /** * Renders a clear button when set to `true` after the input text or DateTimePicker value has been changed. * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event. * @default false */ clearButton: boolean; /** * Auto fills the rest of the date to the current date when the component loses focus. * * @default false */ autoFill: boolean; /** * Enables or disables the adaptive mode. The adaptive rendering is disabled by default. * @default 'none' */ adaptiveMode: AdaptiveMode; /** * Specifies the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for certain component functionalities. * * @remarks * This property is related to accessibility. */ inputAttributes: { [key: string]: string; }; /** * Fires each time the user selects a new value * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)). */ valueChange: EventEmitter; /** * Fires each time the popup is about to open * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)). * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain closed. */ open: EventEmitter; /** * Fires each time the popup is about to close * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)). * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain open. */ close: EventEmitter; /** * Fires each time the user focuses the component * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)). */ onFocus: EventEmitter; /** * Fires each time the user blurs the component * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)). */ onBlur: EventEmitter; /** * @hidden */ escape: EventEmitter; /** * Indicates whether the component is currently open. This is when the popup or action sheet is open. */ get isOpen(): boolean; /** * Indicates whether the component or its popup content is focused. */ get isActive(): boolean; set isActive(value: boolean); /** * Specifies the active tab when opening the popup * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#setting-the-default-tab)). */ set defaultTab(tab: DateTimePickerActiveTab); get defaultTab(): DateTimePickerActiveTab; /** * Specifies the size of the component. The default value is set by the Kendo theme. */ set size(size: DateInputSize); get size(): DateInputSize; /** * Specifies the border radius of the component. The default value is set by the Kendo theme. * */ set rounded(rounded: DateInputRounded); get rounded(): DateInputRounded; /** * Specifies the fill mode of the component. The default value is set by the Kendo theme. * */ set fillMode(fillMode: DateInputFillMode); get fillMode(): DateInputFillMode; /** * @hidden */ get tabSwitchTransition(): string; /** * @hidden * * Indicates whether the Calendar will be disabled. * The inactive tab component gets disabled and becomes inaccessible on tab click. */ get disableCalendar(): boolean; /** * @hidden * * Indicates whether the TimeSelector will be disabled. * The inactive tab component gets disabled and becomes inaccessible on tab click. */ get disableTimeSelector(): boolean; /** * @hidden */ get isAdaptiveModeEnabled(): boolean; /** * @hidden */ get isAdaptive(): boolean; /** * @hidden */ onResize(): void; /** * @hidden * * Controls whether the Calendar or the TimeSelector will be displayed. */ activeTab: DateTimePickerActiveTab; /** * @hidden * * Specifies the stripped time-related format that is used in the TimeSelector. * Updates each time the `format` property value changes. */ timeSelectorFormat: string; /** * @hidden */ timeSelectorMin: Date; /** * @hidden */ timeSelectorMax: Date; /** * @hidden */ calendarValue: Date; /** * @hidden */ calendarMin: Date; /** * @hidden */ calendarMax: Date; /** * @hidden */ checkIcon: SVGIcon; /** * @hidden */ windowSize: AdaptiveSize; /** * @hidden */ cellTemplate: CellTemplateDirective; /** * @hidden */ monthCellTemplate: MonthCellTemplateDirective; /** * @hidden */ yearCellTemplate: YearCellTemplateDirective; /** * @hidden */ decadeCellTemplate: DecadeCellTemplateDirective; /** * @hidden */ centuryCellTemplate: CenturyCellTemplateDirective; /** * @hidden */ weekNumberTemplate: WeekNumberCellTemplateDirective; /** * @hidden */ headerTitleTemplate: HeaderTitleTemplateDirective; /** * @hidden */ headerTemplate: HeaderTemplateDirective; /** * @hidden */ set headerTemplateRef(template: HeaderTemplateDirective); /** * @hidden */ footerTemplate: FooterTemplateDirective; /** * @hidden */ set footerTemplateRef(template: FooterTemplateDirective); /** * Toggles the visibility of the Calendar footer. * @default false */ footer: boolean; private get activeTabComponent(); private get appendTo(); private container; private popupTemplate; actionSheet: ActionSheetComponent; private get popupUID(); private get acceptButton(); private get cancelButtonElement(); private get dateTabButton(); private get timeTabButton(); private get todayButton(); private get popupClasses(); /** * @hidden */ get formControl(): FormControl; /** * @hidden */ get isControlRequired(): boolean; private popupRef; private _popupSettings; private _value; private _format; private _tabindex; private _defaultTab; private _min; private _max; private _disabledDates; private _isActive; private onControlTouched; private onControlChange; private onValidatorChange; private minValidateFn; private maxValidateFn; private disabledDatesValidateFn; private incompleteValidator; private subscriptions; private ariaActiveDescendantSubscription; private _size; private _rounded; private _fillMode; constructor(popupService: PopupService, intl: IntlService, cdr: ChangeDetectorRef, pickerService: PickerService, ngZone: NgZone, wrapper: ElementRef, localization: LocalizationService, disabledDatesService: DisabledDatesService, renderer: Renderer2, injector: Injector, adaptiveService: AdaptiveService); ngOnInit(): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * Focuses the DateTimePicker input if the popup is closed. * Moves the focus to the popup content if the popup is open. */ focus(): void; /** * Blurs the DateTimePicker component. */ blur(): void; /** * Toggles the visibility of the popup or action sheet. * If you use the `toggle` method to show or hide the popup or action sheet, * the `open` and `close` events do not fire. * * @param show - The state of the popup. */ toggle(show?: boolean): void; /** * @hidden */ writeValue(value: Date): void; /** * @hidden */ registerOnChange(fn: any): void; /** * @hidden */ registerOnTouched(fn: any): void; /** * @hidden */ setDisabledState(disabled: boolean): void; /** * @hidden */ validate(control: AbstractControl): ValidationErrors; /** * @hidden */ registerOnValidatorChange(fn: Function): void; /** * @hidden * * Used by the TextBoxContainer to determine if the floating label will render in the input. */ isEmpty(): boolean; /** * @hidden */ handleIconClick(event: MouseEvent): void; /** * @hidden */ handleFocus(): void; /** * @hidden */ handleBlur(event?: FocusEvent): void; /** * @hidden */ get tabItems(): SegmentedItemSettings[]; /** * @hidden */ get activeTabIndex(): number; /** * @hidden */ onTabChange(index: number): void; /** * @hidden */ handleButtonGroupKeydown(event: KeyboardEvent): void; /** * @hidden */ changeActiveTab(tab: DateTimePickerActiveTab): void; /** * @hidden */ handleTabChangeTransitionEnd(dateTimeSelector: HTMLElement, event: TransitionEvent): void; /** * @hidden */ onTabOutLastPart(): void; /** * @hidden */ onTabOutFirstPart(): void; /** * @hidden */ onTabOutNow(): void; /** * @hidden */ handleAccept(): void; /** * @hidden */ handleCancel(): void; /** * @hidden */ handleInputValueChange(value: Date): void; /** * @hidden */ handleDateInputClick(): void; /** * @hidden */ handleCalendarValueChange(): void; /** * @hidden */ handleKeyDown(event: KeyboardEvent): void; /** * @hidden */ handleTab(event: KeyboardEvent): void; /** * @hidden */ handleActionSheetCollapse(): void; /** * @hidden * * Prevents the diversion of the focus from the currently active element in the component. */ preventMouseDown(event: MouseEvent): void; /** * @hidden */ toggleActionSheet(show: boolean): void; private _togglePopup; /** * Changes the tab and the calendar or clock icon to the designated default. */ private resetActiveTab; private verifyValue; private verifyMinMaxRange; /** * Extracts the time slots and literals that are not preceded by date parts * and combines the resulting parts into a string. * If the provided `format` value does not contain any time parts, * returns the designated format of the default popup component of the `TimePicker`. */ private getTimeSelectorFormat; /** * Extracts the `displayFormat` from the provided `string | FormatSettings` value. * Falls back to the default input value if a falsy value parameter is passed. */ private getDisplayFormat; /** * The filter expression that filters out all format parts * except for `hour`, `minute`, `second`, `dayperiod`, and specific literals. * Literals remain only if they are not preceded by date parts. */ private timeFormatPartFilter; /** * @hidden */ toggleDateTime(open: boolean): void; private switchFocus; private openPopup; private setAriaActiveDescendant; private closePopup; private handleValueChange; /** * Indicates whether the focus target is part of this component. * Checks whether the focus target is inside the component or in the popup. */ private focusTargetInComponent; private setTimeSelectorMinMax; private setCalendarValue; /** * Runs a popup change detection if the popup is available. */ private detectPopupChanges; /** * Runs the provided function either in the Angular zone or in the current zone. * The execution zone depends on the predicate `runInZone` value that is passed. */ private run; private handleDateCompletenessChange; private setComponentClasses; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }