Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
CSS Class
|
Property: CssClass
<input type="text" ej-timepicker id="timePicker" cssClass="gradient-lime"/>
|
Property: CssClass
<ejs-timepicker id='timepicker' cssClass='e-custom-style'></ejs-timepicker>
|
Popup list customization
|
Not Applicable
|
Event: itemRender
<ejs-timepicker id='timepicker' (itemRender)='itemRanderHandler($event)'></ejs-timepicker>
public itemRenderHandler(args: ItemEventArgs): void { }
|
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();
}
.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
<ejs-timepicker id='timepicker' cssClass='e-custom-style'></ejs-timepicker>
.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
<ejs-timepicker id='timepicker' step='120'></ejs-timepicker>
|
FocusIn event
|
Event: focusIn
<input type="text" ej-timepicker id="timePicker" (focusIn)="onFocus($event)"/>
public onFocus(e:any) { }
|
Event: focus
<ejs-timepicker id='timepicker' #timeObj (focus)='onFocus($event)'></ejs-timepicker>
@ViewChild("timeObj") timeObj: TimePickerComponent;
public onFocus(args:any):void {
}
|
FocusOut event
|
Event: focusOut
<input type="text" ej-timepicker id="timePicker" (focusOut)="onFocus($event)"/>
public onFocus(e:any) { }
|
Event: blur
<ejs-timepicker id='timepicker' #timeObj (blur)='onBlur($event)'></ejs-timepicker>
@ViewChild("timeObj") timeObj: TimePickerComponent;
public onBlur(args:any):void {
}
|
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;
}
|