@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).
648 lines (647 loc) • 24 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ChangeDetectorRef, EventEmitter, ElementRef, Renderer2, AfterViewInit, OnChanges, OnDestroy, NgZone, DoCheck } from '@angular/core';
import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
import { Day } from '@progress/kendo-date-math';
import { HorizontalViewListComponent } from './horizontal-view-list.component';
import { BusViewService } from './services/bus-view.service';
import { SelectionService } from './services/selection.service';
import { DisabledDatesService } from './services/disabled-dates.service';
import { CellTemplateDirective } from './templates/cell-template.directive';
import { MonthCellTemplateDirective } from './templates/month-cell-template.directive';
import { YearCellTemplateDirective } from './templates/year-cell-template.directive';
import { DecadeCellTemplateDirective } from './templates/decade-cell-template.directive';
import { CenturyCellTemplateDirective } from './templates/century-cell-template.directive';
import { WeekNumberCellTemplateDirective } from './templates/weeknumber-cell-template.directive';
import { HeaderTitleTemplateDirective } from './templates/header-title-template.directive';
import { Action } from './models/navigation-action.enum';
import { KeyDown } from './models/keydown.interface';
import { CalendarView } from './models/view.type';
import { CalendarViewEnum } from './models/view.enum';
import { SelectionRangeEnd } from './models/selection-range-end.type';
import { SelectionRange } from './models/selection-range.interface';
import { CalendarSelection } from './models/selection';
import { CalendarOrientation } from './models/orientation';
import { NavigationService } from './services/navigation.service';
import { HeaderTemplateDirective } from './templates/header-template.directive';
import { FooterTemplateDirective } from './templates/footer-template.directive';
import { WeekDaysFormat } from '../common/models/week-days-format';
import { DateInputSize } from '../common/models/size';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export declare const RANGE_CALENDAR_VALUE_ACCESSOR: any;
/**
* @hidden
*/
export declare const RANGE_CALENDAR_RANGE_VALIDATORS: any;
/**
* Represents the Kendo UI MultiViewCalendar component for Angular.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-multiviewcalendar></kendo-multiviewcalendar>
* `
* })
* export class AppComponent { }
* ```
*/
export declare class MultiViewCalendarComponent implements AfterViewInit, ControlValueAccessor, OnChanges, DoCheck, OnDestroy, Validator {
bus: BusViewService;
element: ElementRef;
private navigator;
private renderer;
private cdr;
private zone;
private disabledDatesService;
private selectionService;
/**
* Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
* @default true
*/
showOtherMonthDays: boolean;
/**
* @hidden
*
* Determines whether to display the calendar header.
*/
showCalendarHeader: boolean;
/**
* @hidden
*
* TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
* Sets the size of the component.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
* * `none`
*
*/
set size(size: DateInputSize);
get size(): DateInputSize;
private _size;
/**
* @hidden
*/
id: string;
/**
* Sets or gets the `focusedDate` property of the Calendar and
* defines the focused date of the component
* ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
*
* > If the Calendar is out of the min or max range, it normalizes the defined `focusedDate`.
*/
set focusedDate(focusedDate: Date);
get focusedDate(): Date;
/**
* Toggles the visibility of the footer.
* @default false
*/
footer: boolean;
/**
* @hidden
*/
get headerId(): string;
/**
* @hidden
*/
get multiViewCalendarHeaderIdLabel(): string;
/**
* @hidden
*/
get calendarHeaderIdLabel(): string;
/**
* Sets or gets the `min` property of the Calendar and
* defines the minimum allowed date value.
* By default, the `min` value is `1900-1-1`.
*/
set min(min: Date);
get min(): Date;
/**
* Sets or gets the `max` property of the Calendar and
* defines the maximum allowed date value.
* By default, the `max` value is `2099-12-31`.
*/
set max(max: Date);
get max(): Date;
/**
* Determines whether the built-in min or max validators are enforced when validating a form.
*
* @default false
*/
rangeValidation: boolean;
/**
* Determines whether the built-in validator for disabled
* date ranges is enforced when validating a form
* ([see example](slug:disabled_dates_multiviewcalendar)).
*/
disabledDatesRangeValidation: boolean;
/**
* Sets the Calendar selection mode
* ([see example]({% slug selection_multiviewcalendar %})).
*
* The available values are:
* * `single` (default)
* * `multiple`
* * `range`
*/
set selection(_selection: CalendarSelection);
get selection(): CalendarSelection;
private _selection;
/**
* Allows reverse selection when using `range` selection.
* If `allowReverse` is set to `true`, the component skips the validation of whether the start date is after the end date.
*
* @default false
*/
allowReverse: boolean;
/**
* Sets or gets the `value` property of the Calendar and defines the selected value of the component.
*
* > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date)
instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or
an object of type `SelectionRange` when in `range` selection mode.
*/
set value(candidate: Date | Date[] | SelectionRange | null);
get value(): Date | Date[] | SelectionRange | null;
/**
* Sets or gets the `disabled` property of the Calendar and
* determines whether the component is active
* ([see example]({% slug disabled_multiviewcalendar %})).
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiviewcalendar#toc-managing-the-multiviewcalendar-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Sets or gets the `tabindex` property of the Calendar. Based on the
* [HTML `tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) behavior,
* it determines whether the component is focusable.
*/
tabindex: number;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Sets the format of the displayed Calendar week days' names.
* @default 'short'
*/
weekDaysFormat?: WeekDaysFormat;
/**
* @hidden
*/
isActive: boolean;
/**
* Sets the dates of the MultiViewCalendar that will be disabled
* ([see example]({% slug disabled_dates_multiviewcalendar %})).
*/
set disabledDates(value: ((date: Date) => boolean) | Date[] | Day[]);
/**
* Defines the active view that the Calendar initially renders
* ([see example]({% slug viewoptions_multiviewcalendar %})).
* By default, the active view is `month`.
*
* > You have to set `activeView` within the `topView`-`bottomView` range.
*/
activeView: CalendarView;
/**
* Defines the bottommost view, to which the user can navigate
* ([see example](slug:viewdepth_multiviewcalendar)).
*/
bottomView: CalendarView;
/**
* Defines the topmost view, to which the user can navigate.
*/
topView: CalendarView;
/**
* Determines whether to display a header for every view (for example the month name).
*/
showViewHeader: boolean;
/**
* Determines whether to enable animation when navigating to previous/next view.
*
* > This 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
*/
animateNavigation: boolean;
/**
* Determines whether to display a week number column in the `month` view
* ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
*/
weekNumber: boolean;
/**
* Specify, which end of the defined selection range should be marked as active.
*
* > Value will be ignored if the selection range is undefined.
* > If range selection is used then the default value is 'start'.
*/
set activeRangeEnd(_activeRangeEnd: SelectionRangeEnd);
get activeRangeEnd(): SelectionRangeEnd;
/**
* Sets or gets the `selectionRange` property of the Calendar and
* defines the selection range of the component
* ([see example](slug:selection_multiviewcalendar#toc-range-selection)).
* > We recommend using the `value` property as it now supports `range` selection.
*/
set selectionRange(range: SelectionRange);
get selectionRange(): SelectionRange;
/**
* Sets or gets the `views` property of the Calendar and
* defines the number of rendered months.
*/
views: number;
/**
* Specifies the orientation of the MultiViewCalendar.
*
* The available values are:
* * `horizontal` (default)
* * `vertical`
*/
orientation: CalendarOrientation;
/**
* Fires when the active view is changed
* ([see example](slug:events_multiviewcalendar)).
*/
activeViewChange: EventEmitter<CalendarView>;
/**
* Fires when navigating in the currently active view
* ([see example](slug:events_multiviewcalendar)).
*/
navigate: EventEmitter<{
activeView: CalendarView;
focusedDate: Date;
}>;
/**
* Fires when a view cell is entered
* ([see example](slug:events_multiviewcalendar)).
*/
cellEnter: EventEmitter<Date>;
/**
* Fires when a view cell is leaved
* ([see example](slug:events_multiviewcalendar)).
*/
cellLeave: EventEmitter<Date>;
/**
* Fires when the value is changed
* ([see example](slug:events_multiviewcalendar)).
*/
valueChange: EventEmitter<any>;
/**
* @hidden
* Fires when the range selection changes.
*/
rangeSelectionChange: EventEmitter<any>;
/**
* Fires each time the MultiViewCalendar gets blurred
* ([see example](slug:events_multiviewcalendar)).
*/
blurEvent: EventEmitter<any>;
/**
* Fires each time the MultiViewCalendar gets focused
* ([see example](slug:events_multiviewcalendar)).
*/
focusEvent: EventEmitter<any>;
/**
* @hidden
*/
focusCalendar: EventEmitter<any>;
/**
* @hidden
*/
onClosePopup: EventEmitter<KeyDown>;
/**
* @hidden
*/
onTabPress: EventEmitter<KeyDown>;
/**
* @hidden
*/
onShiftTabPress: EventEmitter<KeyDown>;
/**
* @hidden
*
* Queries the template for a cell template declaration.
* Ignored if a `[cellTemplate]` value is explicitly provided.
*/
cellTemplate: CellTemplateDirective;
/**
* @hidden
*
* Defines the template for each cell.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set cellTemplateRef(template: CellTemplateDirective);
get cellTemplateRef(): CellTemplateDirective;
/**
* @hidden
*
* Queries the template for a month cell template declaration.
* Ignored if a `[monthCellTemplate]` value is explicitly provided.
*/
monthCellTemplate: MonthCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each month cell.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set monthCellTemplateRef(template: MonthCellTemplateDirective);
get monthCellTemplateRef(): MonthCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a year cell template declaration.
* Ignored if a `[yearCellTemplate]` value is explicitly provided.
*/
yearCellTemplate: YearCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each year cell.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set yearCellTemplateRef(template: YearCellTemplateDirective);
get yearCellTemplateRef(): YearCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a decade cell template declaration.
* Ignored if a `[decadeCellTemplate]` value is explicitly provided.
*/
decadeCellTemplate: DecadeCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each decade cell.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set decadeCellTemplateRef(template: DecadeCellTemplateDirective);
get decadeCellTemplateRef(): DecadeCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a century cell template declaration.
* Ignored if a `[centuryCellTemplate]` value is explicitly provided.
*/
centuryCellTemplate: CenturyCellTemplateDirective;
/**
* @hidden
*
* Defines the template for each century cell.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set centuryCellTemplateRef(template: CenturyCellTemplateDirective);
get centuryCellTemplateRef(): CenturyCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a week number cell template declaration.
* Ignored if a `[weekNumberTemplate]` value is explicitly provided.
*/
weekNumberTemplate: WeekNumberCellTemplateDirective;
/**
* @hidden
*
* Defines the template for the week cell.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set weekNumberTemplateRef(template: WeekNumberCellTemplateDirective);
get weekNumberTemplateRef(): WeekNumberCellTemplateDirective;
/**
* @hidden
*
* Queries the template for a header title template declaration.
* Ignored if a `[headerTitleTemplate]` value is explicitly provided.
*/
headerTitleTemplate: HeaderTitleTemplateDirective;
/**
* @hidden
*
* Queries the template for a header template declaration.
*/
headerTemplate: HeaderTemplateDirective;
/**
* @hidden
*
* Queries the template for a header template declaration.
*/
footerTemplate: FooterTemplateDirective;
/**
* @hidden
*
* Defines the template for the Calendar footer.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set footerTemplateRef(template: FooterTemplateDirective);
get footerTemplateRef(): FooterTemplateDirective;
/**
* @hidden
*
* Defines the template for the header title.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set headerTitleTemplateRef(template: HeaderTitleTemplateDirective);
get headerTitleTemplateRef(): HeaderTitleTemplateDirective;
/**
* @hidden
*
* Defines the template for the Calendar header.
* Takes precedence over nested templates in the KendoMultiViewCalendar tag.
*/
set headerTemplateRef(template: HeaderTemplateDirective);
get headerTemplateRef(): HeaderTemplateDirective;
headerElement: ElementRef<HTMLElement>;
viewList: HorizontalViewListComponent;
cellUID: string;
isHovered: boolean;
activeDate: Date;
isPrevDisabled: boolean;
isNextDisabled: boolean;
prevView: Action;
nextView: Action;
selectedDates: Date[];
rangePivot: Date;
shouldHoverWhenNoStart: boolean;
private canHover;
private changes;
private valueSetter;
private selectionSetter;
private _min;
private _max;
private _focusedDate;
private _value;
private _selectionRange;
private _activeRangeEnd;
private resolvedPromise;
private onControlChange;
private onControlTouched;
private onValidatorChange;
private minValidateFn;
private maxValidateFn;
private disabledDatesRangeValidateFn;
private subscriptions;
private _cellTemplateRef;
private _monthCellTemplateRef;
private _yearCellTemplateRef;
private _decadeCellTemplateRef;
private _centuryCellTemplateRef;
private _weekNumberTemplateRef;
private _headerTitleTemplateRef;
private _headerTemplateRef;
private _footerTemplateRef;
get activeViewEnum(): CalendarViewEnum;
get bottomViewEnum(): CalendarViewEnum;
get topViewEnum(): CalendarViewEnum;
get widgetId(): string;
get ariaDisabled(): boolean;
/**
* @hidden
*/
get ariaActivedescendant(): string;
/**
* @hidden
*/
handleFocusout(event: any): void;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleMouseEnter(): void;
/**
* @hidden
*/
handleMouseLeave(): void;
/**
* @hidden
*/
handleMousedown(event: any): void;
/**
* @hidden
*/
handleClick(): void;
/**
* @hidden
*/
keydown(event: KeyDown): void;
constructor(bus: BusViewService, element: ElementRef, navigator: NavigationService, renderer: Renderer2, cdr: ChangeDetectorRef, zone: NgZone, disabledDatesService: DisabledDatesService, selectionService: SelectionService);
ngOnInit(): void;
ngOnChanges(changes: any): void;
ngDoCheck(): void;
ngOnDestroy(): void;
ngAfterViewInit(): void;
/**
* Focuses the host element of the Calendar.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="multiviewcalendar.focus()">Focus calendar</button>
* <kendo-multiviewcalendar #multiviewcalendar></kendo-multiviewcalendar>
* `
* })
* export class AppComponent { }
* ```
*/
focus(): void;
/**
* Blurs the Calendar component.
*/
blur(): void;
/**
* @hidden
*/
handleDateChange(args: {
selectedDates: Date[];
focusedDate: Date;
}): void;
/**
* @hidden
*/
onCellEnter(cellEnter: any, date: Date): void;
/**
* @hidden
*/
handleTodayButtonClick(args: {
selectedDates: Date[];
focusedDate: Date;
}): void;
/**
* @hidden
*/
setActiveDate(date: Date): void;
/**
* @hidden
*/
writeValue(candidate: Date | Date[]): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
validate(control: AbstractControl): {
[key: string]: any;
};
/**
* @hidden
*/
registerOnValidatorChange(fn: Function): void;
/**
* @hidden
*/
activeCellTemplate(): any;
/**
* @hidden
*/
navigateView(action: Action): void;
/**
* @hidden
*/
emitNavigate(focusedDate: Date): void;
/**
* @hidden
*/
emitCellEvent(emitter: any, args: any): void;
/**
* @hidden
*/
handleCellClick({ date, modifiers }: any): void;
/**
* @hidden
*/
handleWeekNumberClick(dates: Date[]): void;
private setClasses;
private verifyChanges;
private verifyValue;
private updateButtonState;
private parseSelectionToValue;
private setValue;
private setRangeSelectionToValue;
private performRangeSelection;
private performSelection;
static ɵfac: i0.ɵɵFactoryDeclaration<MultiViewCalendarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MultiViewCalendarComponent, "kendo-multiviewcalendar", ["kendo-multiviewcalendar"], { "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "showCalendarHeader": { "alias": "showCalendarHeader"; "required": false; }; "size": { "alias": "size"; "required": false; }; "id": { "alias": "id"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "disabledDatesRangeValidation": { "alias": "disabledDatesRangeValidation"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "allowReverse": { "alias": "allowReverse"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "weekDaysFormat": { "alias": "weekDaysFormat"; "required": false; }; "isActive": { "alias": "isActive"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "showViewHeader": { "alias": "showViewHeader"; "required": false; }; "animateNavigation": { "alias": "animateNavigation"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "activeRangeEnd": { "alias": "activeRangeEnd"; "required": false; }; "selectionRange": { "alias": "selectionRange"; "required": false; }; "views": { "alias": "views"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "cellTemplateRef": { "alias": "cellTemplate"; "required": false; }; "monthCellTemplateRef": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplateRef": { "alias": "yearCellTemplate"; "required": false; }; "decadeCellTemplateRef": { "alias": "decadeCellTemplate"; "required": false; }; "centuryCellTemplateRef": { "alias": "centuryCellTemplate"; "required": false; }; "weekNumberTemplateRef": { "alias": "weekNumberTemplate"; "required": false; }; "footerTemplateRef": { "alias": "footerTemplate"; "required": false; }; "headerTitleTemplateRef": { "alias": "headerTitleTemplate"; "required": false; }; "headerTemplateRef": { "alias": "headerTemplate"; "required": false; }; }, { "activeViewChange": "activeViewChange"; "navigate": "navigate"; "cellEnter": "cellEnter"; "cellLeave": "cellLeave"; "valueChange": "valueChange"; "rangeSelectionChange": "rangeSelectionChange"; "blurEvent": "blur"; "focusEvent": "focus"; "focusCalendar": "focusCalendar"; "onClosePopup": "onClosePopup"; "onTabPress": "onTabPress"; "onShiftTabPress": "onShiftTabPress"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, true, never>;
}