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