Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Migration from Essential JS 1 in Angular TimePicker component

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 
<input type="text" ej-timepicker id="timePicker" value='5/5/2019 3:00 AM'/>
 Property: value 
<ejs-timepicker id="timepicker" value='5/5/2019 3:00 AM'></ejs-timepicker>

Time Format

Behavior API in Essential JS 1 API in Essential JS 2
Display time format Property: timeFormat 
<input type="text" ej-timepicker id="timePicker" timeFormat='hh:mm:ss tt'/>
 Property: format 
<ejs-timepicker id="timepicker"  format='hh:mm:ss'></ejs-timepicker>

Time Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum time Property: minTime 
<input type="text" ej-timepicker id="timePicker" minTime='10:00 AM'/>
 Property: min 
<ejs-timepicker id='timepicker' min='5/5/2019 3:00 AM'></ejs-timepicker>
Maximum time Property: maxTime 
<input type="text" ej-timepicker id="timePicker" maxTime='10:00 AM'/>
 Property: Max 
<ejs-timepicker id='timepicker' max='5/5/2019 3:00 AM'></ejs-timepicker>
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 
<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 {/** 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();
}
.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) { /** 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 
<input type="text" ej-timepicker id="timePicker" width="300px"/>
 Property: width 
<ejs-timepicker id='timepicker' width='200px'></ejs-timepicker>
Readonly Property: readOnly 
<input type="text" ej-timepicker id="timePicker"  [readOnly]="true"/>
 Property: Readonly 
<ejs-timepicker id='timepicker' readonly='true' value='5/5/2019 12:00 AM'></ejs-timepicker>
Show/Hide the clear button Not Applicable Property: showClearButton 
<ejs-timepicker id='timepicker' showClearButton='true'></ejs-timepicker>
Height Property: Height 
<input type="text" ej-timepicker id="timePicker" height="50px"/>
 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 {
    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 
<input type="text" ej-timepicker id="timePicker" watermarkText="Enter Time"/>
 Property: placeholder 
<ejs-timepicker id='timepicker' placeholder='Select a Time'></ejs-timepicker>
Enable the TimePicker Property: enabled 
<input type="text" ej-timepicker id="timePicker" [enabled]="true"/>
 Property: enabled 
<ejs-timepicker id='timepicker' enabled='true'></ejs-timepicker>
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 
<ejs-timepicker id='timepicker' enabled='false'></ejs-timepicker>
Enable/Disable the textBox editing Not Applicable Property: allowEdit 
<ejs-timepicker id='timepicker' allowEdit='false'></ejs-timepicker>
zIndex Not Applicable Property: zIndex 
<ejs-timepicker id='timepicker' zIndex='2000'></ejs-timepicker>
Specify the placeholder text behavior Not Applicable Property: floatLabelType 
<ejs-timepicker id='timepicker' floatLabelType='Always'></ejs-timepicker>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale 
<input type="text" ej-timepicker id="timePicker" locale="en-US"/>
 Property: locale 
<ejs-timepicker id='timepicker' locale='en'></ejs-timepicker>

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 
<ejs-timepicker id='timepicker' strictMode='true'></ejs-timepicker>

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