This article describes the API migration process of DateRangePicker component from Essential JS 1 to Essential JS 2.
|
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
|
|
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();
```
|
|
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');
```
|
|
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();
```
|