@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).
480 lines (479 loc) • 17.5 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, OnInit, OnDestroy, OnChanges, Renderer2, NgZone, Injector, SimpleChanges, AfterViewInit } from '@angular/core';
import { AbstractControl, FormControl, ControlValueAccessor, Validator } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { IntlService } from '@progress/kendo-angular-intl';
import { Arrow } from './arrow.enum';
import { DateInputFormatPlaceholder } from './models/format-placeholder.model';
import { DateInputIncrementalSteps } from './models/incremental-steps.model';
import { PickerService } from '../common/picker.service';
import { FormatSettings } from './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 { DateFieldNameOptions, DateFormatOptions, DateFormatPart, DayRange, NumberFormatOptions } from '@progress/kendo-intl';
import * as i0 from "@angular/core";
type DatePickerType = 'daterangestart' | 'daterangeend' | 'datepicker' | 'datetimepicker' | 'timepicker';
/**
* @hidden
* Need to overrite `dateFormatNames` parameters order and provide `cldr` object
* required by the kendo-dateinputs-common package
*/
export declare class DateInputIntl {
private service;
format: (format: string, ...values: any[]) => string;
toString: (value: any, format: any, localeId?: string) => string;
formatDate: (value: Date, format?: string | DateFormatOptions, localeId?: string) => string;
parseDate: (value: string, format?: string | DateFormatOptions | string[] | DateFormatOptions[], localeId?: string) => Date;
parseNumber: (value: string, format?: string | NumberFormatOptions, localeId?: string) => number;
formatNumber: (value: number, format: string | NumberFormatOptions, localeId?: string) => string;
splitDateFormat: (format: string | DateFormatOptions, localeId?: string) => DateFormatPart[];
numberSymbols: (localeId?: string) => void;
firstDay: (localeId?: string) => number;
weekendRange: (localeId?: string) => DayRange;
dateFieldName: (options: DateFieldNameOptions, localeId?: string) => string;
dateFormatNames: (localeId: any, options: any) => any;
cldr: {};
localeId: string;
constructor(service: IntlService);
}
/**
* Represents the [Kendo UI DateInput component for Angular](slug:overview_dateinput).
*
* ```html
* <kendo-dateinput/>
* ```
*
* @remarks
* Supported children components are: {@link DateInputCustomMessagesComponent}.
*/
export declare class DateInputComponent implements OnInit, AfterViewInit, ControlValueAccessor, OnChanges, OnDestroy, Validator {
private cdr;
private intl;
private renderer;
wrapper: ElementRef;
private ngZone;
private injector;
localization: LocalizationService;
private pickerService?;
/**
* @hidden
*/
caretAltUpIcon: SVGIcon;
/**
* @hidden
*/
xIcon: SVGIcon;
/**
* @hidden
*/
caretAltDownIcon: SVGIcon;
/**
* @hidden
*/
set focusableId(_focusableId: string);
get focusableId(): string;
/**
* @hidden
*/
set pickerType(_pickerType: DatePickerType);
/**
* Specifies whether to render a clear button after the input text or DateInput 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 whether the component is disabled
* ([see example]({% slug disabled_dateinput %})).
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_dateinput#toc-managing-the-dateinput-disabled-state-in-reactive-forms).
*
* @default false
*/
disabled: boolean;
/**
* Specifies the read-only state of the DateInput
* ([see example]({% slug readonly_dateinput %})).
*
* @default false
*/
readonly: boolean;
/**
* Specifies the title of the input element of the DateInput.
*
* @default ""
*/
title: string;
/**
* Specifies the `tabIndex` property of the DateInput.
*
* @default 0
*/
tabindex: number;
/**
* @hidden
*/
role: string;
/**
* @hidden
*/
ariaReadOnly: boolean;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* @hidden
*/
isRequired: boolean;
/**
* Specifies the date format that is used to display the input value
* ([see example]({% slug formats_dateinput %})).
*
* You can provide a string if a single format is going to be used regardless whether the input is focused or blurred.
* Alternatively, you can provide a FormatSettings object to display different formats when the component is focused or blurred by specifying inputFormat and displayFormat values.
*/
format: string | FormatSettings;
/**
* Defines the descriptions of the format sections in the input field.
* For more information, refer to the article on
* [placeholders]({% slug placeholders_dateinput %}).
*/
set formatPlaceholder(format: DateInputFormatPlaceholder);
get formatPlaceholder(): DateInputFormatPlaceholder;
/**
* Specifies the hint the DateInput displays when its value is `null`.
* For more information, refer to the article on
* [placeholders]({% slug placeholders_dateinput %}).
* @default null
*/
placeholder: string;
/**
* Configures the incremental steps of the DateInput.
* For more information, refer to the article on
* [incremental steps]({% slug incrementalsteps_dateinput %}).
*/
steps: DateInputIncrementalSteps;
/**
* Specifies the biggest date that is valid
* ([see example]({% slug dateranges_dateinput %})).
*
* @default 2099-12-31
*/
max: Date;
/**
* Specifies the smallest date that is valid
* ([see example]({% slug dateranges_dateinput %})).
*
* @default 1900-1-1
*/
min: Date;
/**
* Specifies whether to enforce the built-in min and max validators when validating a form.
* Set to `true` to enable validation for the `min` and `max` values.
*
* @default true
*/
rangeValidation: boolean;
/**
* Specifies if the component automatically corrects invalid date segments.
* When set to `true`, the component fixes invalid segments as you type.
*
* @default true
*/
autoCorrectParts: boolean;
/**
* Specifies if the component automatically moves to the next segment after you complete the current one.
* When set to `true`, focus moves to the next segment as soon as you finish typing the current segment.
*
* @default true
*/
autoSwitchParts: boolean;
/**
* Specifies custom keys that move focus to the next date format segment.
* Provide an array of strings to define which keys trigger the focus change.
*/
autoSwitchKeys: string[];
/**
* Specifies if the component displays a blinking caret inside the DateInput when possible.
* Set to `true` to show a blinking caret for better visual feedback.
*
* @default false
*/
allowCaretMode: boolean;
/**
* Specifies whether to autofill the rest of the date to the current date when the component loses focus.
*
* @default false
*/
autoFill: boolean;
/**
* Specifies whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
*
* @default false
*/
incompleteDateValidation: boolean;
/**
* The maximum year to assume to be from the current century when typing two-digit year value
* ([see example]({% slug formats_dateinput %}#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;
/**
* Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
*
* @default true
*/
enableMouseWheel: boolean;
/**
* Specifies the value of the DateInput 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;
/**
* Specifies whether the **Up** and **Down** spin buttons will be rendered.
* For more information, refer to the article on
* [spinner buttons]({% slug spinbuttons_dateinput %}).
*
* @default false
*/
spinners: boolean;
/**
* @hidden
*/
isPopupOpen: boolean;
/**
* @hidden
*/
hasPopup: string;
/**
* Specifies the size of the component.
*
* @default medium
*
*/
set size(size: DateInputSize);
get size(): DateInputSize;
/**
* Specifies the border radius of the component.
* @default 'medium'
*/
set rounded(rounded: DateInputRounded);
get rounded(): DateInputRounded;
/**
* Specifies the fillMode of the component.
* @default 'solid'
*/
set fillMode(fillMode: DateInputFillMode);
get fillMode(): DateInputFillMode;
/**
* Specifies the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
/**
* Fires each time the user selects a new value
* ([see example](slug:events_dateinput)).
*/
valueChange: EventEmitter<Date>;
/**
* @hidden
* Fires each time the user selects a new value
* ([see example](slug:events_dateinput)).
*/
valueUpdate: EventEmitter<Date>;
/**
* Fires each time the user focuses the input element
* ([see example](slug:events_dateinput)).
*/
onFocus: EventEmitter<null>;
/**
* Fires each time the input element gets blurred
* ([see example](slug:events_dateinput)).
*/
onBlur: EventEmitter<null>;
/**
* @hidden
*/
dateInput: ElementRef;
get wrapperClass(): boolean;
get disabledClass(): boolean;
get inputElement(): any;
get inputValue(): string;
get isActive(): boolean;
set isActive(value: boolean);
/**
* @hidden
*/
get formControl(): FormControl;
get options(): {
format: string | FormatSettings;
steps: DateInputIncrementalSteps;
readonly: boolean;
formatPlaceholder: DateInputFormatPlaceholder;
placeholder: string;
autoCorrectParts: boolean;
autoSwitchParts: boolean;
selectPreviousSegmentOnBackspace: boolean;
autoSwitchKeys: string[];
twoDigitYearMax: number;
enableMouseWheel: boolean;
selectNearestSegmentOnFocus: boolean;
allowCaretMode: boolean;
autoFill: boolean;
value: Date;
intlService: DateInputIntl;
};
arrow: any;
arrowDirection: Arrow;
formatSections: {
[x: string]: boolean;
};
hasMousedown: boolean;
focusedPriorToMousedown: boolean;
showClearButton: boolean;
/**
* @hidden
*/
isDateIncomplete: boolean;
protected currentFormat: string;
private spinup;
private spindown;
private minValidator;
private maxValidator;
private incompleteValidator;
private _value;
private _active;
private _focusableId;
private _formatPlaceholder;
private kendoDate;
private kendoDateObject;
private domEvents;
private ngControl;
private onControlChange;
private onControlTouched;
private onValidatorChange;
private _size;
private _rounded;
private _fillMode;
private control;
private subs;
private _inputAttributes;
private parsedAttributes;
private get defaultAttributes();
private get mutableAttributes();
constructor(cdr: ChangeDetectorRef, intl: IntlService, renderer: Renderer2, wrapper: ElementRef, ngZone: NgZone, injector: Injector, localization: LocalizationService, pickerService?: PickerService);
/**
* @hidden
* Used by the TextBoxContainer to determine if the component is empty
*/
isEmpty(): boolean;
/**
* @hidden
*/
handleDragAndDrop(args: any): void;
/**
* @hidden
*/
containsElement(element: any): boolean;
/**
* @hidden
*/
ngOnInit(): void;
/**
* @hidden
*/
ngOnChanges(changes: SimpleChanges): void;
private updateFormatSections;
private updateIncompleteValidationStatus;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
private setAriaInvalid;
/**
* @hidden
*/
get isControlRequired(): boolean;
/**
* @hidden
*/
validate(control: AbstractControl): {
[key: string]: any;
};
/**
* @hidden
*/
registerOnValidatorChange(fn: Function): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
writeValue(value: Date): void;
resetInput(): void;
/**
* @hidden
*/
triggerChange(): void;
/**
* @hidden
*/
notify(): void;
/**
* @hidden
*/
registerOnChange(fn: () => any): void;
/**
* @hidden
*/
registerOnTouched(fn: () => any): void;
/**
* Focuses the DateInput component.
*
*/
focus(): void;
/**
* Blurs the DateInput component.
*/
blur(): void;
/**
* @hidden
*/
handleButtonClick(offset: number): void;
private initKendoDate;
private onWidgetValueChange;
private onWidgetKeyDown;
private onWidgetInputEnd;
private onWidgetFocus;
private onWidgetBlur;
private handleKeyDown;
private verifyRange;
private verifyValue;
private intlChange;
private emitFocus;
private emitBlur;
private setSpinnerFill;
private setComponentClasses;
private setInputAttributes;
static ɵfac: i0.ɵɵFactoryDeclaration<DateInputComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "kendo-dateinput", ["kendo-dateinput"], { "focusableId": { "alias": "focusableId"; "required": false; }; "pickerType": { "alias": "pickerType"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "title": { "alias": "title"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "role": { "alias": "role"; "required": false; }; "ariaReadOnly": { "alias": "ariaReadOnly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "isRequired": { "alias": "isRequired"; "required": false; }; "format": { "alias": "format"; "required": false; }; "formatPlaceholder": { "alias": "formatPlaceholder"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "steps": { "alias": "steps"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "autoCorrectParts": { "alias": "autoCorrectParts"; "required": false; }; "autoSwitchParts": { "alias": "autoSwitchParts"; "required": false; }; "autoSwitchKeys": { "alias": "autoSwitchKeys"; "required": false; }; "allowCaretMode": { "alias": "allowCaretMode"; "required": false; }; "autoFill": { "alias": "autoFill"; "required": false; }; "incompleteDateValidation": { "alias": "incompleteDateValidation"; "required": false; }; "twoDigitYearMax": { "alias": "twoDigitYearMax"; "required": false; }; "enableMouseWheel": { "alias": "enableMouseWheel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "spinners": { "alias": "spinners"; "required": false; }; "isPopupOpen": { "alias": "isPopupOpen"; "required": false; }; "hasPopup": { "alias": "hasPopup"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "valueUpdate": "valueUpdate"; "onFocus": "focus"; "onBlur": "blur"; }, never, never, true, never>;
}
export {};