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