|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
|
Width
|
property: width
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
width: 200
});
```
|
property: width
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
width: '200px'
});
datetimepickerObject.appendTo('#element');
```
|
|
Readonly
|
property: readOnly
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
readOnly : true
});
```
|
property: readonly
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
readonly:true,
value:new Date()
});
datetimepickerObject.appendTo('#element');
```
|
|
Show/Hide the clear button
|
Not Applicable
|
property: showClearButton
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
showClearButton: true
});
datetimepickerObject.appendTo('#element');
```
|
|
Height
|
property: height
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
height: 35
});
```
|
Can be achieved by
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
cssClass: 'e-custom-style'
});
datetimepickerObject.appendTo('#element');
```
```
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group{
height: 35px;
}
```
|
|
Html attributes
|
property: htmlAttributes
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
htmlAttributes : {required:"required"}
});
```
|
Not Applicable
|
|
Show/Hide the week number
|
property: weekNumber
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
weekNumber : true
});
```
|
property: weekNumber
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
weekNumber:true
});
datetimepickerObject.appendTo('#element');
```
|
|
Watermark text
|
property: watermarkText
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
watermarkText: "Enter date"
});
```
|
property: placeholder
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter date'
});
datetimepickerObject.appendTo('#element');
```
|
|
Disable/Enable
|
property: enabled
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
enabled: false
});
```
|
property: enabled
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
enabled:false
});
datetimepickerObject.appendTo('#element');
```
|
|
Enable/Disable the textbox editing
|
property: allowEdit
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
allowEdit : true
});
```
|
property: allowEdit
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
allowEdit : true
});
datetimepickerObject.appendTo('#element');
```
|
|
zIndex
|
Can be achieved by
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
cssClass: "e-custom-class"
});
```
```
.e-datetime-popup.e-popup.e-custom-class {
z-index: 100 !important;
}
```
|
property: zIndex
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
zIndex: 100
});
datetimepickerObject.appendTo('#element');
```
|
|
Specify the placeholder text behavior
|
Not Applicable
|
property: floatLabelType
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter date',
floatLabelType: 'Auto'
});
datetimepickerObject.appendTo('#element');
```
|
|
Event callback for each cell creation
|
Not Applicable
|
Event: renderDayCell
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
renderDayCell: onRenderCell
});
datetimepickerObject.appendTo('#element');
function onRenderCell(args: RenderDayCellEventArgs): void {/* code block*/}
```
|
|
FocusIn event
|
Event: focusIn
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
focusIn: function (args) {/* code block*/}
});
```
|
Event: focus
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
focus: onFocus
});
datetimepickerObject.appendTo('#element');
function onFocus(args: FocusEventArgs): void {/* code block*/}
```
|
|
FocusOut event
|
Event: focusOut
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
focusOut: function (args) {/* code block*/}
});
```
|
Event: blur
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
blur: onBlur
});
datetimepickerObject.appendTo('#element');
function onBlur(args: BlurEventArgs): void {/* code block*/}
```
|
|
Change event
|
Event: change
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
change: function (args) {/* code block*/}
});
```
|
Event: change
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
change: onChange
});
datetimepickerObject.appendTo('#element');
function onChange(args: ChangedEventArgs): void {/* code block*/}
```
|
|
Create event
|
Event: create
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
create: function (args) {/* code block*/}
});
```
|
Event: created
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
created: onCreate
});
datetimepickerObject.appendTo('#element');
function onCreate(args): void {/* code block*/}
```
|
|
Destroy event
|
Event: destroy
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
destroy: function (args) {/* code block*/}
});
```
|
Event: destroyed
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
destroyed: onDestroy
});
datetimepickerObject.appendTo('#element');
function onDestroy(args): void {/* code block*/}
```
|
## Globalization
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
|
Close
|
Event: close
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
close: function (args) {/* code block*/}}
});
```
|
Event: close
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
close: function (args: PreventableEventArgs) {/* code block*/}
});
datetimepickerObject.appendTo('#element');
```
|
|
Hide
|
Method: hide()
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
});
datetimeObj.hide();
```
|
Method: </i>hide()</i>
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
value: new Date("05/11/2017")
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.hide();
```
|
|
Open
|
Event: open
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
open: function (args) {/* code block*/}}
});
```
|
Event: open
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
open: function (args: PreventableEventArgs) {/* code block*/}
});
datetimepickerObject.appendTo('#element');
```
|
|
Show
|
Method: show()
```ts
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
});
datetimeObj.show();
```
|
Method: show()
```ts
let datetimepickerObject: DateTimePicker = new DateTimePicker({
value: new Date("05/11/2017")
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.show();
```
|
## View Navigation