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
```
|
| 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
```
|
| 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(); } ``` |