Contents
Ej1 api migration in EJ2 JavaScript Datetimepicker control
7 May 20256 minutes to read
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 ```javascript $("#datetimepicker").ejDateTimePicker({value: new Date("5/5/2014 12:00 PM")}); ``` | property: value ```javascript 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 ```javascript $("#datetimepicker").ejDateTimePicker({ value: new Date("05/11/2017 12:00 PM"), dateTimeFormat: "dd/MM/yyyy hh:mm tt" }); ``` | property: format ```javascript 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 ```javascript $("#datetimepicker").ejDateTimePicker({ dayHeaderFormat: "short"}); ``` | Not Applicable |
Calendar Views
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Start view | property: startLevel ```javascript $("#datetimepicker").ejDateTimePicker({ startLevel: ej.DateTimePicker.Level.Year}); ``` | property: start ```javascript var datetimepicker = new ej.calendars.DateTimePicker({ start:'Decade'});datetimepicker.appendTo('#element'); ``` |
| Depth view | property: depthLevel ```javascript $("#datetimepicker").ejDateTimePicker({ depthLevel: ej.DateTimePicker.Level.Year}); ``` | property: depth ```javascript 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 ```javascript $("#datetimepicker").ejDateTimePicker({ minDateTime: new Date("5/1/2013 10:00 AM")}); ``` | property: min ```javascript var datetimepicker = new ej.calendars.DateTimePicker({ min: new Date("5/1/2013 10:00 AM")});datetimepicker.appendTo('#element'); ``` |
| Maximum datetime | property: maxDateTime ```javascript $("#datetimepicker").ejDateTimePicker({ maxDateTime : new Date("5/30/2015 10:00 PM")}); ``` | property: max ```javascript 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 ```javascript $("#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: ```javascript 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 ```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(); ``` |
Accessibility
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enable RTL | property: enableRTL ```javascript $("#datetimepicker").ejDateTimePicker({ enableRTL : true}); ``` | property: enableRtl ```javascript 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 ```javascript $("#datetimepicker").ejDateTimePicker({ enablePersistence : true}); ``` | property: enablePersistence ```javascript 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 ```javascript $("#datetimepicker").ejDateTimePicker({ validationRules:{ required : true }}); ``` | Can be achieved by: ```javascript 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 ```javascript $("#datetimepicker").ejDateTimePicker({ validationRules:{required:true}, validationMessage:{ required: "Required Date value" } }); ``` | Can be achieved by: ```javascript 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 ```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*/} ``` |
Globalization
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Locale | property: locale ```javascript $("#datetimepicker").ejDateTimePicker({ locale: "en-US"}); ``` | property: locale ```javascript var datetimepicker = new ej.calendars.DateTimePicker({ locale: 'en'}); datetimepicker.appendTo('#element'); ``` |
| Specify the first day of week | property: startDay ```javascript $("#datetimepicker").ejDateTimePicker({ startDay: 2}); ``` | property: firstDayOfWeek ```javascript 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 ```javascript $("#datetimepicker").ejDateTimePicker({ enableStrictMode : true}); ``` | property: strictMode ```javascript 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 ```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(); ``` |
View Navigation
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Navigate to specific month | Not Applicable | Method: navigateTo() ```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")); } ``` |
| Navigation callback | Not Applicable | Event: navigated ```javascript var datetimepicker = new ej.calendars.DateTimePicker({ navigated: onNavigate});datetimepicker.appendTo('#element'); function onNavigate(args) {/*code block*/} ``` |
| Enable/Disable the drill down | property: timeDrillDown ```javascript $("#datetimepicker").ejDateTimePicker({ timeDrillDown: { enabled: true, showMeridian: true, autoClose: true, interval: 10 } }); ``` | Not Applicable |