This article describes the API migration process of DateTimePicker component from Essential JS 1 to Essential JS 2.
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
|
CSS Class
|
property: cssClass
```javascript
$("#datetimepicker").ejDateTimePicker({ cssClass: "gradient-lime"});
```
|
property: cssClass
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ cssClass: 'e-custom-style'});datetimepicker.appendTo('#element');
```
|
|
Show?Hide the button
|
Can be achieved by:
```javascript
$("#datetimepicker").ejDateTimePicker({ cssClass: "e-custom-class"})
```
```
.e-datetime-popup.e-popup.e-custom-class .e-button-container { display: none !important;}
```
|
property: showTodayButton
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ showTodayButton: false});datetimepicker.appendTo('#element');
```
|
|
Show/Hide the other month dates
|
property: showOtherMonths
```javascript
$("#datetimepicker").ejDateTimePicker({ showOtherMonths: false});
```
|
Ca be achieved by:
```javascript
var datetimepicker = new ej.calendars.DateTimePicker();
datetimepicker.appendTo('#element');
```
```
.e-DateTimePicker .e-calendar .e-content tr.e-month-hide,.e-DateTimePicker .e-calendar .e-content td.e-other-month > .e-day {
visibility: none;
}
.e-DateTimePicker .e-calendar .e-content td.e-month-hide,.e-DateTimePicker .e-calendar .e-content td.e-other-month {
pointer-events: none;
touch-action: none;}
}
```
|
|
Show/Hide the popup button
|
property: showPopupButton
```javascript
$("#datetimepicker").ejDateTimePicker({ showPopupButton: false});
```
|
Can be achieved by:
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ focus: onFocus});
datetimepicker.appendTo('#element');
function onFocus(args) {
datetimepicker.show();
}
```
```
.e-control-wrapper .e-input-group-icon.e-date-icon { display: none; }
```
|
|
Enable/Disable the rounded corner
|
property: showRoundedCorner
```javascript
$("#datetimepicker").ejDateTimePicker({ showRoundedCorner: true});
```
|
Can be achieved by:
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ cssClass: 'e-custom-style'});datetimepicker.appendTo('#element');
```
```
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { border-radius: 4px;}
```
|
|
Skip a month
|
property: stepMonths
```javascript
$("#datetimepicker").ejDateTimePicker({stepMonths: 2});
```
|
Can be achieved by:
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({
value: new Date("09/04/2018"),
open:onOpen
});
datetimepicker.appendTo('#element');
function onOpen(args) {
datetimepicker.navigateTo('Year', new Date("03/18/2018"));
}
```
|
|
Show/Hide the tooltip
|
property: showTooltip
```javascript
$("#datetimepicker").ejDateTimePicker({ showTooltip: false});
```
|
Not Applicable
|
|
Interval
|
property: interval
```javascript
$("#datetimepicker").ejDateTimePicker({ interval: 60});
```
|
property: step
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ step: 60});
datetimepicker.appendTo('#element');
```
|
|
Button text
|
property: buttonText
```javascript
$("#datetimepicker").ejDateTimePicker({ buttonText : { today: "Today", timeNow: "Time Now", done: "Done", timeTitle: "Time" }});
```
|
Can be achieved by:
```javascript
L10n.load({ 'en': { 'DateTimePicker': {today:'Now' } }});
var datetimepicker = new ej.calendars.DateTimePicker({ locale: 'en'});
datetimepicker.appendTo('#element');
```
|
|
Enable/Disable the animation
|
property: enableAnimation
```javascript
$("#datetimepicker").ejDateTimePicker({ enableAnimation : false});
```
|
Not Applicable
|
|
FocusIn method
|
Not Applicable
|
Method: focusIn()
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ placeholder: 'Enter date'});datetimepicker.appendTo('#element');
datetimepicker.focusIn();
```
|
|
FocusOut method
|
Not Applicable
|
Method: focusOut()
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ placeholder: 'Enter date'});datetimepicker.appendTo('#element');
datetimepicker.focusOut();
```
|
|
Prevent popup close
|
Not Applicable
|
Event: close
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({
close: function (args) {
args.preventDefault();
}
});
datetimepicker.appendTo('#element');
datetimepicker.show();
```
|
|
Prevent popup open
|
Not Applicable
|
Event: open
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({
open: function (args) {
args.preventDefault();
}
});
datetimepicker.appendTo('#element');
datetimepicker.show();
```
|
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
|
Width
|
property: width
```javascript
$("#datetimepicker").ejDateTimePicker({width: 200});
```
|
property: width
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ width: '200px'});
datetimepicker.appendTo('#element');
```
|
|
Readonly
|
property: readOnly
```javascript
$("#datetimepicker").ejDateTimePicker({ readOnly : true});
```
|
property: readonly
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ readonly:true, value:new Date() });datetimepicker.appendTo('#element');
```
|
|
Show/Hide the clear button
|
Not Applicable
|
property: showClearButton
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ showClearButton: true});datetimepicker.appendTo('#element');
```
|
|
Height
|
property: height
```javascript
$("#datetimepicker").ejDateTimePicker({ height: 35});
```
|
Can be achieved by:
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ cssClass: 'e-custom-style'});datetimepicker.appendTo('#element');
```
```
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group{ height: 35px;}
```
|
|
Html Attributes
|
property: htmlAttributes
```javascript
$("#datetimepicker").ejDateTimePicker({ htmlAttributes : {required:"required"}});
```
|
Not Applicable
|
|
Enable/Disable the Week Number
|
property: weekNumber
```javascript
$("#datetimepicker").ejDateTimePicker({ weekNumber : true});
```
|
property: weekNumber
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ weekNumber:true});
datetimepicker.appendTo('#element');
```
|
|
Watermark text
|
property: watermarkText
```javascript
$("#datetimepicker").ejDateTimePicker({ watermarkText: "Enter dateTime"});
```
|
property: placeholder
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ placeholder: 'Enter dateTime'});datetimepicker.appendTo('#element');
```
|
|
Disable/Enable
|
property: enabled
```javascript
$("#datetimepicker").ejDateTimePicker({ enabled: false});
```
|
property: enabled
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ enabled:false});
datetimepicker.appendTo('#element');
```
|
|
Enable/Disable the textbox editing
|
property: allowEdit
```javascript
$("#datetimepicker").ejDateTimePicker({ allowEdit : true});
```
|
property: allowEdit
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ allowEdit : true});
datetimepicker.appendTo('#element');
```
|
|
zIndex
|
Can be achieved by:
```javascript
$("#datetimepicker").ejDateTimePicker({ cssClass: "e-custom-class"})
```
```
.e-datetime-popup.e-popup.e-custom-class { z-index: 100 !important;}
```
|
property: zIndex
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ zIndex: 100});
datetimepicker.appendTo('#element');
```
|
|
Specify the placeholder text behavior
|
Not Applicable
|
property: floatLabelType
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({
placeholder: 'Enter date',
floatLabelType: 'Auto'
});
datetimepicker.appendTo('#element');
```
|
|
Event callback for each cell creation
|
Not Applicable
|
Event: renderDayCell
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ renderDayCell: onRenderCell});datetimepicker.appendTo('#element');
function onRenderCell(args){/*code block*/}
```
|
|
FocusIn event
|
Event: focusIn
```javascript
$("#datetimepicker").ejDateTimePicker({focusIn: function (args) {/*code block*/}});
```
|
Event: focus
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ focus: onFocus});
datetimepicker.appendTo('#element');
function onFocus(args){/*code block*/}
```
|
|
FocusOut event
|
Event: focusOut
```javascript
$("#datetimepicker").ejDateTimePicker({ focusOut: function (args) {/*code block*/}});
```
|
Event: blur
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ blur: onBlur});
datetimepicker.appendTo('#element');
function onBlur(args){/*code block*/}
```
|
|
Change event
|
Event: change
```javascript
$("#datetimepicker").ejDateTimePicker({change: function (args) {/*code block*/}});
```
|
Event: change
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({change: onChange});
datetimepicker.appendTo('#element');
onChange(args){/*code block*/}
```
|
|
Created event
|
Event: create
```javascript
$("#datetimepicker").ejDateTimePicker({create: function (args) {/*code block*/}});
```
|
Event: created
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ created: onCreate});datetimepicker.appendTo('#element');
function onCreate(args) {/*code block*/}
```
|
|
Destroy event
|
Event: destroy
```javascript
$("#datetimepicker").ejDateTimePicker({ destroy: function (args) {/*code block*/}});
```
|
Event: destroyed
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ destroyed: onDestroy});datetimepicker.appendTo('#element');
function onDestroy(args){/*code block*/}
```
|
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
|
Close
|
Event: close
```javascript
$("#datetimepicker").ejDateTimePicker({close: function (args) {/*code block*/}});
```
|
Event: close
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({
close: function (args) {/*code block*/}
});
datetimepicker.appendTo('#element');
```
|
|
Hide
|
Method: hide()
```javascript
$("#datetimepicker").ejDateTimePicker();
var dateObj = $("#datetimepicker").data("ejDateTimePicker");
dateObj.hide();
```
|
Method: hide()
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ value: new Date("05/11/2017")});datetimepicker.appendTo('#element');
datetimepicker.hide();
```
|
|
Open
|
Event: open
```javascript
$("#datetimepicker").ejDateTimePicker({open: function (args) {/*code block*/}});
```
|
Event: open
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({
open: function (args) {/*code block*/}
});
datetimepicker.appendTo('#element');
```
|
|
Show
|
Method: show()
```javascript
$("#datetimepicker").ejDateTimePicker();
var dateObj = $("#datetimepicker").data("ejDateTimePicker");
dateObj.show();
```
|
Method: show()
```javascript
var datetimepicker = new ej.calendars.DateTimePicker({ value: new Date("05/11/2017")});datetimepicker.appendTo('#element');
datetimepicker.show();
```
|