Ej1 api migration in Angular Timepicker component

17 Nov 20225 minutes to read

This article describes the API migration process of TimePicker component from Essential JS 1 to Essential JS 2.

Time Selection

Behavior API in Essential JS 1 API in Essential JS 2
Setting the value Property: value ``` ``` Property: value ``` ```

Time Format

Behavior API in Essential JS 1 API in Essential JS 2
Display time format Property: timeFormat ``` ``` Property: format ``` ```

Time Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum time Property: minTime ``` ``` Property: min ``` ```
Maximum time Property: maxTime ``` ``` Property: Max ``` ```
Set current time Method: setCurrentTime() ``` <input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/> ``` ``` public onCreate(e:any) { var timeObj = $("#timePicker").data("ejTimePicker"); timeObj.setCurrentTime(); } ``` Can be achieved by ``` public value: Date = new Date(); ``` ``` <ejs-timepicker id='timepicker' [value]='value'></ejs-timepicker> ```

Disabled Time Ranges

Behavior API in Essential JS 1 API in Essential JS 2
Disable time ranges Property: disableTimeRanges ``` <input type="text" ej-timepicker id="timePicker" [disableTimeRanges]="disableTime"/> ``` ``` disableTime: Object = [{ startTime: '3:00 AM', endTime: '6:00 AM' }, { startTime: '1:00 PM', endTime: '3:00 PM' }, { startTime: '8:00 PM', endTime: '10:00 PM' }]; ``` Can be achieved by ``` <ejs-timepicker id='timepicker' (itemRender)='itemRenderHandler($event)'></ejs-timepicker> ``` ``` public itemRenderHandler(args: ItemEventArgs): void { if (args.value.getHours() === 4) { args.isDisabled = true; } } ```

Customization

Behavior API in Essential JS 1 API in Essential JS 2
CSS Class Property: CssClass ``` ``` Property: CssClass ``` ```
Popup list customization Not Applicable Event: itemRender ``` <ejs-timepicker id='timepicker' (itemRender)='itemRanderHandler($event)'></ejs-timepicker> ``` ``` public itemRenderHandler(args: ItemEventArgs): void {/** code block */ } ```
Show/Hide the popup button Property: showPopupButton ``` <input type="text" ej-timepicker id="timePicker" [showPopupButton]="false"/> ``` Can be achieved by ``` <ejs-timepicker id='timepicker' #timeObj (focus)='onFocus($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public onFocus(args:any):void { this.timeObj.show(); } ``` ```css .e-control-wrapper .e-input-group-icon.e-time-icon { display: none; } ```
Enable/Disable the rounded corner Property: showRoundedCorner ``` <input type="text" ej-timepicker id="timePicker" [showRoundedCorner]="true"/> ``` Can be achieved by ``` ``` ```css .e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group { border-radius: 4px; } ```
Enable/Disable the animation Property: enableAnimation ``` <input type="text" ej-timepicker id="timePicker" [enableAnimation]="true"/> ``` Not Applicable
Interval Property: interval ``` <input type="text" ej-timepicker id="timePicker" [interval]=120/> ``` Property: step ``` ```
FocusIn event Event: focusIn ``` <input type="text" ej-timepicker id="timePicker" (focusIn)="onFocus($event)"/> ``` ``` public onFocus(e:any) { /** code block */} ``` Event: focus ``` <ejs-timepicker id='timepicker' #timeObj (focus)='onFocus($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public onFocus(args:any):void { /** code block */ } ```
FocusOut event Event: focusOut ``` <input type="text" ej-timepicker id="timePicker" (focusOut)="onFocus($event)"/> ``` ``` public onFocus(e:any) { /** code block */} ``` Event: blur ``` <ejs-timepicker id='timepicker' #timeObj (blur)='onBlur($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public onBlur(args:any):void { /** code block */ } ```
FocusIn method Not Applicable Method: focusIn() ``` <ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public create(args:any):void { this.timeObj.focusIn(); } ```
FocusOut method Not Applicable Event: focusOut ``` <ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public create(args:any):void { this.timeObj.focusOut(); } ```
Prevent popup close Not Applicable Event: close ``` <ejs-timepicker id='timepicker' #timeObj (close)='onClose($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public onClose(args:any): void { args.cancel = true; } ```
Prevent popup open Not Applicable Event: open ``` <ejs-timepicker id='timepicker' #timeObj (open)='onOpen($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public onOpen(args:any): void { args.cancel = true; } ```

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Property: enableRTL ``` <input type="text" ej-timepicker id="timePicker" [enableRTL]="true"/> ``` Property: enableRtl ``` <ejs-timepicker id='timepicker' #timeObj enableRtl='true'></ejs-timepicker> ```

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence ``` <input type="text" ej-timepicker id="timePicker" [enablePersistence]="true"/> ``` Property: enablePersistence ``` <ejs-timepicker id='timepicker' #timeObj enablePersistence='true'></ejs-timepicker> ```

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validationRules ``` <input type="text" ej-timepicker id="timePicker" [validationRules]="validationRules"/> ``` ``` validationRules:Object; constructor(){ this.validationRules = {required:true}; } ``` Can be achieved by ``` <ejs-timepicker #timepicker id="timepicker" floatLabelType='Always'></ejs-timepicker> ``` ``` let options: FormValidatorModel = { rules: { 'timepicker': { required: [true, "Value is required"] } }}; this.formObject = new FormValidator('#form-element', options); ```
Validation message Property: validationMessages ``` <input type="text" ej-timepicker id="timePicker" [validationRules]="validationRules" [validationMessages]="validationMessages"/> ``` ``` validationRules:Object; validationMessages:Object; constructor(){ this.validationMessages = {required: "Required Time value"}; this.validationRules = {required:true}; } ``` Can be achieved by ``` <ejs-timepicker #timepicker id="timepicker" floatLabelType='Always'></ejs-timepicker> ``` ``` let options: FormValidatorModel = { rules: { 'timepicker': { required: [true, "Value is required"] } }, customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => { inputElement.parentElement.parentElement.appendChild(errorElement); } }; this.formObject = new FormValidator('#form-element', options); ```

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width ``` ``` Property: width ``` ```
Readonly Property: readOnly ``` <input type="text" ej-timepicker id="timePicker" [readOnly]="true"/> ``` Property: Readonly ``` ```
Show/Hide the clear button Not Applicable Property: showClearButton ``` ```
Height Property: Height ``` ``` Can be achieved by ``` ``` ```css .e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group { height: 35px; } ```
Html Attributes Property: HtmlAttributes ``` <input type="text" ej-timepicker id="timePicker" [htmlAttributes]="htmlAttributes"/> ``` ``` htmlAttributes: Object = {required:"required"} ``` Not Applicable
Watermark text Property: watermarkText ``` ``` Property: placeholder ``` ```
Enable the TimePicker Property: enabled ``` <input type="text" ej-timepicker id="timePicker" [enabled]="true"/> ``` Property: enabled ``` ```
Disable the TimePicker Method: disable() ``` <input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/> ``` ``` public onCreate(e:any) { var timeObject = $("#timePicker").data("ejTimePicker"); timeObject.disable(); } ``` Property: enabled ``` ```
Enable/Disable the textBox editing Not Applicable Property: allowEdit ``` ```
zIndex Not Applicable Property: zIndex ``` ```
Specify the placeholder text behavior Not Applicable Property: floatLabelType ``` ```

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale ``` ``` Property: locale ``` ```

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enableStrictMode ``` <input type="text" ej-timepicker id="timePicker" [enableStrictMode]="true"/> ``` Property: strictMode ``` ```

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close ``` <input type="text" ej-timepicker id="timePicker" (close)="onClose($event)"/> ``` ``` public onClose(e:any) {/** code block */ } ``` Event: close ``` <ejs-timepicker id='timepicker' #timeObj (close)='onClose($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public onClose(args:any): void {/** code block */ } ```
Open Event: open ``` <input type="text" ej-timepicker id="timePicker" (open)="onOpen($event)"/> ``` ``` public onOpen(e:any) {/** code block */ } ``` Event: open ``` <ejs-timepicker id='timepicker' #timeObj (open)='onOpen($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public onOpen(args:any): void {/** code block */ } ```
Hide Method: hide() ``` <input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/> ``` ``` public onCreate(e:any) { var timeObject = $("#timePicker").data("ejTimePicker"); timeObject.show(); timeObject.hide(); } ``` Method: hide() ``` <ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public create(args:any): void { this.timeObj.show(); this.timeObj.hide(); } ```
Show Method: show() ``` <input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/> ``` ``` public onCreate(e:any) { var timeObject = $("#timePicker").data("ejTimePicker"); timeObject.show(); } ``` Method: show() ``` <ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker> ``` ``` @ViewChild("timeObj") timeObj: TimePickerComponent; public create(args:any): void { this.timeObj.show(); } ```