@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).
547 lines (546 loc) • 19.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, 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).
*/
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);
/**
* If set to `true`, renders 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;
/**
* Sets or gets the `disabled` property of the DateInput and
* determines whether the component is active
* ([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).
*/
disabled: boolean;
/**
* Sets or gets the read-only state of the DateInput
* ([see example]({% slug readonly_dateinput %})).
*
* @default false
*/
readonly: boolean;
/**
* Sets the title of the input element of the DateInput.
*/
title: string;
/**
* Sets or gets the `tabIndex` property of the DateInput.
*/
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 %})).
*
* Format value options:
* - `string` - Provide a `string` if a single format is going to be used regardless whether the input is focused or blurred.
* - [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) - To display different formats when the component is focused or blurred, provide a settings object with specified `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 %}).
*
* @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-dateinput formatPlaceholder="wide"></kendo-dateinput>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Narrow-length format description:</p>
* <kendo-dateinput formatPlaceholder="narrow"></kendo-dateinput>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Short-length format description:</p>
* <kendo-dateinput formatPlaceholder="short"></kendo-dateinput>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Display defined format:</p>
* <kendo-dateinput format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-dateinput>
* </div>
*
* <div class="col-xs-12 col-md-6 example-col">
* <p>Custom defined format descriptions</p>
* <kendo-dateinput format="G"
* [formatPlaceholder]="{
* year: 'y', month: 'M', day: 'd',
* hour: 'h', minute: 'm', second: 's'
* }"
* ></kendo-dateinput>
* </div>
* </div>
* `
* })
* export class AppComponent { }
* ```
*/
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 %}).
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-dateinput placeholder="Enter birth date..."></kendo-dateinput>
* `
* })
* export class AppComponent { }
* ```
*/
placeholder: string;
/**
* Configures the incremental steps of the DateInput.
* For more information, refer to the article on
* [incremental steps]({% slug incrementalsteps_dateinput %}).
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-dateinput [steps]="steps"></kendo-dateinput>
* `
* })
* export class AppComponent {
* public steps = { year: 10, month: 1, day: 5 };
* }
* ```
*/
steps: DateInputIncrementalSteps;
/**
* Specifies the biggest date that is valid
* ([see example]({% slug dateranges_dateinput %})).
* By default, the `max` value is `2099-12-31`.
*/
max: Date;
/**
* Specifies the smallest date that is valid
* ([see example]({% slug dateranges_dateinput %})).
* By default, the `min` value is `1900-1-1`.
*/
min: Date;
/**
* Determines whether the built-in min or max validators are to be enforced when a form is being validated.
*/
rangeValidation: boolean;
/**
* Determines whether to autocorrect 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;
/**
* A string array representing custom keys, which will move the focus to the next date format segment.
*/
autoSwitchKeys: string[];
/**
* Determines if the users should see a blinking caret inside the Date Input when possible.
*
* @default false
*/
allowCaretMode: boolean;
/**
* When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
*
* @default false
*/
autoFill: boolean;
/**
* Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
*/
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.
*/
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 %}).
*/
spinners: boolean;
/**
* @hidden
*/
isPopupOpen: boolean;
/**
* @hidden
*/
hasPopup: string;
/**
* 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.
*/
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.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="dateinput.focus()">Focus date input</button>
* <kendo-dateinput #dateinput></kendo-dateinput>
* `
* })
* export class AppComponent { }
* ```
*/
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 {};