Ej1 api migration in EJ2 JavaScript Daterangepicker control

26 Apr 20234 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(); ```