@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).
364 lines (363 loc) • 14.4 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, ElementRef, EventEmitter, TemplateRef, NgZone, OnInit, OnDestroy, ViewContainerRef, QueryList, Renderer2 } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Align, Collision, Margin, PopupAnimation, PopupService, PopupRef } from '@progress/kendo-angular-popup';
import { DateRangePopupTemplateDirective } from './date-range-popup-template.directive';
import { DateRangeService } from './date-range.service';
import { MultiViewCalendarComponent } from '../calendar/multiview-calendar.component';
import { PreventableEvent } from '../preventable-event';
import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
import { AdaptiveMode } from '../util';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { DateRangeSelectionDirective } from './date-range-selection.directive';
import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
import { KeyDown } from '../calendar/models/keydown.interface';
import { DateInputSize } from '../common/models/size';
import { CalendarView } from '../calendar/models/view.type';
import { Day } from '@progress/kendo-date-math';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI DateRangePopup component for Angular.
*
* @example
* ```ts
* import { DateInputsModule, DateRangeService } from '@progress/kendo-angular-dateinputs';
*
* _@Component({
* providers: [DateRangeService],
* selector: 'my-app',
* template: `
* <button #anchor (click)="popup.toggle()">Toggle</button>
* <kendo-daterange-popup [anchor]="anchor" #popup></kendo-daterange-popup>
* `
* })
* export class AppComponent {
* }
* ```
*/
export declare class DateRangePopupComponent implements OnInit, OnDestroy {
private popupService;
dateRangeService: DateRangeService;
private zone;
private renderer;
localization: LocalizationService;
private cdr;
private rtl;
private adaptiveService;
container: ViewContainerRef;
actionSheet: ActionSheetComponent;
defaultTemplate: TemplateRef<any>;
contentTemplate: DateRangePopupTemplateDirective;
dateRangeSelectionDirective: DateRangeSelectionDirective;
viewCalendar: QueryList<MultiViewCalendarComponent>;
contentCalendar: QueryList<MultiViewCalendarComponent>;
/**
* @hidden
*
* Determines whether to display the MultiViewCalendar header.
*/
showCalendarHeader: boolean;
/**
* Sets or gets the `focusedDate` property of the MultiViewCalendar and
* defines the focused date of the component
* ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
*
* > If the MultiViewCalendar is out of the min or max range, it normalizes the defined `focusedDate`.
*/
focusedDate: Date;
/**
* Sets the dates of the MultiViewCalendar that will be disabled
* ([see example]({% slug disabled_dates_multiviewcalendar %})).
*/
disabledDates: ((date: Date) => boolean) | Date[] | Day[];
/**
* Defines the active view that the MultiViewCalendar 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;
/**
* Sets or gets the `min` property of the MultiViewCalendar and
* defines the minimum allowed date value.
* By default, the `min` value is `1900-1-1`.
*/
min: Date;
/**
* Sets or gets the `max` property of the MultiViewCalendar and
* defines the maximum allowed date value.
* By default, the `max` value is `2099-12-31`.
*/
max: Date;
/**
* Allows reverse 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;
/**
* Determines whether to enable animation when navigating to previous/next view.
* @default false
*/
animateNavigation: boolean;
/**
* Sets or gets the `disabled` property of the MultiViewCalendar and
* determines whether the component is active
* ([see example]({% slug disabled_multiviewcalendar %})).
*/
disabled: boolean;
/**
* Sets or gets the `views` property of the MultiViewCalendar and
* defines the number of rendered months.
*
* @default 2
*/
views: number;
/**
* Determines whether to display a week number column in the `month` view
* ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
*/
weekNumber: boolean;
/**
* Controls the popup animation.
* By default, the opening and closing animations are enabled.
* For more information about controlling the popup animations,
* refer to the article on [animations]({% slug animations_popup %}).
*/
animate: boolean | PopupAnimation;
/**
* Specifies the element that will be used as an anchor. The popup opens next to that element.
* For more information, refer to the section on
* [aligning to specific components]({% slug alignmentpositioning_popup %}#toc-aligning-to-components).
*/
anchor: ElementRef;
/**
* Specifies the anchor pivot point.
* For more information, refer to the section on
* [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
*/
anchorAlign: Align;
/**
* Determines whether to display a header for every view (for example the month name).
*
* @default false
*/
showViewHeader: boolean;
/**
* Displays the days that fall out of the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
* @default false
*/
showOtherMonthDays: boolean;
/**
* Controls the popup container. By default, the popup is appended to the root component.
*/
appendTo: 'root' | 'component' | ViewContainerRef;
/**
* Configures the collision behavior of the popup.
* For more information, refer to the article on
* [viewport boundary detection]({% slug viewportboundarydetection_popup %}).
*/
collision: Collision;
/**
* Specifies the pivot point of the popup.
* For more information, refer to the section on
* [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
*/
popupAlign: Align;
/**
* Specifies the margin value that will be added to the popup dimensions in pixels
* and leaves a blank space between the popup and the anchor.
*/
margin: Margin;
/**
* Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
*/
adaptiveMode: AdaptiveMode;
/**
* Sets the title of the input element of the DateRangePopup 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).
*/
adaptiveTitle: string;
/**
* Sets the subtitle text rendered in the header of the popup(action sheet).
* Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
*/
adaptiveSubtitle: string;
/**
* @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`
*
*/
size: DateInputSize;
/**
* Fires each time the popup is about to open
* ([see example](slug:popup_daterange#toc-events)).
* This event is preventable. If you cancel the event, the popup will remain closed.
*/
open: EventEmitter<PreventableEvent>;
/**
* Fires each time the popup is about to close
* ([see example](slug:popup_daterange#toc-events)).
* This event is preventable. If you cancel the event, the popup will remain open.
*/
close: EventEmitter<PreventableEvent>;
/**
* Fires each time the calendar element is blurred
* ([see example](slug:popup_daterange#toc-events)).
*/
onBlur: EventEmitter<null>;
/**
* Fires each time the calendar element is focused
* ([see example](slug:popup_daterange#toc-events)).
*/
onFocus: EventEmitter<null>;
/**
* Fires each time the popup is closed either on `ESC` keypress or on leaving the viewport
* ([see example](slug:popup_daterange#toc-events)).
*/
cancel: EventEmitter<null>;
/**
* The active calendar that is visible in the popup
*
* > When the popup is closed, the property returns `null`.
*/
get calendar(): MultiViewCalendarComponent;
set calendar(calendar: MultiViewCalendarComponent);
/**
* Gets the active state of the component.
* When the opened calendar is active, returns `true`.
*/
get isActive(): boolean;
/**
* @hidden
*/
get isAdaptiveModeEnabled(): boolean;
/**
* @hidden
*/
get isAdaptive(): boolean;
/**
* @hidden
*/
popupRef: PopupRef;
/**
* @hidden
*/
popupUID: string;
/**
* @hidden
*/
checkIcon: SVGIcon;
/**
* @hidden
*/
windowSize: AdaptiveSize;
/**
* Gets or sets the visibility state of the component.
*/
set show(show: boolean);
get show(): boolean;
/**
* @hidden
*/
handleAccept(): void;
private activateSubscription;
private blurSubscription;
private focusSubscription;
private calendarSubscriptions;
private popupSubscriptions;
private windowBlurSubscription;
private localizationSubscriptions;
private resolvedPromise;
private _calendar;
private _show;
private _rangeSelection;
constructor(popupService: PopupService, dateRangeService: DateRangeService, zone: NgZone, renderer: Renderer2, localization: LocalizationService, cdr: ChangeDetectorRef, rtl: boolean, adaptiveService: AdaptiveService);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*
*/
onRangeSelectionChange(rangeSelection: any): void;
/**
* Opens the popup component and focuses the calendar.
*/
activate(): void;
/**
* Focuses the calendar (if available).
*/
focus(): void;
/**
* Checks if a focused element ids placed inside the popup.
*
* @return boolean;
*/
hasActiveContent(): boolean;
/**
* Toggles the visibility of the popup or actionSheet.
* If you use the `toggle` method to show or hide the popup or actionSheet,
* the `open` and `close` events do not fire.
*
* @param show The state of the popup.
*/
toggle(show?: boolean): void;
/**
* @hidden
*
* Closes the popup and triggers the `cancel` event.
*/
cancelPopup(): void;
/**
* @hidden
*/
onResize(): void;
/**
* @hidden
*/
closePopup(event: KeyDown): void;
/**
* @hidden
*/
handleTab(event: KeyDown): void;
/**
* @hidden
*/
handleShiftTab(event: KeyDown): void;
private handleWindowBlur;
private handleMouseLeave;
private handleKeydown;
private subscribeFocusBlur;
private addPopupSubscriptions;
private get _appendTo();
private togglePopup;
private destroyPopup;
private toggleDateRange;
private toggleActionSheet;
private addCalendarSubscription;
static ɵfac: i0.ɵɵFactoryDeclaration<DateRangePopupComponent, [null, null, null, null, null, null, { optional: true; }, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DateRangePopupComponent, "kendo-daterange-popup", ["kendo-daterange-popup"], { "showCalendarHeader": { "alias": "showCalendarHeader"; "required": false; }; "focusedDate": { "alias": "focusedDate"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "bottomView": { "alias": "bottomView"; "required": false; }; "topView": { "alias": "topView"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "allowReverse": { "alias": "allowReverse"; "required": false; }; "animateNavigation": { "alias": "animateNavigation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "views": { "alias": "views"; "required": false; }; "weekNumber": { "alias": "weekNumber"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "showViewHeader": { "alias": "showViewHeader"; "required": false; }; "showOtherMonthDays": { "alias": "showOtherMonthDays"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "open": "open"; "close": "close"; "onBlur": "blur"; "onFocus": "focus"; "cancel": "cancel"; }, ["contentTemplate", "contentCalendar"], never, true, never>;
}