Contents
- Date Selection
- Date Format
- Calendar Views
- Date Range
- Disabled Dates
- Customization
- Accessibility
- Persistence
- Validation
- Common
- Globalization
- Strict Mode
- Open and Close
- View Navigation
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 JavaScript Datepicker control
7 May 20257 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 |