Search results

Migration from Essential JS 1 in ASP.NET Core DateRangePicker control

26 Oct 2021 / 9 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
Copied to clipboard
<ej-date-range-picker id="daterange"  value="5/5/2014 - 6/6/2018"></ej-date-range-picker>
Property: value
Copied to clipboard
<ejs-daterangepicker id="daterange" value="@ViewBag.value"></ejs-daterangepicker>

HomeController.cs

Copied to clipboard
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
Copied to clipboard
<ej-date-range-picker id="daterange" date-format="dd/MM/yyyy"></ej-date-range-picker>
Property: format
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" min-date="new DateTime(2018,9,3)"></ej-date-range-picker>
Property: min
Copied to clipboard
<ejs-daterangepicker id="daterange" min="new DateTime(2018,9,3)"></ejs-daterangepicker>
Maximum date Property: max-date
Copied to clipboard
<ej-date-range-picker id="daterange" max-date="new DateTime(2019,1,1)"></ej-date-range-picker>
Property: max
Copied to clipboard
<ejs-daterangepicker id="daterange" max="new DateTime(2019,1,1)"></ejs-daterangepicker>
Start date Property: start-date
Copied to clipboard
<ej-date-range-picker id="daterange" start-date="new DateTime(2019,1,1)"></ej-date-range-picker>
Property: startDate
Copied to clipboard
<ejsdaterangepicker id="daterange" startDate="new DateTime(2019,1,1)"></ejs-daterangepicker>
End date Property: end-date
Copied to clipboard
<ej-date-range-picker id="daterange" end-date="new DateTime(2019,1,1)"></ej-date-range-picker>
Property: endDate
Copied to clipboard
<ejs-daterangepicker id="daterange" endDate="new DateTime(2019,1,1)"></ejs-daterangepicker>
Preset ranges Property: ranges
Copied to clipboard
@{  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
Copied to clipboard
<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

Copied to clipboard
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()
Copied to clipboard
<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()
Copied to clipboard
<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()
Copied to clipboard
<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()
Copied to clipboard
<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()
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange"  css-class="gradient-lime"></ej-date-range-picker>
Property: cssClass
Copied to clipboard
<ejs-daterangepicker id="daterange" cssClass="gradient-lime"></ejs-daterangepicker>
Enable time picker Property: enable-time-picker
Copied to clipboard
<ej-date-range-picker id="daterange"  enable-time-picker="true"></ej-date-range-picker>
Not Applicable
Time format Property: timeFormat
Copied to clipboard
<ej-date-range-picker id="daterange"  time-format="HH:mm"></ej-date-range-picker>
Not Applicable
Min days Not Applicable Property: minDays
Copied to clipboard
<ejs-daterangepicker id="daterange" minDays="5"></ejs-daterangepicker>
Max days Not Applicable Property: maxDays
Copied to clipboard
<ejs-daterangepicker id="daterange" maxDays="10"></ejs-daterangepicker>
Button text Property: button-text
Copied to clipboard
<ej-date-range-picker id="daterange">
    <e-date-range-button-text apply="Apply" cancel="Cancel" reset="Reset" />
</ej-date-range-picker>
Method: load()
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" show-popup-button="false"></ej-date-range-picker>
Event: focus
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" show-rounded-corner="true"></ej-date-range-picker>
Property: cssClass
Copied to clipboard
<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
Copied to clipboard
<ejs-daterangepicker id="daterange" focus="onFocus"></ejs-daterangepicker>

<script>
    function onFocus(args) { }
</script>
Focus out event Not Applicable Event: blur
Copied to clipboard
<ejs-daterangepicker id="daterange" blur="onBlur"></ejs-daterangepicker>

<script>
    function onBlur(args) { }
</script>
Focus In method Not Applicable Method: focusIn()
Copied to clipboard
<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()
Copied to clipboard
   <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
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" enable-persistence="true"></ej-date-range-picker>
Property: enablePersistence
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" width="200"></ej-date-range-picker>
Property: width
Copied to clipboard
<ejs-daterangepicker id="daterange" width="200"></ejs-daterangepicker>
Read only Not Applicable Property: readonly
Copied to clipboard
<ejs-daterangepicker id="daterange" readonly="true"></ejs-daterangepicker>
Show clear button Not Applicable Property: showClearButton
Copied to clipboard
<ejs-daterangepicker id="daterange" showClearButton="true"></ejs-daterangepicker>
Height Property: height
Copied to clipboard
<ej-date-range-picker id="daterange" height="35"></ej-date-range-picker>
Property: cssClass
Copied to clipboard
<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
Copied to clipboard
<ejs-daterangepicker id="daterange" weekNumber="true"></ejs-daterangepicker>
Watermark text Property: watermark-text
Copied to clipboard
<ej-date-range-picker id="daterange" watermark-text="Select Range"></ej-date-range-picker>
Property: placeholder
Copied to clipboard
<ejs-daterangepicker id="daterange" placeholder="Select Range"></ejs-daterangepicker>
Enable and disable Property: enabled
Copied to clipboard
<ej-date-range-picker id="daterange" enabled="false"></ej-date-range-picker>
Property: enabled
Copied to clipboard
<ejs-daterangepicker id="daterange" enabled="false"></ejs-daterangepicker>
Disable date Method: disable()
Copied to clipboard
<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()
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" allow-edit="false"></ej-date-range-picker>
Property: allowEdit
Copied to clipboard
<ejs-daterangepicker id="daterange" allowEdit="false"></ejs-daterangepicker>
Float label type Not Applicable Property: floatLabelType
Copied to clipboard
<ejs-daterangepicker id="daterange" placeholder="Select Range" floatLabelType="Syncfusion.EJ2.Inputs.FloatLabelType.Auto"></ejs-daterangepicker>
z Index Not Applicable Property: zIndex
Copied to clipboard
<ej-date-range-picker id="daterange" zIndex="100"></ej-date-range-picker>
Separator Property: separator
Copied to clipboard
<ej-date-range-picker id="daterange" separator="$"></ej-date-range-picker>
Property: separator
Copied to clipboard
<ejs-daterangepicker id="daterange" separator="$"></ejs-daterangepicker>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
Copied to clipboard
<ej-date-range-picker id="daterange" locale="en-US"></ej-date-range-picker>
Property: locale
Copied to clipboard
<ejs-daterangepicker id="daterange" locale="en"></ejs-daterangepicker>
First day of week Not Applicable Property: firstDayOfWeek
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" close="onClose"></ej-date-range-picker>

<script>
    function onClose() {}
</script>
Event: close
Copied to clipboard
<ejs-daterangepicker id="daterange" close="onClose"></ejs-daterangepicker>

<script>
    function onClose() {}
</script>
Hide Method: popupHide()
Copied to clipboard
<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()
Copied to clipboard
<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
Copied to clipboard
<ej-date-range-picker id="daterange" open="onOpen"></ej-date-range-picker>

<script>
    function onOpen(args) { }
</script>
Event: open
Copied to clipboard
<ejs-daterangepicker id="daterange" open="onOpen"></ejs-daterangepicker>

<script>
    function onOpen(args) { }
</script>
Show Method: popupShow()
Copied to clipboard
<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()
Copied to clipboard
<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
Copied to clipboard
<ejs-daterangepicker id="daterange" navigated="onNavigated"></ejs-daterangepicker>

<script>
    function onNavigated() { }
</script>