JavaScript (ES5)
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript (ES5) DateTimePicker control

This article describes the API migration process of DateTimePicker component from Essential JS 1 to Essential JS 2.

DateTime Selection

Behavior API in Essential JS 1 API in Essential JS 2
Setting the value property: value 
$("#datetimepicker").ejDateTimePicker({value: new Date("5/5/2014 12:00 PM")});
 property: value 
var datetimepicker = new ej.calendars.DateTimePicker({ value: new Date("05/11/2017 12:00 PM")});datetimepicker.appendTo('#element');

DateTime Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the datetime format property: dateTimeFormat 
$("#datetimepicker").ejDateTimePicker({
    value: new Date("05/11/2017 12:00 PM"),
    dateTimeFormat: "dd/MM/yyyy hh:mm tt"
});
 property: format 
var datetimepicker = new ej.calendars.DateTimePicker({
    value: new Date("05/11/2017 12:00 PM"),
    format: 'dd/MM/yyyy hh:mm a'
});
datetimepicker.appendTo('#element');
Day header format property: dayHeaderFormat 
$("#datetimepicker").ejDateTimePicker({ dayHeaderFormat: "short"});
 Not Applicable

Calendar Views

Behavior API in Essential JS 1 API in Essential JS 2
Start view property: startLevel 
$("#datetimepicker").ejDateTimePicker({ startLevel: ej.DateTimePicker.Level.Year});
 property: start 
var datetimepicker = new ej.calendars.DateTimePicker({ start:'Decade'});datetimepicker.appendTo('#element');
Depth view property: depthLevel 
$("#datetimepicker").ejDateTimePicker({ depthLevel: ej.DateTimePicker.Level.Year});
 property: depth 
var datetimepicker = new ej.calendars.DateTimePicker({ depth:'Year'});datetimepicker.appendTo('#element');

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum datetime property: minDateTime 
$("#datetimepicker").ejDateTimePicker({ minDateTime: new Date("5/1/2013 10:00 AM")});
 property: min 
var datetimepicker = new ej.calendars.DateTimePicker({ min: new Date("5/1/2013 10:00 AM")});datetimepicker.appendTo('#element');
Maximum datetime property: maxDateTime 
$("#datetimepicker").ejDateTimePicker({ maxDateTime : new Date("5/30/2015 10:00 PM")});
 property: max 
var datetimepicker = new ej.calendars.DateTimePicker({ max : new Date("5/30/2015 10:00 PM")});datetimepicker.appendTo('#element');

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Disabled dates property: disabledDateTimeRanges 
$("#datetimepicker").ejDateTimePicker({
    disableDateTimeRanges: [{   startDateTime: new Date("11/30/2018 11:59 PM"),   endDateTime:new Date("12/1/2018 11:59 PM")}]
});
 Can be achieved by: 
var datetimepicker = new ej.calendars.DateTimePicker({
    renderDayCell: disableDate
});
datetimepicker.appendTo('#element');

function disableDate(args) {
    if (args.date.getDay() === 0 || args.date.getDay() === 6) {
        args.isDisabled = true;
    }
}

Customization

Behavior API in Essential JS 1 API in Essential JS 2
CSS Class property: cssClass 
$("#datetimepicker").ejDateTimePicker({ cssClass: "gradient-lime"});
 property: cssClass 
var datetimepicker = new ej.calendars.DateTimePicker({ cssClass: 'e-custom-style'});datetimepicker.appendTo('#element');
Show?Hide the button Can be achieved by: 
$("#datetimepicker").ejDateTimePicker({ cssClass: "e-custom-class"})
.e-datetime-popup.e-popup.e-custom-class .e-button-container { display: none !important;}
 property: showTodayButton 
var datetimepicker = new ej.calendars.DateTimePicker({ showTodayButton: false});datetimepicker.appendTo('#element');
Show/Hide the other month dates property: showOtherMonths 
$("#datetimepicker").ejDateTimePicker({ showOtherMonths: false});
 Ca be achieved by: 
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 
$("#datetimepicker").ejDateTimePicker({ showPopupButton: false});
 Can be achieved by: 
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 
$("#datetimepicker").ejDateTimePicker({ showRoundedCorner: true});
 Can be achieved by: 
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 
$("#datetimepicker").ejDateTimePicker({stepMonths: 2});
 Can be achieved by: 
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 
$("#datetimepicker").ejDateTimePicker({ showTooltip: false});
 Not Applicable
Interval property: interval 
$("#datetimepicker").ejDateTimePicker({ interval: 60});
 property: step 
var datetimepicker = new ej.calendars.DateTimePicker({ step: 60});
datetimepicker.appendTo('#element');
Button text property: buttonText 
$("#datetimepicker").ejDateTimePicker({ buttonText : {  today: "Today",  timeNow: "Time Now",  done: "Done", timeTitle: "Time" }});
 Can be achieved by: 
L10n.load({  'en': { 'DateTimePicker': {today:'Now' }  }});

var datetimepicker = new ej.calendars.DateTimePicker({ locale: 'en'});
datetimepicker.appendTo('#element');
Enable/Disable the animation property: enableAnimation 
$("#datetimepicker").ejDateTimePicker({ enableAnimation : false});
 Not Applicable
FocusIn method Not Applicable Method: focusIn() 
var datetimepicker = new ej.calendars.DateTimePicker({ placeholder: 'Enter date'});datetimepicker.appendTo('#element');
datetimepicker.focusIn();
FocusOut method Not Applicable Method: focusOut() 
var datetimepicker = new ej.calendars.DateTimePicker({ placeholder: 'Enter date'});datetimepicker.appendTo('#element');
datetimepicker.focusOut();
Prevent popup close Not Applicable Event: close 
var datetimepicker = new ej.calendars.DateTimePicker({
    close: function (args) {
        args.preventDefault();
    }
});
datetimepicker.appendTo('#element');
datetimepicker.show();
Prevent popup open Not Applicable Event: open 
var datetimepicker = new ej.calendars.DateTimePicker({
    open: function (args) {
        args.preventDefault();
    }
});
datetimepicker.appendTo('#element');
datetimepicker.show();

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable RTL property: enableRTL 
$("#datetimepicker").ejDateTimePicker({ enableRTL : true});
 property: enableRtl 
var datetimepicker = new ej.calendars.DateTimePicker({ enableRtl : true});
datetimepicker.appendTo('#element');

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable Persistence property: enablePersistence 
$("#datetimepicker").ejDateTimePicker({ enablePersistence : true});
 property: enablePersistence 
var datetimepicker = new ej.calendars.DateTimePicker({ enablePersistence : true});datetimepicker.appendTo('#element');

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules property: validationRules 
$("#datetimepicker").ejDateTimePicker({ validationRules:{  required : true }});
 Can be achieved by: 
var datetimepicker = new ej.calendars.DateTimePicker({ placeholder: 'Enter date'});datetimepicker.appendTo('#element');

var options = {  rules: {   'datetime': { required: true }} }
var formObject: FormValidator = new FormValidator('#form-element', options);
Validation message property: validationMessage 
$("#datetimepicker").ejDateTimePicker({ validationRules:{required:true},
validationMessage:{ required: "Required Date value" }
});
 Can be achieved by: 
var datetimepicker = new ej.calendars.DateTimePicker({
    placeholder: 'Enter date'
});
datetimepicker.appendTo('#element');

var options = {
    rules: {
        'datetime': {    required: [true, 'DateTime value required'] }
    },
    customPlacement: function (inputElement, errorElement) {
        inputElement.parentElement.parentElement.appendChild(errorElement);
    }
};
    var formObject = new ej.inputs.FormValidator('#form-element', options);

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width property: width 
$("#datetimepicker").ejDateTimePicker({width: 200});
 property: width 
var datetimepicker = new ej.calendars.DateTimePicker({ width: '200px'});
datetimepicker.appendTo('#element');
Readonly property: readOnly 
$("#datetimepicker").ejDateTimePicker({ readOnly : true});
 property: readonly 
var datetimepicker = new ej.calendars.DateTimePicker({ readonly:true, value:new Date() });datetimepicker.appendTo('#element');
Show/Hide the clear button Not Applicable property: showClearButton 
var datetimepicker = new ej.calendars.DateTimePicker({ showClearButton: true});datetimepicker.appendTo('#element');
Height property: height 
$("#datetimepicker").ejDateTimePicker({ height: 35});
 Can be achieved by: 
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 
$("#datetimepicker").ejDateTimePicker({ htmlAttributes : {required:"required"}});
 Not Applicable
Enable/Disable the Week Number property: weekNumber 
$("#datetimepicker").ejDateTimePicker({ weekNumber : true});
 property: weekNumber 
var datetimepicker = new ej.calendars.DateTimePicker({ weekNumber:true});
datetimepicker.appendTo('#element');
Watermark text property: watermarkText 
$("#datetimepicker").ejDateTimePicker({ watermarkText: "Enter dateTime"});
 property: placeholder 
var datetimepicker = new ej.calendars.DateTimePicker({ placeholder: 'Enter dateTime'});datetimepicker.appendTo('#element');
Disable/Enable property: enabled 
$("#datetimepicker").ejDateTimePicker({ enabled: false});
 property: enabled 
var datetimepicker = new ej.calendars.DateTimePicker({ enabled:false});
datetimepicker.appendTo('#element');
Enable/Disable the textbox editing property: allowEdit 
$("#datetimepicker").ejDateTimePicker({ allowEdit : true});
 property: allowEdit 
var datetimepicker = new ej.calendars.DateTimePicker({ allowEdit : true});
datetimepicker.appendTo('#element');
zIndex Can be achieved by: 
$("#datetimepicker").ejDateTimePicker({  cssClass: "e-custom-class"})
.e-datetime-popup.e-popup.e-custom-class { z-index: 100 !important;}
 property: zIndex 
var datetimepicker = new ej.calendars.DateTimePicker({ zIndex: 100});
datetimepicker.appendTo('#element');
Specify the placeholder text behavior Not Applicable property: floatLabelType 
var datetimepicker = new ej.calendars.DateTimePicker({
    placeholder: 'Enter date',
    floatLabelType: 'Auto'
});
datetimepicker.appendTo('#element');
Event callback for each cell creation Not Applicable Event: renderDayCell 
var datetimepicker = new ej.calendars.DateTimePicker({ renderDayCell: onRenderCell});datetimepicker.appendTo('#element');
function onRenderCell(args){/*code block*/}
FocusIn event Event: focusIn 
$("#datetimepicker").ejDateTimePicker({focusIn: function (args) {/*code block*/}});
 Event: focus 
var datetimepicker = new ej.calendars.DateTimePicker({ focus: onFocus});
datetimepicker.appendTo('#element');
function onFocus(args){/*code block*/}
FocusOut event Event: focusOut 
$("#datetimepicker").ejDateTimePicker({ focusOut: function (args) {/*code block*/}});
 Event: blur 
var datetimepicker = new ej.calendars.DateTimePicker({ blur: onBlur});
datetimepicker.appendTo('#element');
function onBlur(args){/*code block*/}
Change event Event: change 
$("#datetimepicker").ejDateTimePicker({change: function (args) {/*code block*/}});
 Event: change 
var datetimepicker = new ej.calendars.DateTimePicker({change: onChange});
datetimepicker.appendTo('#element');
onChange(args){/*code block*/}
Created event Event: create 
$("#datetimepicker").ejDateTimePicker({create: function (args) {/*code block*/}});
 Event: created 
var datetimepicker = new ej.calendars.DateTimePicker({ created: onCreate});datetimepicker.appendTo('#element');
function onCreate(args) {/*code block*/}
Destroy event Event: destroy 
$("#datetimepicker").ejDateTimePicker({ destroy: function (args) {/*code block*/}});
 Event: destroyed 
var datetimepicker = new ej.calendars.DateTimePicker({ destroyed: onDestroy});datetimepicker.appendTo('#element');
function onDestroy(args){/*code block*/}

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale property: locale 
$("#datetimepicker").ejDateTimePicker({ locale: "en-US"});
 property: locale 
var datetimepicker = new ej.calendars.DateTimePicker({ locale: 'en'});
datetimepicker.appendTo('#element');
Specify the first day of week property: startDay 
$("#datetimepicker").ejDateTimePicker({ startDay: 2});
 property: firstDayOfWeek 
var datetimepicker = new ej.calendars.DateTimePicker({ firstDayOfWeek: 2});datetimepicker.appendTo('#element');

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode property: enableStrictMode 
$("#datetimepicker").ejDateTimePicker({ enableStrictMode : true});
 property: strictMode 
var datetimepicker = new ej.calendars.DateTimePicker({
    strictMode: true,
    value: new Date('5/28/2017'),
    min: new Date('5/5/2017'),
    max: new Date('5/25/2017')
});
datetimepicker.appendTo('#element');

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close 
$("#datetimepicker").ejDateTimePicker({close: function (args) {/*code block*/}});
 Event: close 
var datetimepicker = new ej.calendars.DateTimePicker({
    close: function (args) {/*code block*/}
});
datetimepicker.appendTo('#element');
Hide Method: hide() 
$("#datetimepicker").ejDateTimePicker();
var dateObj = $("#datetimepicker").data("ejDateTimePicker");
dateObj.hide();
 Method: hide() 
var datetimepicker = new ej.calendars.DateTimePicker({ value: new Date("05/11/2017")});datetimepicker.appendTo('#element');
datetimepicker.hide();
Open Event: open 
$("#datetimepicker").ejDateTimePicker({open: function (args) {/*code block*/}});
 Event: open 
var datetimepicker = new ej.calendars.DateTimePicker({
    open: function (args) {/*code block*/}
});
datetimepicker.appendTo('#element');
Show Method: show() 
$("#datetimepicker").ejDateTimePicker();
var dateObj = $("#datetimepicker").data("ejDateTimePicker");
dateObj.show();
 Method: show() 
var datetimepicker = new ej.calendars.DateTimePicker({ value: new Date("05/11/2017")});datetimepicker.appendTo('#element');
datetimepicker.show();

View Navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to specific month Not Applicable Method: navigateTo() 
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"));
}
Navigation callback Not Applicable Event: navigated 
var datetimepicker = new ej.calendars.DateTimePicker({ navigated: onNavigate});datetimepicker.appendTo('#element');
function onNavigate(args) {/*code block*/}
Enable/Disable the drill down property: timeDrillDown 
$("#datetimepicker").ejDateTimePicker({ timeDrillDown: { enabled: true, showMeridian: true,   autoClose: true,  interval: 10 }
});
 Not Applicable
Previous
Next