Search results

Migration from Essential JS 1

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
$("#daterangepicker").ejDateRangePicker({value: "5/5/2014 - 6/6/2018"});
property: value
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
$("#daterangepicker").ejDateRangePicker({dateFormat: "dd/MM/yyyy"});
property: format
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
$("#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

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Disabled dates Not Applicable Can be achieved by:
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
$("#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) {/* code block */}
FocusOut event Not Applicable Event: blur
var daterangepicker = new ej.calendars.DateRangePicker({blur: onBlur});
daterangepicker.appendTo('#element');
function onBlur(args) {/* code block */}
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();

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Not Applicable property: enableRtl
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
$("#daterangepicker").ejDateRangePicker({enablePersistence: true});
property: enablePersistence
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
$("#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');

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale property: locale
$("#daterangepicker").ejDateRangePicker({locale: "en-US"});
property: locale
var daterangepicker = new ej.calendars.DateRangePicker({locale: 'en'});
daterangepicker.appendTo('#element');
First day of week Not Applicable property: firstDayOfWeek
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
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
$("#daterangepicker").ejDateRangePicker({ close: function (args) {/* code block */}});
Event: close
var daterangepicker = new ej.calendars.DateRangePicker({
    close: function (args) {/* code block */}
});
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) {/* code block */}});
Event: open
var daterangepicker = new ej.calendars.DateRangePicker({
    open: function (args) {/* code block */}
});
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();