Migration from Essential JS 1

25 Feb 202222 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
  • HTML
  • <ej-date-range-picker id="daterange"  value="5/5/2014 - 6/6/2018"></ej-date-range-picker>
    Property: value
  • HTML
  • <ejs-daterangepicker id="daterange" value="@ViewBag.value"></ejs-daterangepicker>
    HomeController.cs
  • C#
  • ViewBag.value = new DateTime[] { new DateTime(2018,9,9), new DateTime(2018,9,29) };

    Date format

    Behavior API in Essential JS 1 API in Essential JS 2
    Display date format Property: date-format
  • HTML
  • <ej-date-range-picker id="daterange" date-format="dd/MM/yyyy"></ej-date-range-picker>
    Property: format
  • HTML
  • <ejs-daterangepicker id="daterange" startDate="new DateTime(2017,11,7)" endDate="new DateTime(2017,11,21)" format="dd/MMM/yy hh:mm a"></ejs-daterangepicker>

    Date range

    Behavior API in Essential JS 1 API in Essential JS 2
    Minimum date Property: min-date
  • HTML
  • <ej-date-range-picker id="daterange" min-date="new DateTime(2018,9,3)"></ej-date-range-picker>
    Property: min
  • HTML
  • <ejs-daterangepicker id="daterange" min="new DateTime(2018,9,3)"></ejs-daterangepicker>
    Maximum date Property: max-date
  • HTML
  • <ej-date-range-picker id="daterange" max-date="new DateTime(2019,1,1)"></ej-date-range-picker>
    Property: max
  • HTML
  • <ejs-daterangepicker id="daterange" max="new DateTime(2019,1,1)"></ejs-daterangepicker>
    Start date Property: start-date
  • HTML
  • <ej-date-range-picker id="daterange" start-date="new DateTime(2019,1,1)"></ej-date-range-picker>
    Property: startDate
  • HTML
  • <ejsdaterangepicker id="daterange" startDate="new DateTime(2019,1,1)"></ejs-daterangepicker>
    End date Property: end-date
  • HTML
  • <ej-date-range-picker id="daterange" end-date="new DateTime(2019,1,1)"></ej-date-range-picker>
    Property: endDate
  • HTML
  • <ejs-daterangepicker id="daterange" endDate="new DateTime(2019,1,1)"></ejs-daterangepicker>
    Preset ranges Property: ranges
  • HTML
  • @{  DateTime Today = DateTime.Now; }
    
        <ej-date-range-picker id="DateRange">
            <e-ranges>
                <e-range label="Last 1 Month" range="new List<Object>() { Today.AddMonths(-1).ToString(), Today.ToString() }" />
                <e-range label="Last 2 Months" range="new List<Object>() { Today.AddMonths(-2).ToString(), Today.ToString() }" />
                <e-range label="Last Week" range="new List<Object>() { Today.AddDays(-7).ToString(), Today.ToString() }" />
            </e-ranges>
        </ej-date-range-picker>
    Property: presets
  • HTML
  • <ejs-daterangepicker id="daterange">
            <e-daterangepicker-presets>
                <e-daterangepicker-preset id="week" label="This Week" start="ViewBag.weekStart" end="ViewBag.weekEnd"></e-daterangepicker-preset>
                <e-daterangepicker-preset id="month" label="This Month" start="ViewBag.monthStart" end="ViewBag.monthEnd"></e-daterangepicker-preset>
            </e-daterangepicker-presets>
        </ejs-daterangepicker>
    HomeController.cs
  • C#
  • int days = (int)DateTime.Now.DayOfWeek;
        ViewBag.weekStart = DateTime.Now.AddDays(-days);
        ViewBag.weekEnd = ViewBag.weekStart.AddDays(6);
        ViewBag.monthStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
        ViewBag.monthEnd = ViewBag.monthStart.AddMonths(1).AddDays(-1);
    Add ranges Method: addRanges()
  • HTML
  • <ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate() {
                var dateObj = $("#daterange").data("ejDateRangePicker");
                dateObj.addRanges("new Range", [new Date("11/12/2019"), new Date("11/12/2021")]);
            }
        </script>
    Not Applicable
    Clear ranges Method: clearRanges()
  • HTML
  • <ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate() {
                var dateObj = $("#daterange").data("ejDateRangePicker");
                dateObj.clearRanges();
            }
        </script>
    Not Applicable
    Get selected range Method: getSelectedRange()
  • HTML
  • <ej-date-range-picker id="daterange" start-date="new DateTime(2018,1,1)" end-date="new DateTime(2018,1,10)" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate() {
                var dateObj = $("#daterange").data("ejDateRangePicker");
                console.log(dateObj.getSelectedRange());
            }
        </script>
    Method: getSelectedRange()
  • HTML
  • <ejs-daterangepicker id="daterange" startdate="new DateTime(2018,1,1)" enddate="new DateTime(2018,1,10)"></ejs-daterangepicker>
    
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var daterangeObj = document.getElementById("daterange").ej2_instances[0];
                console.log(daterangeObj.getSelectedRange());
            }
        </script>
    Set date range Method: setRange()
  • HTML
  • <ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate() {
                var dateObj = $("#daterange").data("ejDateRangePicker");
                dateObj.setRange([new Date("11/12/2011"), new Date("11/12/2019")]);
            }
        </script>
    Not Applicable

    Disabled dates

    Behavior API in Essential JS 1 API in Essential JS 2
    Disabled dates Not Applicable Event: renderDayCell
  • HTML
  • <ejs-daterangepicker id="daterange" renderdaycell="disableDaterange"></ejs-daterangepicker>
    
        <script>
            function disableDaterange(args) {
                if (args.date.getDay() === 0 || args.date.getDay() === 6) {
                    args.isDisabled = true;
                }
            }
        </script>

    Customization

    Behavior API in Essential JS 1 API in Essential JS 2
    cssClass Property: css-class
  • HTML
  • <ej-date-range-picker id="daterange"  css-class="gradient-lime"></ej-date-range-picker>
    Property: cssClass
  • HTML
  • <ejs-daterangepicker id="daterange" cssClass="gradient-lime"></ejs-daterangepicker>
    Enable time picker Property: enable-time-picker
  • HTML
  • <ej-date-range-picker id="daterange"  enable-time-picker="true"></ej-date-range-picker>
    Not Applicable
    Time format Property: timeFormat
  • HTML
  • <ej-date-range-picker id="daterange"  time-format="HH:mm"></ej-date-range-picker>
    Not Applicable
    Min days Not Applicable Property: minDays
  • HTML
  • <ejs-daterangepicker id="daterange" minDays="5"></ejs-daterangepicker>
    Max days Not Applicable Property: maxDays
  • HTML
  • <ejs-daterangepicker id="daterange" maxDays="10"></ejs-daterangepicker>
    Button text Property: button-text
  • HTML
  • <ej-date-range-picker id="daterange">
            <e-date-range-button-text apply="Apply" cancel="Cancel" reset="Reset" />
        </ej-date-range-picker>
    Method: load()
  • HTML
  • <ejs-daterangepicker id="daterange" locale="en"></ejs-daterangepicker>
    
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                daterangepicker = document.getElementById('daterange').ej2_instances[0];
                var L10n = ej.base.L10n;
                L10n.load({
                    'en': {
                        'daterangepicker': { applyText: 'Apply' }
                    }
                });
            });
        </script>
    Show popup button Property: show-popup-button
  • HTML
  • <ej-date-range-picker id="daterange" show-popup-button="false"></ej-date-range-picker>
    Event: focus
  • HTML
  • <ejs-daterangepicker id="daterange" focus="onFocus"></ejs-daterangepicker>
    
        <script>
            function onFocus(args) {
                var daterangepicker = document.getElementById("daterange").ej2_instances[0];
                daterangepicker.show();
            }
        </script>
    
        <style>
            .e-control-wrapper .e-input-group-icon.e-range-icon {
                display: none;
            }
        </style>
    Show rounded corner Property: show-rounded-corner
  • HTML
  • <ej-date-range-picker id="daterange" show-rounded-corner="true"></ej-date-range-picker>
    Property: cssClass
  • HTML
  • <ejs-daterangepicker id="daterange" cssclass="e-custom-style"></ejs-daterangepicker>
    
        <style>
            .e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
                border-radius: 4px;
            }
        </style>
    Focus In event Not Applicable Event: focus
  • HTML
  • <ejs-daterangepicker id="daterange" focus="onFocus"></ejs-daterangepicker>
    
        <script>
            function onFocus(args) { }
        </script>
    Focus out event Not Applicable Event: blur
  • HTML
  • <ejs-daterangepicker id="daterange" blur="onBlur"></ejs-daterangepicker>
    
        <script>
            function onBlur(args) { }
        </script>
    Focus In method Not Applicable Method: focusIn()
  • HTML
  • <ejs-daterangepicker id="daterange"></ejs-daterangepicker>
    
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var daterangeObject = document.getElementById("daterange").ej2_instances[0];
                daterangeObject.focusIn();
            });
        </script>
    Focus out method Not Applicable Method: focusOut()
  • HTML
  • <ejs-daterangepicker id="daterange"></ejs-daterangepicker>
    
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var daterangeObject = document.getElementById("daterange").ej2_instances[0];
                daterangeObject.focusOut();
            });
        </script>

    Accessibility

    Behavior API in Essential JS 1 API in Essential JS 2
    Enable RTL Not Applicable Property: enableRtl
  • HTML
  • <ejs-daterangepicker id="daterange" enableRtl="true"></ejs-daterangepicker>

    Persistence

    Behavior API in Essential JS 1 API in Essential JS 2
    Enable Persistence Property: enable-persistence
  • HTML
  • <ej-date-range-picker id="daterange" enable-persistence="true"></ej-date-range-picker>
    Property: enablePersistence
  • HTML
  • <ejs-daterangepicker id="daterange" startDate="new DateTime(2018,1,1)" endDate="new DateTime(2018,1,10)" enablePersistence="true"></ejs-daterangepicker>

    Common

    Behavior API in Essential JS 1 API in Essential JS 2
    Width Property: width
  • HTML
  • <ej-date-range-picker id="daterange" width="200"></ej-date-range-picker>
    Property: width
  • HTML
  • <ejs-daterangepicker id="daterange" width="200"></ejs-daterangepicker>
    Read only Not Applicable Property: readonly
  • HTML
  • <ejs-daterangepicker id="daterange" readonly="true"></ejs-daterangepicker>
    Show clear button Not Applicable Property: showClearButton
  • HTML
  • <ejs-daterangepicker id="daterange" showClearButton="true"></ejs-daterangepicker>
    Height Property: height
  • HTML
  • <ej-date-range-picker id="daterange" height="35"></ej-date-range-picker>
    Property: cssClass
  • HTML
  • <ejs-daterangepicker id="daterange" cssclass="e-custom-style"></ejs-daterangepicker>
    
        <style>
            .e-control-wrapper.e-custom-style.e-date-range-wrapper.e-input-group {
                height: 35px;
            }
        </style>
    Week number Not Applicable Property: weekNumber
  • HTML
  • <ejs-daterangepicker id="daterange" weekNumber="true"></ejs-daterangepicker>
    Watermark text Property: watermark-text
  • HTML
  • <ej-date-range-picker id="daterange" watermark-text="Select Range"></ej-date-range-picker>
    Property: placeholder
  • HTML
  • <ejs-daterangepicker id="daterange" placeholder="Select Range"></ejs-daterangepicker>
    Enable and disable Property: enabled
  • HTML
  • <ej-date-range-picker id="daterange" enabled="false"></ej-date-range-picker>
    Property: enabled
  • HTML
  • <ejs-daterangepicker id="daterange" enabled="false"></ejs-daterangepicker>
    Disable date Method: disable()
  • HTML
  • <ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate() {
                var daterangeObj = $("#daterange").data("ejDateRangePicker");
                daterangeObj.disable();
            }
        </script>
    Not Applicable
    Enable date Method: enable()
  • HTML
  • <ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate() {
                var daterangeObj = $("#daterange").data("ejDateRangePicker");
                daterangeObj.enable();
            }
        </script>
    Not Applicable
    Allow edit Property: allow-edit
  • HTML
  • <ej-date-range-picker id="daterange" allow-edit="false"></ej-date-range-picker>
    Property: allowEdit
  • HTML
  • <ejs-daterangepicker id="daterange" allowEdit="false"></ejs-daterangepicker>
    Float label type Not Applicable Property: floatLabelType
  • HTML
  • <ejs-daterangepicker id="daterange" placeholder="Select Range" floatLabelType="Syncfusion.EJ2.Inputs.FloatLabelType.Auto"></ejs-daterangepicker>
    z Index Not Applicable Property: zIndex
  • HTML
  • <ej-date-range-picker id="daterange" zIndex="100"></ej-date-range-picker>
    Separator Property: separator
  • HTML
  • <ej-date-range-picker id="daterange" separator="$"></ej-date-range-picker>
    Property: separator
  • HTML
  • <ejs-daterangepicker id="daterange" separator="$"></ejs-daterangepicker>

    Globalization

    Behavior API in Essential JS 1 API in Essential JS 2
    Locale Property: locale
  • HTML
  • <ej-date-range-picker id="daterange" locale="en-US"></ej-date-range-picker>
    Property: locale
  • HTML
  • <ejs-daterangepicker id="daterange" locale="en"></ejs-daterangepicker>
    First day of week Not Applicable Property: firstDayOfWeek
  • HTML
  • <ejs-dateragepicker id="daterange" firstDayOfWeek="2"></ejs-daterangepicker>

    Strict mode

    Behavior API in Essential JS 1 API in Essential JS 2
    Strict mode Not Applicable Property: strictMode
  • HTML
  • <ejs-daterangepicker id="daterange" strictMode="true"></ejs-daterangepicker>

    Open and Close

    Behavior API in Essential JS 1 API in Essential JS 2
    Close Event: close
  • HTML
  • <ej-date-range-picker id="daterange" close="onClose"></ej-date-range-picker>
    
        <script>
            function onClose() {}
        </script>
    Event: close
  • HTML
  • <ejs-daterangepicker id="daterange" close="onClose"></ejs-daterangepicker>
    
        <script>
            function onClose() {}
        </script>
    Hide Method: popupHide()
  • HTML
  • <ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate(args) {
                var daterangeObject = $("#daterange").data("ejDateRangePicker");
                daterangeObject.popupShow(); daterangeObject.popupHide();
            }
        </script>
    Method: hide()
  • HTML
  • <ejs-daterangepicker id="daterange"></ejs-daterangepicker>
    
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var daterangeObject = document.getElementById("daterange").ej2_instances[0];
                daterangeObject.show();
                daterangeObject.hide();
            });
        </script>
    Open Event: open
  • HTML
  • <ej-date-range-picker id="daterange" open="onOpen"></ej-date-range-picker>
    
        <script>
            function onOpen(args) { }
        </script>
    Event: open
  • HTML
  • <ejs-daterangepicker id="daterange" open="onOpen"></ejs-daterangepicker>
    
        <script>
            function onOpen(args) { }
        </script>
    Show Method: popupShow()
  • HTML
  • <ej-date-range-picker id="daterange" create="onCreate"></ej-date-range-picker>
    
        <script>
            function onCreate(args) {
                var daterangeObject = $("#daterange").data("ejDateRangePicker");
                daterangeObject.popupShow();
            }
        </script>
    Method: show()
  • HTML
  • <ejs-daterangepicker id="daterange"></ejs-daterangepicker>
    
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var daterangeObject = document.getElementById("daterange").ej2_instances[0];
                daterangeObject.show();
            }
        </script>

    View navigation

    Behavior API in Essential JS 1 API in Essential JS 2
    Navigation Not Applicable Event: navigated
  • HTML
  • <ejs-daterangepicker id="daterange" navigated="onNavigated"></ejs-daterangepicker>
    
        <script>
            function onNavigated() { }
        </script>