Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
Width
|
Property: Width
<input type="text" ej-datetimepicker id="datetimepicker" width="200px"/>
|
Property: Width
<ejs-datetimepicker id="datetimepicker" width="300px" ></ejs-datetimepicker>
|
Readonly
|
Property: ReadOnly
<input type="text" ej-datetimepicker id="datetimepicker" [readOnly]="true"/>
|
Property: Readonly
<ejs-datetimepicker id="datetimepicker" value="5/5/2019" readonly="true" ></ejs-datetimepicker>
|
Show/Hide the clear button
|
Not Applicable
|
Property: showClearButton
<ejs-datetimepicker id="datetimepicker" [showClearButton]="false" ></ejs-datetimepicker>
|
Height
|
Property: Height
<input type="text" ej-datetimepicker id="datetimepicker" height="35px"/>
|
Can be achieved by
<ejs-datetimepicker id="datetimepicker" cssClass='e-custom-style' ></ejs-datetimepicker>
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
height: 35px;
}
|
Html Attributes
|
Property: HtmlAttributes
<input type="text" ej-datetimepicker id="datetimepicker" [htmlAttributes]="htmlAttributes"/>
htmlAttributes: Object = {required:"required"}
|
Not Applicable
|
Show/Hide the week number
|
Property: weekNumber
<input type="text" ej-datetimepicker id="datetimepicker" [weekNumber]="true"/>
|
Property: weekNumber
<ejs-datetimepicker id="datetimepicker" weekNumber="true" ></ejs-datetimepicker>
|
Watermark text
|
Property: watermarkText
<input type="text" ej-datetimepicker id="datetimepicker" watermarkText="Enter date and time"/>
|
Property: Placeholder
<ejs-datetimepicker id="datetimepicker" placeholder="Enter DateTime" ></ejs-datetimepicker>
|
Disable/Enable
|
Property: enabled
<input type="text" ej-datetimepicker id="datetimepicker" [enabled]="false"/>
|
Property: enabled
<ejs-datetimepicker id="datetimepicker" [enabled]="false" ></ejs-datetimepicker>
|
Enable/Disable the textbox editing
|
Property: AllowEdit
<input type="text" ej-datetimepicker id="datetimepicker" [allowEdit]="false"/>
|
Property: AllowEdit
<ejs-datetimepicker id="datetimepicker" value="5/5/2010" [allowEdit]="false" ></ejs-datetimepicker>
|
zIndex
|
Can be achieved by
<input type="text" ej-datetimepicker id="datetimepicker" cssClas="e-custom-class"/>
.e-datetime-popup.e-popup.e-custom-class {
z-index: 100 !important;
}
|
Property: zIndex
<ejs-datetimepicker id="datetimepicker" zIndex="2000" ></ejs-datetimepicker>
|
Specify the placeholder text behavior
|
Not Applicable
|
Property: floatLabelType
<ejs-datetimepicker id="datetimepicker" floatLabelType="Always" placeholder="Enter DateTime" ></ejs-datetimepicker>
|
Event callback for each cell creation
|
Not Applicable
|
Event: renderDayCell
<ejs-datetimepicker id="datetimepicker" (renderDayCell)="onRenderCell($event)" ></ejs-datetimepicker>
public onRenderCell(args:any):void
{}
|
FocusIn event
|
Event: FocusIn
<input type="text" ej-datetimepicker id="datetimepicker" (focusIn)="onFocus($event)"/>
public onFocus(e:any) { }
|
Event: focus
<ejs-datetimepicker id="datetimepicker" (focus)="onFocus($event)" ></ejs-datetimepicker>
public onFocus(args:any):void{
}
|
FocusOut event
|
Event: focusOut
<input type="text" ej-datetimepicker id="datetimepicker" (focusOut)="onFocusout($event)"/>
public onFocusout(e:any) { }
|
Event: blur
<ejs-datetimepicker id="datetimepicker" (blur)="onBlur($event)" ></ejs-datetimepicker>
public onBlur(args:any):void{
}
|
Change event
|
Event: change
<input type="text" ej-datetimepicker id="datetimepicker" (ejchange)="onChange($event)"/>
public onChange(e:any) { }
|
Event: change
<ejs-datetimepicker id="datetimepicker" (change)="onChange($event)" ></ejs-datetimepicker>
public onChange(args:any):void{
}
|
Created event
|
Event: create
<input type="text" ej-datetimepicker id="datetimepicker" (create)="onCreate($event)"/>
public onCreate(e:any) { }
|
Event: created
<ejs-datetimepicker id="datetimepicker" (created)="onCreate($event)" ></ejs-datetimepicker>
public onCreate(args:any):void{
}
|
Destroy event
|
Event: Destroy
<input type="text" ej-datetimepicker id="datetimepicker" (destroy)="onDestroy($event)"/>
public onDestroy(e:any) { }
|
Event: destroyed
<ejs-datetimepicker id="datetimepicker" #datetimeObj (destroyed)="onDestroyed($event)" (change)="onChange($event)" ></ejs-datetimepicker>
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;
public onDestroyed(args:any):void{
console.log("destroyed")
}
public onChange(args:any):void{
this.datetimeObj.destroy();
}
|