UNPKG

@progress/kendo-angular-dateinputs

Version:

Kendo UI for Angular Date Inputs Package - Everything you need to add date selection functionality to apps (DatePicker, TimePicker, DateInput, DateRangePicker, DateTimePicker, Calendar, and MultiViewCalendar).

755 lines (754 loc) 28.7 kB
/**----------------------------------------------------------------------------------------- * Copyright © 2025 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 * 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: ` * <kendo-datetimepicker * [(value)]="dateTimeValue" * [format]="'g'" * [min]="minDate" * [max]="maxDate"> * </kendo-datetimepicker> * ` * }) * 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<HTMLElement>; 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<HTMLSpanElement>; /** * @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]({% slug datetimepicker_calendar_options %}#toc-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]({% slug formats_datetimepicker %})). * * 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]({% slug formats_datetimepicker %}#toc-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. */ set tabindex(value: number); get tabindex(): number; /** * Sets the dates of the DateTimePicker that will be disabled * ([see example]({% slug disabled_dates_datetimepicker %})). */ set disabledDates(value: ((date: Date) => boolean) | Date[] | Day[]); get disabledDates(): ((date: Date) => boolean) | Date[] | Day[]; /** * Configures the popup settings of the DateTimePicker * ([see example]({% slug datetimepicker_popup_options %}#toc-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`](slug:api_dateinputs_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`](slug:api_dateinputs_adaptivemode). * @default '' */ adaptiveSubtitle: string; /** * Specifies the `disabled` property of the DateTimePicker and determines whether the component is active * ([see example]({% slug disabled_datetimepicker %})). * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datetimepicker#toc-managing-the-datetimepicker-disabled-state-in-reactive-forms). * @default false */ disabled: boolean; /** * Specifies the read-only state of the DateTimePicker * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)). * @default false * * @default false */ readonly: boolean; /** * Determines whether the input field of the DateTimePicker is read-only * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)). * * If you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-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]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)). * @default true */ cancelButton: boolean; /** * Defines the descriptions of the format sections in the input field * ([see example]({% slug placeholders_datetimepicker %}#toc-format-sections-description)). */ formatPlaceholder: DateInputFormatPlaceholder; /** * Specifies the hint which is displayed by the DateTimePicker when its value is `null` * ([see example]({% slug placeholders_datetimepicker %}#toc-text-hints)). */ placeholder: string; /** * Configures the incremental steps of the DateInput and the popup component of the TimePicker * ([see example]({% slug incrementalsteps_datetimepicker %})). */ steps: DateInputIncrementalSteps; /** * Specifies the focused date of the popup Calendar * ([see example]({% slug datetimepicker_calendar_options %}#toc-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`]({% slug api_dateinputs_datetimepickercomponent %}#toc-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]({% slug datetimepicker_calendar_options %}#toc-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]({% slug dateranges_datetimepicker %})). */ 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]({% slug dateranges_datetimepicker %})). */ 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](slug:dateranges_datetimepicker)). * * @default true */ rangeValidation: boolean; /** * Determines whether the built-in validator for disabled date ranges is enforced when validating a form * ([see example](slug:disabled_dates_datetimepicker)). * @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. */ inputAttributes: { [key: string]: string; }; /** * Fires each time the user selects a new value * ([see example](slug:events_datetimepicker)). */ valueChange: EventEmitter<Date>; /** * Fires each time the popup is about to open * ([see example](slug:events_datetimepicker)). * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain closed. */ open: EventEmitter<PreventableEvent>; /** * Fires each time the popup is about to close * ([see example](slug:events_datetimepicker)). * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain open. */ close: EventEmitter<PreventableEvent>; /** * Fires each time the user focuses the component * ([see example](slug:events_datetimepicker)). */ onFocus: EventEmitter<any>; /** * Fires each time the user blurs the component * ([see example](slug:events_datetimepicker)). */ onBlur: EventEmitter<any>; /** * @hidden */ escape: EventEmitter<any>; /** * 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]({% slug datetimepicker_popup_options %}#toc-setting-the-default-tab)). */ set defaultTab(tab: DateTimePickerActiveTab); get defaultTab(): DateTimePickerActiveTab; /** * Specifies the size of the component. * */ set size(size: DateInputSize); get size(): DateInputSize; /** * Specifies the border radius of the component. * */ set rounded(rounded: DateInputRounded); get rounded(): DateInputRounded; /** * Specifies the fill mode of the component. * */ 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(); /** * @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<HTMLElement>, 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 */ 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<DateTimePickerComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": { "alias": "focusableId"; "required": false; }; "weekDaysFormat": { "alias": "weekDaysFormat"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; "twoDigitYearMax": { "alias": "twoDigitYearMax"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "readOnlyInput": { "alias": "readOnlyInput"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "formatPlaceholder": { "alias": "formatPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "calendarType": { "alias": "calendarType"; "required": false; }; "animateCalendarNavigation": { "alias": "animateCalendarNavigation"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "disabledDatesValidation": { "alias": "disabledDatesValidation"; "required": false; }; "incompleteDateValidation": { "alias": "incompleteDateValidation"; "required": false; }; "autoCorrectParts": { "alias": "autoCorrectParts"; "required": false; }; "autoSwitchParts": { "alias": "autoSwitchParts"; "required": false; }; "autoSwitchKeys": { "alias": "autoSwitchKeys"; "required": false; }; "enableMouseWheel": { "alias": "enableMouseWheel"; "required": false; }; "allowCaretMode": { "alias": "allowCaretMode"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "autoFill": { "alias": "autoFill"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "defaultTab": { "alias": "defaultTab"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "headerTemplateRef": { "alias": "headerTemplate"; "required": false; }; "footerTemplateRef": { "alias": "footerTemplate"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "escape": "escape"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, true, never>; }