@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).
565 lines (564 loc) • 19.6 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, NgZone, TemplateRef, ViewContainerRef, OnInit, OnChanges, OnDestroy, Renderer2, Injector, AfterViewInit } from '@angular/core';
import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
import { MultiTabStop } from '@progress/kendo-angular-common';
import { AdaptiveSize, AdaptiveService } from '@progress/kendo-angular-utils';
import { DateInputFormatPlaceholder } from '../dateinput/models/format-placeholder.model';
import { IntlService } from '@progress/kendo-angular-intl';
import { PickerService } from '../common/picker.service';
import { TimePickerIncrementalSteps } from './models/incremental-steps.model';
import { TimeSelectorComponent } from './timeselector.component';
import { DateInputComponent } from '../dateinput/dateinput.component';
import { PopupSettings } from '../popup-settings.model';
import { PreventableEvent } from '../preventable-event';
import { AdaptiveMode } from '../util';
import { DateInputSize } from '../common/models/size';
import { DateInputRounded } from '../common/models/rounded';
import { DateInputFillMode } from '../common/models/fillmode';
import { BusViewService } from '../calendar/services/bus-view.service';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI TimePicker component for Angular](slug:overview_timepicker).
*/
export declare class TimePickerComponent extends MultiTabStop implements ControlValueAccessor, OnInit, AfterViewInit, OnChanges, OnDestroy, Validator {
private bus;
zone: NgZone;
localization: LocalizationService;
private cdr;
private popupService;
wrapper: ElementRef;
private renderer;
private injector;
private pickerService;
private intl;
private adaptiveService;
/**
* @hidden
*/
clockIcon: SVGIcon;
container: ViewContainerRef;
popupTemplate: TemplateRef<any>;
toggleButton: ElementRef;
actionSheet: ActionSheetComponent;
/**
* @hidden
*/
focusableId: string;
/**
* Sets or gets the `disabled` property of the TimePicker and
* determines whether the component is active
* ([see example]({% slug disabled_timepicker %})).
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Sets the read-only state of the TimePicker
* ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
*
* @default false
*/
readonly: boolean;
/**
* Sets the read-only state of the TimePicker input field
* ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
*
* > Note that if you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
* the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
*/
readOnlyInput: boolean;
/**
* If set to `true`, renders a clear button after the input text or TimePicker value has been changed.
* Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
* @default false
*/
clearButton: boolean;
/**
* Specifies the time format that is used to display the input value
* ([see example]({% slug formats_timepicker %})).
*/
format: string;
/**
* Defines the descriptions of the format sections in the input field.
* For more information, refer to the article on
* [placeholders]({% slug placeholders_timepicker %}).
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <div class="row example-wrapper" [style.min-height.px]="450">
* <div class="col-xs-12 col-md-6 example-col">
* <p>Full-length format description:</p>
* <kendo-timepicker formatPlaceholder="wide"></kendo-timepicker>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Narrow-length format description:</p>
* <kendo-timepicker formatPlaceholder="narrow"></kendo-timepicker>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Short-length format description:</p>
* <kendo-timepicker formatPlaceholder="short"></kendo-timepicker>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Display defined format:</p>
* <kendo-timepicker format="HH:mm:ss" formatPlaceholder="formatPattern"></kendo-timepicker>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Custom defined format descriptions</p>
* <kendo-timepicker format="HH:mm:ss"
* [formatPlaceholder]="{ hour: 'H', minute: 'm', second: 's' }"
* ></kendo-timepicker>
* </div>
* </div>
* `
* })
* export class AppComponent { }
* ```
*/
formatPlaceholder: DateInputFormatPlaceholder;
/**
* Specifies the hint the TimePicker displays when its value is `null`.
* For more information, refer to the article on
* [placeholders]({% slug placeholders_timepicker %}).
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-timepicker placeholder="Enter start..."></kendo-timepicker>
* `
* })
* export class AppComponent { }
* ```
*/
placeholder: string;
/**
* Specifies the smallest valid time value
* ([see example]({% slug timeranges_timepicker %})).
*/
set min(min: Date);
get min(): Date;
/**
* Specifies the biggest valid time value
* ([see example]({% slug timeranges_timepicker %})).
*/
set max(max: Date);
get max(): Date;
/**
* Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
*/
incompleteDateValidation: boolean;
/**
* Determines whether to automatically move to the next segment after the user completes the current one.
*
* @default true
*/
autoSwitchParts: boolean;
/**
* A string array representing custom keys, which will move the focus to the next date format segment.
*/
autoSwitchKeys: string[];
/**
* Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
*
* @default true
*/
enableMouseWheel: boolean;
/**
* Determines if the users should see a blinking caret inside the Date Input when possible.
*
* @default false
*/
allowCaretMode: boolean;
/**
* Determines whether to display the **Cancel** button in the popup.
*/
cancelButton: boolean;
/**
* Determines whether to display the **Now** button in the popup.
*
* > If the current time is out of range or the incremental step is greater than `1`, the **Now** button will be hidden.
*/
nowButton: boolean;
/**
* Configures the incremental steps of the TimePicker.
* For more information, refer to the article on
* [incremental steps]({% slug incrementalsteps_timepicker %}).
*
* > If the incremental step is greater than `1`, the **Now** button will be hidden.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-timepicker format="HH:mm:ss" [steps]="steps"></kendo-timepicker>
* `
* })
* class AppComponent {
* public steps = { hour: 2, minute: 15, second: 15, millisecond: 10 };
* }
* ```
*
*/
set steps(steps: TimePickerIncrementalSteps);
get steps(): TimePickerIncrementalSteps;
/**
* Configures the popup of the TimePicker.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `appendTo: 'root' | 'component' | ViewContainerRef`—Controls the popup container. By default, the popup will be appended to the root component.
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
set popupSettings(settings: PopupSettings);
get popupSettings(): PopupSettings;
/**
* Sets or gets the `tabindex` property of the TimePicker.
*/
tabindex: number;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Sets the title of the input element of the TimePicker 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).
* By default, subtitle is not rendered.
*/
adaptiveSubtitle: string;
/**
* Determines whether the built-in min or max validators are enforced when a form is being validated.
*
* @default true
*/
rangeValidation: boolean;
/**
* Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
*/
adaptiveMode: AdaptiveMode;
/**
* Specifies the value of the TimePicker component.
*
* > 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;
/**
* Sets the size of the component.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
* * `none`
*
*/
set size(size: DateInputSize);
get size(): DateInputSize;
/**
* Sets the border radius of the component.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
* * `full`
* * `none`
*
*/
set rounded(rounded: DateInputRounded);
get rounded(): DateInputRounded;
/**
* Sets the fillMode of the component.
*
* The possible values are:
* * `solid` (Default)
* * `flat`
* * `outline`
* * `none`
*
*/
set fillMode(fillMode: DateInputFillMode);
get fillMode(): DateInputFillMode;
/**
* Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes: {
[key: string]: string;
};
/**
* Fires each time the user selects a new value
* ([see example](slug:events_timepicker)).
*/
valueChange: EventEmitter<Date>;
/**
* Fires each time the user focuses the input element
* ([see example](slug:events_timepicker)).
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the input element gets blurred
* ([see example](slug:events_timepicker)).
*/
onBlur: EventEmitter<any>;
/**
* Fires each time the popup is about to open
* ([see example](slug:events_timepicker)).
* 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:events_timepicker)).
* This event is preventable. If you cancel the event, the popup will remain open.
*/
close: EventEmitter<PreventableEvent>;
/**
* @hidden
*/
escape: EventEmitter<any>;
/**
* @hidden
*/
wrapperClasses: boolean;
/**
* @hidden
*/
get disabledClass(): boolean;
get popupUID(): string;
popupRef: PopupRef;
/**
* @hidden
*/
checkIcon: SVGIcon;
get isActive(): boolean;
set isActive(value: boolean);
get show(): boolean;
set show(show: boolean);
get dateInput(): DateInputComponent;
get timeSelector(): TimeSelectorComponent;
/**
* @hidden
*/
get isControlRequired(): boolean;
/**
* @hidden
*/
windowSize: AdaptiveSize;
private get adaptiveAcceptButton();
private get adaptiveCancelButton();
private get inputElement();
private onControlChange;
private onControlTouched;
private onValidatorChange;
private resolvedPromise;
private timeRangeValidateFn;
private incompleteValidator;
private _min;
private _max;
private _popupSettings;
private _show;
private _steps;
private _value;
private _active;
private localizationChangeSubscription;
private pickerSubscriptions;
private windowBlurSubscription;
private control;
private domEvents;
private _size;
private _rounded;
private _fillMode;
constructor(bus: BusViewService, zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, popupService: PopupService, wrapper: ElementRef, renderer: Renderer2, injector: Injector, pickerService: PickerService, intl: IntlService, adaptiveService: AdaptiveService);
/**
* @hidden
* Used by the TextBoxContainer to determine if the component is empty
*/
isEmpty(): boolean;
/**
* @hidden
*/
ngOnInit(): void;
/**
* @hidden
*/
ngAfterViewInit(): void;
/**
* @hidden
*/
ngOnChanges(changes: any): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
handleKeydown(event: KeyboardEvent): void;
/**
* @hidden
*/
writeValue(value: 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;
/**
* Focuses the TimePicker component.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="timepicker.focus()">Focus time picker</button>
* <kendo-timepicker #timepicker></kendo-timepicker>
* `
* })
* export class AppComponent { }
* ```
*/
focus(): void;
/**
* Blurs the TimePicker component.
*/
blur(): void;
/**
* 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;
/**
* Indicates whether the component is currently open. That is when the popup or actionSheet is open.
*/
get isOpen(): boolean;
/**
* @hidden
*/
get appendTo(): ViewContainerRef;
/**
* @hidden
*/
handleChange(value: Date): void;
/**
* @hidden
*/
handleActionSheetAccept(): void;
/**
* @hidden
*/
handleActionSheetCollapse(): void;
/**
* @hidden
*/
handleReject(): void;
/**
* @hidden
*/
handleInputChange(value: Date): void;
/**
* @hidden
*/
handleDateInputClick(): void;
/**
* @hidden
*/
onTabOutNow(): void;
/**
* @hidden
*/
handleMousedown(args: any): void;
/**
* @hidden
*/
handleIconClick(event: MouseEvent): void;
/**
* @hidden
*/
get popupClasses(): string[];
/**
* @hidden
*/
get isAdaptiveModeEnabled(): boolean;
/**
* @hidden
*/
get isAdaptive(): boolean;
/**
* @hidden
*/
normalizeTime(date: Date): Date;
/**
* @hidden
*/
mergeTime(value: Date): Date;
/**
* @hidden
*/
onResize(): void;
/**
* @hidden
*/
onTabOutLastPart(): void;
/**
* @hidden
*/
onTabOutFirstPart(): void;
private toggleTimeSelector;
private toggleActionSheet;
private togglePopup;
private focusInput;
private toggleFocus;
private verifyValue;
private verifyFormat;
private bindEvents;
private handleWindowBlur;
private handleFocus;
private handleBlur;
private blurComponent;
private handleDateCompletenessChange;
private setComponentClasses;
static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "kendo-timepicker", ["kendo-timepicker"], { "focusableId": { "alias": "focusableId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "readOnlyInput": { "alias": "readOnlyInput"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatPlaceholder": { "alias": "formatPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "incompleteDateValidation": { "alias": "incompleteDateValidation"; "required": false; }; "autoSwitchParts": { "alias": "autoSwitchParts"; "required": false; }; "autoSwitchKeys": { "alias": "autoSwitchKeys"; "required": false; }; "enableMouseWheel": { "alias": "enableMouseWheel"; "required": false; }; "allowCaretMode": { "alias": "allowCaretMode"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "nowButton": { "alias": "nowButton"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; "escape": "escape"; }, never, never, true, never>;
}