Ej1 api migration in EJ2 JavaScript Datepicker control

26 Apr 20237 minutes to read

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

Date Selection

Behavior API in Essential JS 1 API in Essential JS 2
Setting the value property: value ```javascript $("#datepicker").ejDatePicker({ value: new Date("5/5/2014") }); ``` property: value ```javascript var datepicker = new ej.calendars.DatePicker({ value: new Date("05/11/2017")}); datepicker.appendTo('#datepicker'); ```

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the date format property: dateFormat ```javascript $("#datepicker").ejDatePicker({ dateFormat: "dd/MM/yyyy"}); ``` property: format ```javascript var datepicker = new ej.calendars.DatePicker({ value: new Date("05/11/2017"); format: 'yyyy-MM-dd'}); datepicker.appendTo('#element'); ```
Day header format property: dayHeaderFormat ```javascript $("#datepicker").ejDatePicker({ dayHeaderFormat: ej.DatePicker.Header.Short}); ``` Not Applicable

Calendar Views

Behavior API in Essential JS 1 API in Essential JS 2
Start property: startLevel ```javascript $("#datepicker").ejDatePicker({ startLevel: ej.DatePicker.Level.Year}); ``` property: start ```javascript var datepicker = new ej.calendars.DatePicker({ start:'Decade'}); datepicker.appendTo('#element'); ```
Depth property: depthLevel ```javascript $("#datepicker").ejDatePicker({depthLevel: ej.DatePicker.Level.Year}); ``` property: depth ```javascript var datepicker = new ej.calendars.DatePicker({ depth:'Year' }); datepicker.appendTo('#element'); ```

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date property: minDate ```javascript $("#datepicker").ejDatePicker({ minDate: new Date("5/1/2013") }); ``` property: min ```javascript var datepicker = new ej.calendars.DatePicker({ min: new Date("5/1/2013") }); datepicker.appendTo('#element'); ```
Maximum date property: maxDate ```javascript $("#datepicker").ejDatePicker({ maxDate : new Date("5/30/2015")}); ``` property: max ```javascript var datepicker = new ej.calendars.DatePicker({ max : new Date("5/30/2015") }); datepicker.appendTo('#element'); ```

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Block-out dates property: blackoutDates ```javascript $("#datepicker").ejDatePicker({ blackoutDates: [ new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] }); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ renderDayCell: disableDate }); datepicker.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 $("#datepicker").ejDatePicker({ cssClass: "gradient-lime"}); ``` property: cssClass ```javascript var datepicker = new ej.calendars.DatePicker({ cssClass: 'e-custom-style'});datepicker.appendTo('#element'); ```
Event callback for each cell creation Not Applicable Event: renderDayCell ```javascript var datepicker = new ej.calendars.DatePicker({ renderDayCell: onRenderCell }); datepicker.appendTo('#element'); function onRenderCell(args) {/*code block*/} ```
Show/Hide the today button property: showFooter ```javascript $("#datepicker").ejDatePicker({ showFooter: false}); ``` property: showTodayButton ```javascript var datepicker = new ej.calendars.DatePicker({ showTodayButton: false}); datepicker.appendTo('#element'); ```
Show?Hide the other month dates property: showOtherMonths ```javascript $("#datepicker").ejDatePicker({ showOtherMonths: false}); ``` ```javascript var datepicker = new ej.calendars.DatePicker(); datepicker.appendTo('#element'); ``` ``` .e-datepicker .e-calendar .e-content tr.e-month-hide,.e-datepicker .e-calendar .e-content td.e-other-month > .e-day { visibility: none; } .e-datepicker .e-calendar .e-content td.e-month-hide,.e-datepicker .e-calendar .e-content td.e-other-month { pointer-events: none; touch-action: none; } ```
Show/Hide the disabled range property: showDisabledRange ```javascript $("#datepicker").ejDatePicker({ blackoutDates: [ new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)] showDisabledRange: false }); ``` Not Applicable
Show/Hide the popup button property: showPopupButton ```javascript $("#datepicker").ejDatePicker({ showPopupButton: false}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ focus: onFocus }); datepicker.appendTo('#element'); function onFocus(args) { datepicker.show(); } ``` ``` .e-control-wrapper .e-input-group-icon.e-date-icon { display: none; } ```
Enable/Disable rounded corner property: showRoundedCorner ```javascript $("#datepicker").ejDatePicker({ showRoundedCorner: true}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ cssClass: 'e-custom-style' }); datepicker.appendTo('#element'); ``` ``` .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { border-radius: 4px; } ```
Skip a month property: stepMonths ```javascript $("#datepicker").ejDatePicker({ stepMonths: 2}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ value: new Date("09/04/2018"), open:onOpen }); datepicker.appendTo('#element'); function onOpen(args) { datepicker.navigateTo('Year', new Date("03/18/2018")); } ```
Show/Hide the tooltip property: showTooltip ```javascript $("#datepicker").ejDatePicker({ showTooltip: false}); ``` Not Applicable
Today button text property: buttonText ```javascript $("#datepicker").ejDatePicker({ buttonText : "Now"}); ``` Can be achieved by ```javascript L10n.load({ 'en': { 'datepicker': {today:'Now' } }}); var datepicker = new ej.calendars.DatePicker({ locale: 'en' }); datepicker.appendTo('#element'); ```
Display inline property: displayInline ```javascript $("#datepicker").ejDatePicker({ displayInline: true}); ``` Not Applicable
Enable/Disable the animation property: enableAnimation ```javascript $("#datepicker").ejDatePicker({ enableAnimation : false}); ``` Not Applicable
Highlight dates property: highlightSection ```javascript $("#datepicker").ejDatePicker({ highlightSection: "week"}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ renderDayCell: highlightDate }); datepicker.appendTo('#element'); function highlightDate(args) { if (args.date.getDate() === 10) { args.element.classList.add('e-highlightweekend'); } } ``` ``` .e-highlightweekend { background-color: #cfe9f3; } ```
Highlight weekend property: highlightWeekend ```javascript $("#datepicker").ejDatePicker({ highlightWeekend : true}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ renderDayCell: highlightDate }); datepicker.appendTo('#element'); function highlightDate(args) { if (args.date.getDay() === 0 || args.date.getDay() === 6) { args.element.classList.add('e-highlightweekend'); } } ``` ``` .e-highlightweekend { background-color: #cfe9f3; } ```
Tooltip format property: tooltipFormat ```javascript $("#datepicker").ejDatePicker({ tooltipFormat : "dd/MM/yyyy"}); ``` Not Applicable
Special Dates property: specialDates ```javascript specialDays = [ { date: new Date(2018, 09, 08), tooltip: "In Australia", iconClass: "flags sprite-Australia" }, { date: new Date(2018, 09, 21), tooltip: "In France", iconClass: "flags sprite-France" }] $("#datepicker").ejDatePicker({ specialDates: specialDays}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ renderDayCell: customDates, value: new Date('5/5/2017') }); datepicker.appendTo('#element'); function customDates(args) { if (args.date.getDate() === 10) { var span = document.createElement('span'); span.setAttribute('class', 'e-icons highlight'); args.element.firstElementChild.setAttribute('title', 'Birthday !'); args.element.setAttribute('title', 'Birthday !'); args.element.setAttribute('data-val', 'Birthday !'); args.element.appendChild(span); } } ```
FocusIn event Event: focusIn ```javascript $("#datepicker").ejDatePicker({ focusIn: function (args) {/*code block*/} }); ``` Event: focus ```javascript var datepicker = new ej.calendars.DatePicker({ focus: onFocus }); datepicker.appendTo('#element'); function onFocus(args){ /*code block*/} ```
FocusOut event Event: focusOut ```javascript $("#datepicker").ejDatePicker({ focusOut: function (args) { /*code block*/}}); ``` Event: blur ```javascript var datepicker = new ej.calendars.DatePicker({ blur: onBlur }); datepicker.appendTo('#element'); function onBlur(args){ /*code block*/} ```
FocusIn method Not Applicable Method: focusIn() ```javascript var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date' }); datepicker.appendTo('#element'); datepicker.focusIn(); ```
FocusOut method Not Applicable Method: focusOut() ```javascript var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date' }); datepicker.appendTo('#element'); datepicker.focusOut(); ```
Prevent popup close Not Applicable Event: close ```javascript var datepicker = new ej.calendars.DatePicker({ close: function (args) { args.preventDefault(); } }); datepicker.appendTo('#element'); datepicker.show(); ```
Prevent popup open Not Applicable Event: open ```javascript var datepicker = new ej.calendars.DatePicker({ open: function (args) { args.preventDefault(); } }); datepicker.appendTo('#element'); ```

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL property: enableRTL ```javascript $("#datepicker").ejDatePicker({ enableRTL : true }); ``` property: enableRtl ```javascript var datepicker = new ej.calendars.DatePicker({ enableRtl : true }); datepicker.appendTo('#element'); ```

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable Persistence property: enablePersistence ```javascript $("#datepicker").ejDatePicker({enablePersistence : true}); ``` property: enablePersistence ```javascript var datepicker = new ej.calendars.DatePicker({ enablePersistence : true }); datepicker.appendTo('#element'); ```

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules property: validationRules ```javascript $("#datepicker").ejDatePicker({ validationRules:{ required:true }}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date' }); datepicker.appendTo('#element'); var options = { rules: { 'datevalue': { required: true }} } var formObject: FormValidator = new FormValidator('#form-element', options); ```
Validation message property: validationMessage ```javascript $("#datepicker").ejDatePicker({ validationRules:{ required:true }, validationMessage:{ required: "Required Date value"} }); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date' }); var options = { rules: { 'datevalue': { required: [true, 'Date value required'] } }, customPlacement: function (inputElement, errorElement) { inputElement.parentElement.parentElement.appendChild(errorElement); } }; var formObject = new ej.inputs.FormValidator('#form-element', options); datepicker.appendTo('#element'); ```

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width property: width ```javascript $("#datepicker").ejDatePicker({ width: 200}); ``` property: width ```javascript var datepicker = new ej.calendars.DatePicker({ width: '200px'}); datepicker.appendTo('#element'); ```
Readonly property: readOnly ```javascript $("#datepicker").ejDatePicker({ readOnly : true}); ``` property: readonly ```javascript var datepicker = new ej.calendars.DatePicker({ readonly:true, value:new Date() }); datepicker.appendTo('#element'); ```
Show/Hide the Clear Button Not Applicable property: showClearButton ```javascript var datepicker = new ej.calendars.DatePicker({ showClearButton: true}); datepicker.appendTo('#element'); ```
Height property: height ```javascript $("#datepicker").ejDatePicker({ height: 35}); ``` Can be achieved by ```javascript var datepicker = new ej.calendars.DatePicker({cssClass: 'e-custom-style'}); datepicker.appendTo('#element'); ``` ``` .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group{ height: 35px;} ```
Html Attributes property: htmlAttributes ```javascript $("#datepicker").ejDatePicker({ htmlAttributes : {required:"required"}}); ``` Not Applicable
Enable/Disable the Week Number property: weekNumber ```javascript $("#datepicker").ejDatePicker({ weekNumber : true}); ``` property: weekNumber ```javascript var datepicker = new ej.calendars.DatePicker({ weekNumber:true}); datepicker.appendTo('#element'); ```
Watermark text property: watermarkText ```javascript $("#datepicker").ejDatePicker({ watermarkText: "Enter date"}); ``` property: placeholder ```javascript var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date'}); datepicker.appendTo('#element'); ```
Disable/Enable property: enabled ```javascript $("#datepicker").ejDatePicker({ enabled: false}); ``` property: enabled ```javascript var datepicker = new ej.calendars.DatePicker({enabled:false}); datepicker.appendTo('#element'); ```
Disable the DatePicker Method: disable() ```javascript $("#datepicker").ejDatePicker(); var dateObj = $("#datepicker").data("ejDatePicker"); dateObj.disable(); ``` Not Applicable
Enable the DatePicker Method: enable() ```javascript $("#datepicker").ejDatePicker(); var dateObj = $("#datepicker").data("ejDatePicker"); dateObj.enable(); ``` Not Applicable
Enable/Disable the textbox editing property: allowEdit ```javascript $("#datepicker").ejDatePicker({ allowEdit : true}); ``` property: allowEdit ```javascript var datepicker = new ej.calendars.DatePicker({ allowEdit : true}); datepicker.appendTo('#element'); ```
zIndex Not Applicable property: zIndex ```javascript var datepicker = new ej.calendars.DatePicker({ zIndex: 100}); datepicker.appendTo('#element'); ```
Specify the placeholder text behavior Not Applicable property: floatLabelType ```javascript var datepicker = new ej.calendars.DatePicker({ placeholder: 'Enter date', floatLabelType: 'Auto' }); datepicker.appendTo('#element'); ```

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale property: locale ```javascript $("#datepicker").ejDatePicker({locale: "en-US"}); ``` property: locale ```javascript var datepicker = new ej.calendars.DatePicker({ locale: 'en'}); datepicker.appendTo('#element'); ```
First day of week property: startDay ```javascript $("#datepicker").ejDatePicker({ startDay: 2}); ``` property: firstDayOfWeek ```javascript var datepicker = new ej.calendars.DatePicker({ firstDayOfWeek: 2}); datepicker.appendTo('#element'); ```

Strict Mode

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

Open and Close

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

View Navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to specific month Not Applicable Method: navigateTo() ```javascript var datepicker = new ej.calendars.DatePicker({ value: new Date("09/04/2018"), open:onOpen }); datepicker.appendTo('#element'); function onOpen(args) { datepicker.navigateTo('Year', new Date("03/18/2018")); } ```
Navigation callback Event: navigate ```javascript $("#datepicker").ejDatePicker({ navigate: function (args) { /*code block*/}}); ``` Event: navigated ```javascript var datepicker = new ej.calendars.DatePicker({navigated: onNavigate}); datepicker.appendTo('#element'); function onNavigate(args) { /*code block*/} ```
Enable/Disable the drill down property: allowDrillDown ```javascript $("#datepicker").ejDatePicker({ allowDrillDown : true}); ``` Not Applicable