JavaScript
Demos
Support
Forum
Download
Search results

Migration from Essential JS 1 in JavaScript 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 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
    value: new Date("5/5/2014 12:00 PM")
});
 property: value 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    value: new Date("05/11/2017 12:00 PM")
});
datetimepickerObject.appendTo('#element');

DateTime Format

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

Calendar Views

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

Date Range

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

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Disabled dates property: disabledDateTimeRanges 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
    disableDateTimeRanges: [{ startDateTime: new Date("11/30/2018 11:59 PM"),       endDateTime:new Date("12/1/2018 11:59 PM")    }]
});
 Can be achieved by 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    renderDayCell: disableDate
});
datetimepickerObject.appendTo('#element');
function disableDate(args: RenderDayCellEventArgs): void {
    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 
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();

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL property: enableRTL 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
    enableRTL : true
});
 property: enableRtl 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    enableRtl : true
});
datetimepickerObject.appendTo('#element');

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence property: enablePersistence 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
    enablePersistence : true
});
 property: enablePersistence 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    enablePersistence : true
});
datetimepickerObject.appendTo('#element');

Validation

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);

Common

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 {/* code block*/}
FocusIn event Event: focusIn 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
   focusIn: function (args) {/* code block*/}
});
 Event: focus 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    focus: onFocus
});
datetimepickerObject.appendTo('#element');
function onFocus(args: FocusEventArgs): void {/* code block*/}
FocusOut event Event: focusOut 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
   focusOut: function (args) {/* code block*/}
});
 Event: blur 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    blur: onBlur
});
datetimepickerObject.appendTo('#element');
function onBlur(args: BlurEventArgs): void {/* code block*/}
Change event Event: change 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
   change: function (args) {/* code block*/}
});
 Event: change 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    change: onChange
});
datetimepickerObject.appendTo('#element');
function onChange(args: ChangedEventArgs): void {/* code block*/}
Create event Event: create 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
   create: function (args) {/* code block*/}
});
 Event: created 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    created: onCreate
});
datetimepickerObject.appendTo('#element');
function onCreate(args): void {/* code block*/}
Destroy event Event: destroy 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
   destroy: function (args) {/* code block*/}
});
 Event: destroyed 
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
Locale property: locale 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
   locale: "en-US"
});
 property: locale 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    locale: 'en'
});
datetimepickerObject.appendTo('#element');
First day of week property: startDay 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
   startDay: 2
});
 property: firstDayOfWeek 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    firstDayOfWeek: 2
});
datetimepickerObject.appendTo('#element');

Strict Mode

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

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close 
var datetimeObj = new ej.DateTimePicker($("#datetimepicker"), {
    close: function (args) {/* code block*/}}
});
 Event: close 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    close: function (args: PreventableEventArgs) {/* code block*/}
});
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) {/* code block*/}}
});
 Event: open 
let datetimepickerObject: DateTimePicker = new DateTimePicker({
    open: function (args: PreventableEventArgs) {/* code block*/}
});
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();

View Navigation

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