Contents
- Date Selection
- Date Format
- Date Range
- Disabled Dates
- Customization
- Accessibility
- Persistence
- Common
- Globalization
- Strict Mode
- Open and Close
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 JavaScript Daterangepicker control
7 May 20254 minutes to read
This article describes the API migration process of DateRangePicker 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 $("#daterangepicker").ejDateRangePicker({value: "5/5/2014 - 6/6/2018"}); ``` | property: value ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ value : [new Date("5/5/2019"), new Date("6/6/2019")] }); daterangepicker.appendTo('#element'); ``` |
Date Format
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Display the date format | property: dateFormat ```javascript $("#daterangepicker").ejDateRangePicker({dateFormat: "dd/MM/yyyy"}); ``` | property: format ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ format: 'dd\'\/\'MMM\'\/\'yy hh:mm a', startDate: new Date("11/9/2017"), endDate: new Date("11/21/2017") }); daterangepicker.appendTo('#element'); ``` |
Date Range
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Minimum date | property: minDate ```javascript $("#daterangepicker").ejDateRangePicker({minDate: new Date("1/1/2017")}); ``` | property: min ```javascript var daterangepicker = new ej.calendars.DateRangePicker({min: new Date("1/1/2017")});daterangepicker.appendTo('#element'); ``` |
Maximum date | property: maxDate ```javascript $("#daterangepicker").ejDateRangePicker({maxDate: new Date("1/1/2017")}); ``` | property: max ```javascript var daterangepicker = new ej.calendars.DateRangePicker({max: new Date("1/1/2017")});daterangepicker.appendTo('#element'); ``` |
Start date | property: startDate ```javascript $("#daterangepicker").ejDateRangePicker({startDate : new Date("5/30/2015")}); ``` | property: startDate ```javascript var daterangepicker = new ej.calendars.DateRangePicker({startDate: new Date("11/9/2017")});daterangepicker.appendTo('#element'); ``` |
End date | property: endDate ```javascript $("#daterangepicker").ejDateRangePicker({endDate: new Date("5/1/2013")}); ``` | property: endDate ```javascript var daterangepicker = new ej.calendars.DateRangePicker({endDate: new Date("11/21/2017")});daterangepicker.appendTo('#element'); ``` |
Preset ranges | property: ranges ```javascript $("#daterangepicker").ejDateRangePicker({ ranges: [ { label: "Today", range: [new Date(), new Date()] }, { label: "Last 1 Week", range: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()] }, { label: "Last 1 Month", range: [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()] }, { label: "Last 2 Month", range: [new Date(new Date().setMonth(new Date().getMonth() - 2)), new Date()] }, ], }); ``` | property: presets ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ presets: [ { label: 'Today', start: new Date(), end: new Date() }, { label: 'This Month', start: new Date(new Date().setDate(1)), end: new Date() }, { label: 'Last Month', start: new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)), end: new Date() }, { label: 'Last Year', start: new Date(new Date().getFullYear() - 1, 0, 1), end: new Date() },] }); daterangepicker.appendTo('#element'); ``` |
Add ranges | Method: addRanges() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.addRanges("new Range", [new Date("11/12/2019"),new Date("11/12/2021")] ); ``` | Not Applicable |
Clear ranges | Method: clearRanges() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.clearRanges(); ``` | Not Applicable |
Get selected range | Method: getSelectedRange() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.getSelectedRange(); ``` | Method: getSelectedRange() ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ startDate: new Date("11/9/2017"), endDate: new Date("11/21/2017") }); daterangepicker.appendTo('#element'); daterangepicker.getSelectedRange(); ``` |
Set date range | Method: setRange() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.setRange([new Date("11/12/2011"), new Date("11/12/2019")]); ``` | Not Applicable |
Disabled Dates
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Disabled dates | Not Applicable | Can be achieved by: ```javascript var daterangepicker = new ej.calendars.DateRangePicker({renderDayCell: onRenderCell});daterangepicker.appendTo('#element'); function onRenderCell(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 $("#daterangepicker").ejDateRangePicker({cssClass: "gradient-lime"}); ``` | property: cssClass ```javascript var daterangepicker = new ej.calendars.DateRangePicker({cssClass:"customCSS"});daterangepicker.appendTo('#element'); ``` |
Enable/Disable DateRangePicker with TimePicker | property: enableTimePicker ```javascript $("#daterangepicker").ejDateRangePicker({enableTimePicker: true}); ``` | Not Applicable |
Time format | property: timeFormat ```javascript $("#daterangepicker").ejDateRangePicker({timeFormat: "HH:mm"}); ``` | Not Applicable |
Minimum days span | Not Applicable | property: minDays ```javascript var daterangepicker = new ej.calendars.DateRangePicker({minDays: 5}); daterangepicker.appendTo('#element'); ``` |
Maximum days span | Not Applicable | property: maxDays ```javascript var daterangepicker = new ej.calendars.DateRangePicker({maxDays: 10}); daterangepicker.appendTo('#element'); ``` |
Button text | property: buttonText ```javascript $("#daterangepicker").ejDateRangePicker({ buttonText : {reset: "Reset", cancel: "Cancel", apply: "Apply"}}); ``` | Can be achieved by: ```javascript L10n.load({ 'en': {'daterangepicker': { applyText: 'Apply'} }}); var daterangepicker = new ej.calendars.DateRangePicker({ locale: 'en'}); daterangepicker.appendTo('#element'); ``` |
Show/hide the popup button | property: showPopupButton ```javascript $("#daterangepicker").ejDateRangePicker({showPopupButton: false}); ``` | Can be achieved by: ```javascript var daterangepicker = new ej.calendars.DateRangePicker({focus: onFocus}); daterangepicker.appendTo('#element'); function onFocus(args) { daterangepicker.show(); } ``` ``` .e-control-wrapper .e-input-group-icon.e-range-icon {display: none;} ``` |
Enable/Disable the rounded corner | property: showRoundedCorner ```javascript $("#daterangepicker").ejDateRangePicker({showRoundedCorner: true}); ``` | Can be achieved by: ```javascript var daterangepicker = new ej.calendars.DateRangePicker({cssClass: 'e-custom-style'});daterangepicker.appendTo('#element'); ``` ``` .e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group { border-radius: 4px;} ``` |
FocusIn event | Not Applicable | Event: focus ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ focus: onFocus }); daterangepicker.appendTo('#element'); function onFocus(args) {/* code block */} ``` |
FocusOut event | Not Applicable | Event: blur ```javascript var daterangepicker = new ej.calendars.DateRangePicker({blur: onBlur}); daterangepicker.appendTo('#element'); function onBlur(args) {/* code block */} ``` |
FocusIn method | Not Applicable | Method: focusIn() ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ value: new Date()});daterangepicker.appendTo('#element'); daterangepicker.focusIn(); ``` |
FocusOut method | Not Applicable | Method: focusOut() ```javascript var daterangepicker = new ej.calendars.DateRangePicker({value: new Date()});daterangepicker.appendTo('#element'); daterangepicker.focusOut(); ``` |
Accessibility
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Enable/Disable the RTL | Not Applicable | property: enableRtl ```javascript var daterangepicker = new ej.calendars.DateRangePicker({enableRtl: true});daterangepicker.appendTo('#element'); ``` |
Persistence
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Enable/Disable the Persistence | property: enablePersistence ```javascript $("#daterangepicker").ejDateRangePicker({enablePersistence: true}); ``` | property: enablePersistence ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ enablePersistence: true, startDate: new Date("11/9/2017"), endDate: new Date("11/21/2017") }); daterangepicker.appendTo('#element'); ``` |
Common
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Width | property: width ```javascript $("#daterangepicker").ejDateRangePicker({width: 200}); ``` | property: width ```javascript var daterangepicker = new ej.calendars.DateRangePicker({width: 200}); daterangepicker.appendTo('#element'); ``` |
Readonly | Not Applicable | property: readonly ```javascript var daterangepicker = new ej.calendars.DateRangePicker({readonly:true}); daterangepicker.appendTo('#element'); ``` |
Show/Hide the clear button | Not Applicable | property: showClearButton ```javascript var daterangepicker = new ej.calendars.DateRangePicker({showClearButton: false});daterangepicker.appendTo('#element'); ``` |
Height | property: height ```javascript $("#daterangepicker").ejDateRangePicker({height: 35}); ``` | Can be achieved by: ```javascript var daterangepicker = new ej.calendars.DateRangePicker({cssClass:"e-custom-style"});daterangepicker.appendTo('#element'); ``` ``` .e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {height: 35px;} ``` |
Enable/Disable the week number | Not Applicable | property: weekNumber ```javascript var daterangepicker = new ej.calendars.DateRangePicker({weekNumber: true});daterangepicker.appendTo('#element'); ``` |
Watermark text | property: watermarkText ```javascript $("#daterangepicker").ejDateRangePicker({watermarkText: "Enter dateRange"}); ``` | property: placeholder ```javascript var daterangepicker = new ej.calendars.DateRangePicker({placeholder: 'Enter dateRange'});daterangepicker.appendTo('#element'); ``` |
Enable/Disable | property: enabled ```javascript $("#daterangepicker").ejDateRangePicker({enabled: false}); ``` | property: enabled ```javascript var daterangepicker = new ej.calendars.DateRangePicker({enabled: false}); daterangepicker.appendTo('#element'); ``` |
Disable the DateRangePicker | Method: disable() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.disable(); ``` | Not Applicable |
Enable the DateRangePicker | Method: enable() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.enable(); ``` | Not Applicable |
Enable/Disable the textbox editing | property: allowEdit ```javascript $("#daterangepicker").ejDateRangePicker({allowEdit: false}); ``` | property: allowEdit ```javascript var daterangepicker = new ej.calendars.DateRangePicker({allowEdit: false});daterangepicker.appendTo('#element'); ``` |
Specify the placeholder text behavior | Not Applicable | property: floatLabelType ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ placeholder: 'Enter date', floatLabelType: 'Auto' }); daterangepicker.appendTo('#element'); ``` |
zIndex | Not Applicable | property: zIndex ```javascript var daterangepicker = new ej.calendars.DateRangePicker({zIndex: 100}); daterangepicker.appendTo('#element'); ``` |
Specify the date range separator | property: separator ```javascript $("#daterangepicker").ejDateRangePicker({separator : "$"}); ``` | property: separator ```javascript var daterangepicker = new ej.calendars.DateRangePicker({separator : "$"});daterangepicker.appendTo('#element'); ``` |
Globalization
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Locale | property: locale ```javascript $("#daterangepicker").ejDateRangePicker({locale: "en-US"}); ``` | property: locale ```javascript var daterangepicker = new ej.calendars.DateRangePicker({locale: 'en'}); daterangepicker.appendTo('#element'); ``` |
First day of week | Not Applicable | property: firstDayOfWeek ```javascript var daterangepicker = new ej.calendars.DateRangePicker({firstDayOfWeek: 2});daterangepicker.appendTo('#element'); ``` |
Strict Mode
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Strict mode | Not Applicable | property: strictMode ```javascript var daterangepicker = new ej.calendars.DateRangePicker({strictMode: true});daterangepicker.appendTo('#element'); ``` |
Open and Close
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Close | Event: close ```javascript $("#daterangepicker").ejDateRangePicker({ close: function (args) {/* code block */}}); ``` | Event: close ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ close: function (args) {/* code block */} }); daterangepicker.appendTo('#element'); ``` |
Hide | Method: popupHide() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.popupHide(); ``` | Method: hide() ```javascript var daterangepicker = new ej.calendars.DateRangePicker({value: new Date()});daterangepicker.appendTo('#element'); daterangepicker.hide(); ``` |
Open | Event: open ```javascript $("#daterangepicker").ejDateRangePicker({open: function (args) {/* code block */}}); ``` | Event: open ```javascript var daterangepicker = new ej.calendars.DateRangePicker({ open: function (args) {/* code block */} }); daterangepicker.appendTo('#element'); ``` |
Show | Method: popupShow() ```javascript $("#daterangepicker").ejDateRangePicker(); var dateObj = $("#daterangepicker").data("ejDateRangePicker"); dateObj.popupShow(); ``` | Method: show() ```javascript var daterangepicker = new ej.calendars.DateRangePicker({value: new Date()});daterangepicker.appendTo('#element'); daterangepicker.show(); ``` |