Contents
- Time Selection
- Time Format
- Time Range
- Disabled Time Ranges
- Customization
- Accessibility
- Persistence
- Validation
- Common
- Globalization
- Strict Mode
- Open and Close
Having trouble getting help?
Contact Support
Contact Support
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(); } ``` |