@syncfusion/ej2-calendars
Version:
A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
684 lines (679 loc) • 21.7 kB
TypeScript
import { Internationalization } from '@syncfusion/ej2-base';
import { KeyboardEvents, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';
import { EmitType, Component } from '@syncfusion/ej2-base';
import { ModuleDeclaration, ChildProperty } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { FocusEventArgs, BlurEventArgs, ClearedEventArgs } from '../calendar/calendar';
import { IInput, FloatLabelType } from '@syncfusion/ej2-inputs';
import { createElementParams } from '@syncfusion/ej2-lists';
import { TimePickerModel, TimeMaskPlaceholderModel } from './timepicker-model';
export interface ChangeEventArgs {
/** Defines the boolean that returns true when the value is changed by user interaction, otherwise returns false. */
isInteracted?: boolean;
/** Defines the selected time value of the TimePicker.
*
* @isGenericType true
*/
value?: Date;
/** Defines the selected time value as string. */
text?: string;
/** Defines the original event arguments. */
event?: KeyboardEventArgs | FocusEvent | MouseEvent | Event;
/** Defines the element */
element: HTMLInputElement | HTMLElement;
}
/**
* Interface for before list item render .
*/
export interface ItemEventArgs extends BaseEventArgs {
/** Defines the created LI element. */
element: HTMLElement;
/** Defines the displayed text value in a popup list. */
text: string;
/** Defines the Date object of displayed text in a popup list.
*
* @isGenericType true
*/
value: Date;
/** Specifies whether to disable the current time value or not. */
isDisabled: boolean;
}
export interface CursorPositionDetails {
/** Defines the text selection starting position. */
start: number;
/** Defines the text selection end position. */
end: number;
}
export interface MeridianText {
/** Defines the culture specific meridian text for AM. */
am: string;
/** Defines the culture specific meridian text for PM. */
pm: string;
}
export interface TimeFormatObject {
/**
* Specifies the format in which the date format will process
*/
skeleton?: string;
}
export interface PopupEventArgs {
/** Specifies the name of the event */
name?: string;
/**
* Illustrates whether the current action needs to be prevented or not.
*/
cancel?: boolean;
/**
* Defines the TimePicker popup object.
*
*/
popup?: Popup;
/**
* Specifies the original event arguments.
*/
event?: MouseEvent | KeyboardEvent | FocusEvent | Event;
/**
* Specifies the node to which the popup element to be appended.
*/
appendTo?: HTMLElement;
}
export declare namespace TimePickerBase {
function createListItems(createdEl: createElementParams, min: Date, max: Date, globalize: Internationalization, timeFormat: string, step: number): {
collection: number[];
list: HTMLElement;
};
}
export declare class TimeMaskPlaceholder extends ChildProperty<TimeMaskPlaceholder> {
/**
* Specifies the mask placeholder value for day property.
*
* @default 'day'
*/
day: string;
/**
* Specifies the mask placeholder value for month property.
*
* @default 'month'
*/
month: string;
/**
* Specifies the mask placeholder value for year property.
*
* @default 'year'
*/
year: string;
/**
* Specifies the mask placeholder value for day of the week property.
*
* @default 'day of the week'
*/
dayOfTheWeek: string;
/**
* Specifies the mask placeholder value for hour property.
*
* @default 'hour'
*/
hour: string;
/**
* Specifies the mask placeholder value for minute property.
*
* @default 'minute'
*/
minute: string;
/**
* Specifies the mask placeholder value for second property.
*
* @default 'second'
*/
second: string;
}
/**
* TimePicker is an intuitive interface component which provides an options to select a time value
* from popup list or to set a desired time value.
* ```
* <input id='timepicker' type='text'/>
* <script>
* var timePickerObj = new TimePicker({ value: new Date() });
* timePickerObj.appendTo('#timepicker');
* </script>
* ```
*/
export declare class TimePicker extends Component<HTMLElement> implements IInput {
private inputWrapper;
private popupWrapper;
private cloneElement;
private listWrapper;
private listTag;
private anchor;
private selectedElement;
private liCollections;
protected inputElement: HTMLInputElement;
private popupObj;
protected inputEvent: KeyboardEvents;
protected globalize: Internationalization;
private defaultCulture;
private containerStyle;
private rippleFn;
private l10n;
private cursorDetails;
private activeIndex;
private timeCollections;
private isNavigate;
private disableItemCollection;
protected isPreventBlur: boolean;
private isTextSelected;
private prevValue;
private inputStyle;
private angularTag;
private valueWithMinutes;
private prevDate;
private initValue;
private initMin;
private initMax;
private inputEleValue;
private openPopupEventArgs;
private formatString;
protected tabIndex: string;
private formElement;
private modal;
private invalidValueString;
protected keyConfigure: {
[key: string]: string;
};
private timeOptions;
private mobileTimePopupWrap;
protected preventChange: boolean;
protected maskedDateValue: string;
protected moduleName: string;
protected clearButton: HTMLElement;
/**
* Gets or sets the width of the TimePicker component. The width of the popup is based on the width of the component.
*
* @default null
*/
width: string | number;
/**
* Specifies the root CSS class of the TimePicker that allows to
* customize the appearance by overriding the styles.
*
* @default null
*/
cssClass: string;
/**
* Specifies the component to act as strict so that, it allows to enter only a valid time value within a specified range or else
* resets to previous value. By default, strictMode is in false.
* > For more details refer to
* [`Strict Mode`](../../timepicker/strict-mode/) documentation.
*
* @default false
*/
strictMode: boolean;
/**
* Customizes the key actions in TimePicker.
* For example, when using German keyboard, the key actions can be customized using these shortcuts.
*
* <table>
* <tr>
* <td colSpan=1 rowSpan=1>
* Key action<br/></td><td colSpan=1 rowSpan=1>
* Key<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* enter<br/></td><td colSpan=1 rowSpan=1>
* enter<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* escape<br/></td><td colSpan=1 rowSpan=1>
* escape<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* end<br/></td><td colSpan=1 rowSpan=1>
* end<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* tab<br/></td><td colSpan=1 rowSpan=1>
* tab<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* home<br/></td><td colSpan=1 rowSpan=1>
* home<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* down<br/></td><td colSpan=1 rowSpan=1>
* downarrow<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* up<br/></td><td colSpan=1 rowSpan=1>
* uparrow<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* left<br/></td><td colSpan=1 rowSpan=1>
* leftarrow<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* right<br/></td><td colSpan=1 rowSpan=1>
* rightarrow<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* open<br/></td><td colSpan=1 rowSpan=1>
* alt+downarrow<br/></td></tr>
* <tr>
* <td colSpan=1 rowSpan=1>
* close<br/></td><td colSpan=1 rowSpan=1>
* alt+uparrow<br/></td></tr>
* </table>
*
* {% codeBlock src='timepicker/keyConfigs/index.md' %}{% endcodeBlock %}
*
* @default null
*/
keyConfigs: {
[key: string]: string;
};
/**
* Specifies the format of value that is to be displayed in component. By default, the format is
* based on the culture.
* > For more details refer to
* [`Format`](../../timepicker/getting-started#setting-the-time-format) documentation.
* {% codeBlock src='timepicker/format/index.md' %}{% endcodeBlock %}
*
* @default null
* @aspType string
*/
format: string | TimeFormatObject;
/**
* Specifies whether the component to be disabled or not.
*
* @default true
*/
enabled: boolean;
/**
* Specifies the component popup display full screen in mobile devices.
*
* @default false
*/
fullScreenMode: boolean;
/**
* Specifies the component in readonly state.
*
* @default false
*/
readonly: boolean;
/**
* You can add the additional html attributes such as disabled, value etc., to the element.
* If you configured both property and equivalent html attribute then the component considers the property value.
* {% codeBlock src='timepicker/htmlAttributes/index.md' %}{% endcodeBlock %}
*
* @default {}
*/
htmlAttributes: {
[key: string]: string;
};
/**
* Specifies the placeholder text to be floated.
* Possible values are:
* Never: The label will never float in the input when the placeholder is available.
* Always: The floating label will always float above the input.
* Auto: The floating label will float above the input after focusing or entering a value in the input.
*
* @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
* @aspType Syncfusion.EJ2.Inputs.FloatLabelType
* @isEnumeration true
*/
floatLabelType: FloatLabelType | string;
/**
* Specifies the placeholder text that is displayed in textbox.
*
* @default null
*/
placeholder: string;
/**
* specifies the z-index value of the timePicker popup element.
*
* @default 1000
* @aspType int
*/
zIndex: number;
/**
* Enable or disable the persisting component's state between the page reloads. If enabled, following list of states will be persisted.
* 1. Value
*
* @default false
*/
enablePersistence: boolean;
/**
* Specifies whether to show or hide the clear icon.
*
* @default true
*/
showClearButton: boolean;
/**
* Specifies the time interval between the two adjacent time values in the popup list.
* > For more details refer to
* [`Format`](../../timepicker/getting-started#setting-the-time-format)documentation.
*
* @default 30
*
*/
step: number;
/**
* Specifies the scroll bar position if there is no value is selected in the popup list or
* the given value is not present in the popup list.
* > For more details refer to
* [`Time Duration`](https://ej2.syncfusion.com/demos/#/material/timepicker/list-formatting.html) sample.
* {% codeBlock src='timepicker/scrollTo/index.md' %}{% endcodeBlock %}
*
* @default null
*/
scrollTo: Date;
/**
* Gets or sets the value of the component. The value is parsed based on the culture specific time format.
*
* @default null
* @isGenericType true
*/
value: Date;
/**
* Gets or sets the minimum time value that can be allowed to select in TimePicker.
* > For more details refer to
* [`Time Range`](../../timepicker/time-range/) documentation.
*
* @default 00:00
*/
min: Date;
/**
* Gets or sets the maximum time value that can be allowed to select in TimePicker.
* > For more details refer to
* [`Time Range`](../../timepicker/time-range/) documentation.
*
* @default 00:00
*/
max: Date;
/**
* > Support for `allowEdit` has been provided from
* [`v16.2.46`](https://ej2.syncfusion.com/angular/documentation/release-notes/16.2.46/#timepicker).
*
* Specifies whether the input textbox is editable or not. Here the user can select the value from the
* popup and cannot edit in the input textbox.
*
* @default true
*/
allowEdit: boolean;
/**
* By default, the popup opens while clicking on the timepicker icon.
* If you want to open the popup while focusing the time input then specify its value as true.
*
* @default false
*/
openOnFocus: boolean;
/**
* Specifies whether it is a masked timepicker or not.
* By default the timepicker component render without masked input.
* If you need masked timepicker input then specify it as true.
*
* @default false
*/
enableMask: boolean;
/**
* Specifies the mask placeholder to be displayed on masked timepicker.
*
* @default {day:'day' , month:'month', year: 'year', hour:'hour',minute:'minute',second:'second',dayOfTheWeek: 'day of the week'}
* @aspType TimePickerMaskPlaceholder
*/
maskPlaceholder: TimeMaskPlaceholderModel;
/**
* By default, the time value will be processed based on system time zone.
* If you want to process the initial time value using server time zone
* then specify the time zone value to `serverTimezoneOffset` property.
*
* @default null
*/
serverTimezoneOffset: number;
/**
* Triggers when the value is changed.
*
* @event change
*/
change: EmitType<ChangeEventArgs>;
/**
* Triggers when the component is created.
*
* @event created
*/
created: EmitType<Object>;
/**
* Triggers when the component is destroyed.
*
* @event destroyed
*/
destroyed: EmitType<Object>;
/**
* Triggers when the popup is opened.
*
* @event open
*/
open: EmitType<PopupEventArgs>;
/**
* Triggers while rendering the each popup list item.
*
* @event itemRender
*/
itemRender: EmitType<ItemEventArgs>;
/**
* Triggers when the popup is closed.
*
* @event close
*/
close: EmitType<PopupEventArgs>;
/**
* Triggers when timepicker value is cleared using clear button.
*
* @event cleared
*/
cleared: EmitType<ClearedEventArgs>;
/**
* Triggers when the control loses the focus.
*
* @event blur
*/
blur: EmitType<BlurEventArgs>;
/**
* Triggers when the control gets focused.
*
* @event focus
*/
focus: EmitType<FocusEventArgs>;
/**
* Constructor for creating the widget
*
* @param {TimePickerModel} options - Specifies the TimePicker model.
* @param {string | HTMLInputElement} element - Specifies the element to render as component.
* @private
*/
constructor(options?: TimePickerModel, element?: string | HTMLInputElement);
/**
* Initialize the event handler
*
* @returns {void}
* @private
*/
protected preRender(): void;
protected render(): void;
protected setTimeZone(): void;
protected isDayLightSaving(): boolean;
private setTimeAllowEdit;
private clearIconState;
private validateDisable;
protected validationAttribute(target: HTMLElement, input: Element): void;
private initialize;
protected checkTimeFormat(): void;
private checkDateValue;
private createInputElement;
private getCldrDateTimeFormat;
private checkInvalidValue;
requiredModules(): ModuleDeclaration[];
protected getAmPmValue(date: string | null | undefined): string;
private cldrFormat;
destroy(): void;
protected ensureInputAttribute(): void;
private popupCreation;
protected getPopupHeight(): number;
private generateList;
private renderPopup;
private timePopupCloseHandler;
private getFormattedValue;
private getDateObject;
private updateHtmlAttributeToWrapper;
private updateHtmlAttributeToElement;
private updateCssClass;
private removeErrorClass;
private checkErrorState;
private validateInterval;
private disableTimeIcon;
private disableElement;
private enableElement;
private selectInputText;
private setCursorToEnd;
private getMeridianText;
private getCursorSelection;
private getActiveElement;
private isNullOrEmpty;
private setWidth;
private setPopupWidth;
private setScrollPosition;
private findScrollTop;
private setScrollTo;
private getText;
private getValue;
private cldrDateFormat;
private cldrTimeFormat;
private dateToNumeric;
private getExactDateTime;
private setValue;
private compareFormatChange;
private updatePlaceHolder;
private updateInputValue;
private preventEventBubbling;
private popupHandler;
private mouseDownHandler;
private mouseUpHandler;
private focusSelection;
private inputHandler;
private onMouseClick;
private closePopup;
private disposeServerPopup;
private checkValueChange;
private onMouseOver;
private setHover;
private setSelection;
private onMouseLeave;
private scrollHandler;
private setMinMax;
protected validateMinMax(dateVal: Date | string, minVal: Date, maxVal: Date): Date | string;
private valueIsDisable;
protected validateState(val: string | Date): boolean;
protected strictOperation(minimum: Date, maximum: Date, dateVal: Date | string, val: Date): Date | string;
protected bindEvents(): void;
private keydownHandler;
private keyupHandler;
protected formResetHandler(): void;
private inputChangeHandler;
private inputEventHandler;
protected unBindEvents(): void;
private bindClearEvent;
private raiseClearedEvent;
protected clearHandler(e: MouseEvent): void;
private clear;
protected setZIndex(): void;
protected checkAttributes(isDynamic: boolean): void;
protected setCurrentDate(value: Date): Date;
protected getTextFormat(): number;
protected updateValue(value: string | Date, event: KeyboardEventArgs | FocusEvent | MouseEvent): void;
protected previousState(date: Date): string;
protected resetState(): void;
protected objToString(val: Date): string;
protected checkValue(value: string | Date): string;
protected validateValue(date: Date, value: string | Date): string;
private createMask;
protected findNextElement(event: KeyboardEventArgs): void;
protected selectNextItem(event: KeyboardEventArgs): void;
protected elementValue(value: Date): void;
private validLiElement;
protected keyHandler(event: KeyboardEventArgs): void;
protected getCultureTimeObject(ld: Object, c: string): Object;
protected getCultureDateObject(ld: Object, c: string): Object;
protected wireListEvents(): void;
protected unWireListEvents(): void;
protected valueProcess(event: KeyboardEventArgs | FocusEvent | MouseEvent, value: Date): void;
protected changeEvent(e: KeyboardEventArgs | FocusEvent | MouseEvent): void;
protected updateInput(isUpdate: boolean, date: Date): void;
protected setActiveDescendant(): void;
protected removeSelection(): void;
protected removeHover(className: string): void;
protected getHoverItem(className: string): Element[];
private setActiveClass;
protected addSelection(): void;
protected isValidLI(li: Element | HTMLElement): boolean;
protected createDateObj(val: Date | string): Date;
protected timeParse(today: string, val: Date | string): Date;
protected createListItems(): void;
private documentClickHandler;
protected setEnableRtl(): void;
protected setEnable(): void;
protected getProperty(date: TimePickerModel, val: string): void;
protected inputBlurHandler(e: MouseEvent): void;
/**
* Focuses out the TimePicker textbox element.
*
* @returns {void}
*/
focusOut(): void;
private isPopupOpen;
private inputFocusHandler;
/**
* Focused the TimePicker textbox element.
*
* @returns {void}
*/
focusIn(): void;
/**
* Hides the TimePicker popup.
*
* @returns {void}
*/
hide(): void;
/**
* Opens the popup to show the list items.
*
* @returns {void}
*/
show(event?: KeyboardEvent | MouseEvent | Event): void;
private setOverlayIndex;
private formatValues;
private popupAlignment;
/**
* Gets the properties to be maintained upon browser refresh.
*
* @returns {string}
*/
getPersistData(): string;
/**
* To get component name
*
* @returns {string} Returns the component name.
* @private
*/
protected getModuleName(): string;
private updateFloatLabelOverflowWidth;
private clearFloatLabelOverflowWidth;
/**
* Called internally if any of the property value changed.
*
* @param {TimePickerModel} newProp - Returns the dynamic property value of the component.
* @param {TimePickerModel} oldProp - Returns the previous property value of the component.
* @returns {void}
* @private
*/
onPropertyChanged(newProp: TimePickerModel, oldProp: TimePickerModel): void;
protected checkInValue(inValue: string | Date | number): string;
}