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
$("#daterangepicker").ejDateRangePicker({minDate: new Date("1/1/2017")});
|
property: min
var daterangepicker = new ej.calendars.DateRangePicker({min: new Date("1/1/2017")});daterangepicker.appendTo('#element');
|
Maximum date
|
property: maxDate
$("#daterangepicker").ejDateRangePicker({maxDate: new Date("1/1/2017")});
|
property: max
var daterangepicker = new ej.calendars.DateRangePicker({max: new Date("1/1/2017")});daterangepicker.appendTo('#element');
|
Start date
|
property: startDate
$("#daterangepicker").ejDateRangePicker({startDate : new Date("5/30/2015")});
|
property: startDate
var daterangepicker = new ej.calendars.DateRangePicker({startDate: new Date("11/9/2017")});daterangepicker.appendTo('#element');
|
End date
|
property: endDate
$("#daterangepicker").ejDateRangePicker({endDate: new Date("5/1/2013")});
|
property: endDate
var daterangepicker = new ej.calendars.DateRangePicker({endDate: new Date("11/21/2017")});daterangepicker.appendTo('#element');
|
Preset ranges
|
property: ranges
$("#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
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()
$("#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()
$("#daterangepicker").ejDateRangePicker();
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.clearRanges();
|
Not Applicable
|
Get selected range
|
Method: getSelectedRange()
$("#daterangepicker").ejDateRangePicker();
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.getSelectedRange();
|
Method: getSelectedRange()
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()
$("#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
$("#daterangepicker").ejDateRangePicker({cssClass: "gradient-lime"});
|
property: cssClass
var daterangepicker = new ej.calendars.DateRangePicker({cssClass:"customCSS"});daterangepicker.appendTo('#element');
|
Enable/Disable DateRangePicker with TimePicker
|
property: enableTimePicker
$("#daterangepicker").ejDateRangePicker({enableTimePicker: true});
|
Not Applicable
|
Time format
|
property: timeFormat
$("#daterangepicker").ejDateRangePicker({timeFormat: "HH:mm"});
|
Not Applicable
|
Minimum days span
|
Not Applicable
|
property: minDays
var daterangepicker = new ej.calendars.DateRangePicker({minDays: 5});
daterangepicker.appendTo('#element');
|
Maximum days span
|
Not Applicable
|
property: maxDays
var daterangepicker = new ej.calendars.DateRangePicker({maxDays: 10});
daterangepicker.appendTo('#element');
|
Button text
|
property: buttonText
$("#daterangepicker").ejDateRangePicker({ buttonText : {reset: "Reset", cancel: "Cancel", apply: "Apply"}});
|
Can be achieved by:
L10n.load({ 'en': {'daterangepicker': { applyText: 'Apply'} }});
var daterangepicker = new ej.calendars.DateRangePicker({ locale: 'en'});
daterangepicker.appendTo('#element');
|
Show/hide the popup button
|
property: showPopupButton
$("#daterangepicker").ejDateRangePicker({showPopupButton: false});
|
Can be achieved by:
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
$("#daterangepicker").ejDateRangePicker({showRoundedCorner: true});
|
Can be achieved by:
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
var daterangepicker = new ej.calendars.DateRangePicker({ focus: onFocus });
daterangepicker.appendTo('#element');
function onFocus(args) {}
|
FocusOut event
|
Not Applicable
|
Event: blur
var daterangepicker = new ej.calendars.DateRangePicker({blur: onBlur});
daterangepicker.appendTo('#element');
function onBlur(args) {}
|
FocusIn method
|
Not Applicable
|
Method: focusIn()
var daterangepicker = new ej.calendars.DateRangePicker({ value: new Date()});daterangepicker.appendTo('#element');
daterangepicker.focusIn();
|
FocusOut method
|
Not Applicable
|
Method: focusOut()
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
$("#daterangepicker").ejDateRangePicker({width: 200});
|
property: width
var daterangepicker = new ej.calendars.DateRangePicker({width: 200});
daterangepicker.appendTo('#element');
|
Readonly
|
Not Applicable
|
property: readonly
var daterangepicker = new ej.calendars.DateRangePicker({readonly:true});
daterangepicker.appendTo('#element');
|
Show/Hide the clear button
|
Not Applicable
|
property: showClearButton
var daterangepicker = new ej.calendars.DateRangePicker({showClearButton: false});daterangepicker.appendTo('#element');
|
Height
|
property: height
$("#daterangepicker").ejDateRangePicker({height: 35});
|
Can be achieved by:
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
var daterangepicker = new ej.calendars.DateRangePicker({weekNumber: true});daterangepicker.appendTo('#element');
|
Watermark text
|
property: watermarkText
$("#daterangepicker").ejDateRangePicker({watermarkText: "Enter dateRange"});
|
property: placeholder
var daterangepicker = new ej.calendars.DateRangePicker({placeholder: 'Enter dateRange'});daterangepicker.appendTo('#element');
|
Enable/Disable
|
property: enabled
$("#daterangepicker").ejDateRangePicker({enabled: false});
|
property: enabled
var daterangepicker = new ej.calendars.DateRangePicker({enabled: false});
daterangepicker.appendTo('#element');
|
Disable the DateRangePicker
|
Method: disable()
$("#daterangepicker").ejDateRangePicker();
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.disable();
|
Not Applicable
|
Enable the DateRangePicker
|
Method: enable()
$("#daterangepicker").ejDateRangePicker();
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.enable();
|
Not Applicable
|
Enable/Disable the textbox editing
|
property: allowEdit
$("#daterangepicker").ejDateRangePicker({allowEdit: false});
|
property: allowEdit
var daterangepicker = new ej.calendars.DateRangePicker({allowEdit: false});daterangepicker.appendTo('#element');
|
Specify the placeholder text behavior
|
Not Applicable
|
property: floatLabelType
var daterangepicker = new ej.calendars.DateRangePicker({
placeholder: 'Enter date',
floatLabelType: 'Auto'
});
daterangepicker.appendTo('#element');
|
zIndex
|
Not Applicable
|
property: zIndex
var daterangepicker = new ej.calendars.DateRangePicker({zIndex: 100});
daterangepicker.appendTo('#element');
|
Specify the date range separator
|
property: separator
$("#daterangepicker").ejDateRangePicker({separator : "$"});
|
property: separator
var daterangepicker = new ej.calendars.DateRangePicker({separator : "$"});daterangepicker.appendTo('#element');
|
Behavior
|
API in Essential JS 1
|
API in Essential JS 2
|
Close
|
Event: close
$("#daterangepicker").ejDateRangePicker({ close: function (args) {}});
|
Event: close
var daterangepicker = new ej.calendars.DateRangePicker({
close: function (args) {}
});
daterangepicker.appendTo('#element');
|
Hide
|
Method: popupHide()
$("#daterangepicker").ejDateRangePicker();
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.popupHide();
|
Method: hide()
var daterangepicker = new ej.calendars.DateRangePicker({value: new Date()});daterangepicker.appendTo('#element');
daterangepicker.hide();
|
Open
|
Event: open
$("#daterangepicker").ejDateRangePicker({open: function (args) {}});
|
Event: open
var daterangepicker = new ej.calendars.DateRangePicker({
open: function (args) {}
});
daterangepicker.appendTo('#element');
|
Show
|
Method: popupShow()
$("#daterangepicker").ejDateRangePicker();
var dateObj = $("#daterangepicker").data("ejDateRangePicker");
dateObj.popupShow();
|
Method: show()
var daterangepicker = new ej.calendars.DateRangePicker({value: new Date()});daterangepicker.appendTo('#element');
daterangepicker.show();
|