| Behavior |
API in Essential JS 1 |
API in Essential JS 2 |
|
Width
|
Property: width
HTML
<ej-date-time-picker id="datetime" width="200"></ej-date-time-picker>
|
Property: width
HTML
<ejs-datetimepicker id="datetime" width="200"></ejs-datetimepicker>
|
|
Read only
|
Property: read-only
HTML
<ej-date-time-picker id="datetime" read-only="true"></ej-date-time-picker>
|
Property: readonly
HTML
<ejs-datetimepicker id="datetime" readonly="true"></ejs-datetimepicker>
|
|
Show Clear Button
|
Not Applicable
|
Property: showClearButton
HTML
<ejs-datetimepicker id="datetime" showClearButton="true"></ejs-datetimepicker>
|
|
Height
|
Property: height
HTML
<ej-date-time-picker id="datetime" height="35"></ej-date-time-picker>
|
Property: cssClass
HTML
<ejs-datetimepicker id="datetime" cssclass="e-custom-style"></ejs-datetimepicker>
<style>
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
height: 35px;
}
</style>
|
|
Html Attributes
|
Property: html-attributes
HTML
@{ IDictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add("required", "required");
}
<ej-date-time-picker id="datetime" html-attributes="htmlAttr"></ej-date-time-picker>
|
Not Applicable
|
|
Week Number
|
Property: week-number
HTML
<ej-date-time-picker id="datetime" week-number="true"></ej-date-time-picker>
|
Property: weekNumber
HTML
<ejs-datetimepicker id="datetime" weekNumber="true"></ejs-datetimepicker>
|
|
Watermark Text
|
Property: watermark-text
HTML
<ej-date-time-picker id="datetime" watermark-text="Enter date and time"></ej-date-time-picker>
|
Property: placeholder
HTML
<ejs-datetimepicker id="datetime" placeholder="Enter date and time"></ejs-datetimepicker>
|
|
Disable and enable
|
Property: enabled
HTML
<ej-date-time-picker id="datetime" enabled="false"></ej-date-time-picker>
|
Property: enabled
HTML
<ejs-datetimepicker id="datetime" enabled="false"></ejs-datetimepicker>
|
|
Allow Editing
|
Property: allow-edit
HTML
<ej-date-time-picker id="datetime" allow-edit="false"></ej-date-time-picker>
|
Property: allowEdit
HTML
<ejs-datetimepicker id="datetime" allowEdit="false"></ejs-datetimepicker>
|
|
z Index
|
Property: css-class
HTML
<ej-date-time-picker id="datetime" css-class="e-custom-class"></ej-date-time-picker>
<style>
.e-datetime-popup.e-popup.e-custom-class {
z-index: 100 !important;
}
</style>
|
Property: zIndex
HTML
<ej-date-time-picker id="datetime" zIndex="100"></ej-date-time-picker>
|
|
Float Label Type
|
Not Applicable
|
Property: floatLabelType
HTML
<ejs-datetimepicker id="datetime" placeholder="Enter date and time" floatLabelType="Syncfusion.EJ2.Inputs.FloatLabelType.Auto"></ejs-datetimepicker>
|
|
Render day cell
|
Not Applicable
|
Event: renderDayCell
HTML
<ejs-datetimepicker id="datetime" renderdaycell="onRenderCell"></ejs-datetimepicker>
<script>
function onRenderCell() { }
</script>
|
|
Focus In event
|
Event: focus-in
HTML
<ej-date-time-picker id="datetime" focus-in="onFocus"></ej-date-time-picker>
<script>
function onFocus() { }
</script>
|
Event: focus
HTML
<ejs-datetimepicker id="datetime" focus="onFocus"></ejs-datetimepicker>
<script>
function onFocus() { }
</script>
|
|
Focus out event
|
Event: focus-out
HTML
<ej-date-time-picker id="datetime" focus-out="onFocusout"></ej-date-time-picker>
<script>
function onFocusout() { }
</script>
|
Event: blur
HTML
<ejs-datetimepicker id="datetime" blur="onBlur"></ejs-datetimepicker>
<script>
function onBlur() { }
</script>
|
|
Change event
|
Event: change
HTML
<ej-date-time-picker id="datetime" change="onChange"></ej-date-time-picker>
<script>
function onChange() { }
</script>
|
Event: change
HTML
<ejs-datetimepicker id="datetime" blur="onChange"></ejs-datetimepicker>
<script>
function onChange() { }
</script>
|
|
Created event
|
Event: create
HTML
<ej-date-time-picker id="datetime" create="onCreate"></ej-date-time-picker>
<script>
function onCreate() { }
</script>
|
Event: created
HTML
<ejs-datetimepicker id="datetime" created="onCreated"></ejs-datetimepicker>
<script>
function onCreated() { }
</script>
|
|
Destroy event
|
Event: destroy
HTML
<ej-date-time-picker id="datetime" destroy="onDestroy"></ej-date-time-picker>
<script>
function onDestroy() { }
</script>
|
Event: destroyed
HTML
<ejs-datetimepicker id="datetime" destroyed="onDestroyed"></ejs-datetimepicker>
<script>
function onDestroyed() { }
</script>
|