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
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
cssClass: "gradient-lime"
});
|
property: cssClass
let datetimepickerObject: DateTimePicker = new DateTimePicker({
cssClass: 'e-custom-style'
});
datetimepickerObject.appendTo('#element');
|
Show/Hide the today button
|
Can be achieved by
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
cssClass: "e-custom-class"
});
.e-datetime-popup.e-popup.e-custom-class .e-button-container{
display: none !important;
}
|
property: showTodayButton
let datetimepickerObject: DateTimePicker = new DateTimePicker({
showTodayButton: false
});
datetimepickerObject.appendTo('#element');
|
Show/Hide the other month dates
|
property: showOtherMonths
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
showOtherMonths: false
});
|
Can be achieved by
let datetimepickerObject: DateTimePicker = new DateTimePicker();
datetimepickerObject.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
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
showPopupButton: false
});
|
Can be achieved by
let datetimepickerObject: DateTimePicker = new DateTimePicker({
focus: onFocus
});
datetimepickerObject.appendTo('#element');
function onFocus(args: FocusEventArgs) {
datetimepickerObject.show();
}
.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;
}
|
Enable/Disable the rounded corner
|
property: showRoundedCorner
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
showRoundedCorner: true
});
|
Can be achieved by
let datetimepickerObject: DateTimePicker = new DateTimePicker({
cssClass: 'e-custom-style'
});
datetimepickerObject.appendTo('#element');
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
border-radius: 4px;
}
|
Skip a month
|
property: stepMonths
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
stepMonths: 2
});
|
Method: navigateTo()
let datetimepickerObject: DateTimePicker = new DateTimePicker({
value: new Date("09/04/2019"),
open:onOpen
});
datetimepickerObject.appendTo('#element');
function onOpen(args:any){
datepicker.navigateTo('Year', new Date("03/18/2018"));
}
|
Show/Hide the tooltip
|
property: showTooltip
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
showTooltip: false
});
|
Not Applicable
|
Interval
|
property: interval
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
interval: 60
});
|
property: step
let datetimepickerObject: DateTimePicker = new DateTimePicker({
step: 60
});
datetimepickerObject.appendTo('#element');
|
Button text
|
property: buttonText
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
buttonText : { today: "Today", timeNow: "Time Now", done: "Done", timeTitle: "Time" }
});
|
Can be achieved by
L10n.load({ 'en': { 'DateTimePicker': { today:'Now' } }});
let datetimepickerObject: DateTimePicker = new DateTimePicker({
locale: 'en'
});
datetimepickerObject.appendTo('#element');
|
Enable/Disable the animation
|
property: enableAnimation
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
enableAnimation : false
});
|
Not Applicable
|
FocusIn method
|
Not Applicable
|
Method: focusIn()
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter date'
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.focusIn();
|
FocusOut method
|
Not Applicable
|
Method: focusOut()
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter date'
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.focusOut();
|
Prevent popup close
|
Not Applicable
|
Can be achieved by
let datetimepickerObject: DateTimePicker = new DateTimePicker({
close: function (args: PreventableEventArgs) {
args.preventDefault();
}
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.show();
|
Prevent popup open
|
Not Applicable
|
Can be achieved by
let datetimepickerObject: DateTimePicker = new DateTimePicker({
open: function (args: PreventableEventArgs) {
args.preventDefault();
}
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.show();
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
Validation rules
|
property: validationRules
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
validationRules : {required : true}
});
|
Can be achieved by
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter datetime',
value: new Date()
});
datepickerObject.appendTo('#element');
let options: FormValidatorModel = {
rules: {
'datevalue': { required: true }
}
}
let formObject: FormValidator = new FormValidator('#form-element', options);
|
Validation message
|
property: validationMessage
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
validationRules : {required : true},
validationMessage : {required: "Required DateTime value" }
});
|
Can be achieved by
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter dateTime',
value: new Date()
});
datetimepickerObject.appendTo('#element');
let options: FormValidatorModel = {
rules: {
'datevalue': { required: [true, 'DateTime value required'] }
},
customPlacement: function (inputElement, errorElement) {
(<HTMLElement>inputElement).parentElement.parentElement.appendChild(errorElement);
}
}
let formObject: FormValidator = new FormValidator('#form-element', options);
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
Width
|
property: width
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
width: 200
});
|
property: width
let datetimepickerObject: DateTimePicker = new DateTimePicker({
width: '200px'
});
datetimepickerObject.appendTo('#element');
|
Readonly
|
property: readOnly
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
readOnly : true
});
|
property: readonly
let datetimepickerObject: DateTimePicker = new DateTimePicker({
readonly:true,
value:new Date()
});
datetimepickerObject.appendTo('#element');
|
Show/Hide the clear button
|
Not Applicable
|
property: showClearButton
let datetimepickerObject: DateTimePicker = new DateTimePicker({
showClearButton: true
});
datetimepickerObject.appendTo('#element');
|
Height
|
property: height
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
height: 35
});
|
Can be achieved by
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
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
htmlAttributes : {required:"required"}
});
|
Not Applicable
|
Show/Hide the week number
|
property: weekNumber
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
weekNumber : true
});
|
property: weekNumber
let datetimepickerObject: DateTimePicker = new DateTimePicker({
weekNumber:true
});
datetimepickerObject.appendTo('#element');
|
Watermark text
|
property: watermarkText
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
watermarkText: "Enter date"
});
|
property: placeholder
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter date'
});
datetimepickerObject.appendTo('#element');
|
Disable/Enable
|
property: enabled
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
enabled: false
});
|
property: enabled
let datetimepickerObject: DateTimePicker = new DateTimePicker({
enabled:false
});
datetimepickerObject.appendTo('#element');
|
Enable/Disable the textbox editing
|
property: allowEdit
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
allowEdit : true
});
|
property: allowEdit
let datetimepickerObject: DateTimePicker = new DateTimePicker({
allowEdit : true
});
datetimepickerObject.appendTo('#element');
|
zIndex
|
Can be achieved by
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
cssClass: "e-custom-class"
});
.e-datetime-popup.e-popup.e-custom-class {
z-index: 100 !important;
}
|
property: zIndex
let datetimepickerObject: DateTimePicker = new DateTimePicker({
zIndex: 100
});
datetimepickerObject.appendTo('#element');
|
Specify the placeholder text behavior
|
Not Applicable
|
property: floatLabelType
let datetimepickerObject: DateTimePicker = new DateTimePicker({
placeholder: 'Enter date',
floatLabelType: 'Auto'
});
datetimepickerObject.appendTo('#element');
|
Event callback for each cell creation
|
Not Applicable
|
Event: renderDayCell
let datetimepickerObject: DateTimePicker = new DateTimePicker({
renderDayCell: onRenderCell
});
datetimepickerObject.appendTo('#element');
function onRenderCell(args: RenderDayCellEventArgs): void {}
|
FocusIn event
|
Event: focusIn
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
focusIn: function (args) {}
});
|
Event: focus
let datetimepickerObject: DateTimePicker = new DateTimePicker({
focus: onFocus
});
datetimepickerObject.appendTo('#element');
function onFocus(args: FocusEventArgs): void {}
|
FocusOut event
|
Event: focusOut
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
focusOut: function (args) {}
});
|
Event: blur
let datetimepickerObject: DateTimePicker = new DateTimePicker({
blur: onBlur
});
datetimepickerObject.appendTo('#element');
function onBlur(args: BlurEventArgs): void {}
|
Change event
|
Event: change
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
change: function (args) {}
});
|
Event: change
let datetimepickerObject: DateTimePicker = new DateTimePicker({
change: onChange
});
datetimepickerObject.appendTo('#element');
function onChange(args: ChangedEventArgs): void {}
|
Create event
|
Event: create
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
create: function (args) {}
});
|
Event: created
let datetimepickerObject: DateTimePicker = new DateTimePicker({
created: onCreate
});
datetimepickerObject.appendTo('#element');
function onCreate(args): void {}
|
Destroy event
|
Event: destroy
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
destroy: function (args) {}
});
|
Event: destroyed
let datetimepickerObject: DateTimePicker = new DateTimePicker({
destroyed: onDestroy
});
datetimepickerObject.appendTo('#element');
function onDestroy(args): void {}
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
Close
|
Event: close
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
close: function (args) {}}
});
|
Event: close
let datetimepickerObject: DateTimePicker = new DateTimePicker({
close: function (args: PreventableEventArgs) {}
});
datetimepickerObject.appendTo('#element');
|
Hide
|
Method: hide()
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
});
datetimeObj.hide();
|
Method: hide()
let datetimepickerObject: DateTimePicker = new DateTimePicker({
value: new Date("05/11/2017")
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.hide();
|
Open
|
Event: open
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
open: function (args) {}}
});
|
Event: open
let datetimepickerObject: DateTimePicker = new DateTimePicker({
open: function (args: PreventableEventArgs) {}
});
datetimepickerObject.appendTo('#element');
|
Show
|
Method: show()
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
});
datetimeObj.show();
|
Method: show()
let datetimepickerObject: DateTimePicker = new DateTimePicker({
value: new Date("05/11/2017")
});
datetimepickerObject.appendTo('#element');
datetimepickerObject.show();
|