Search results

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

08 Apr 2021 / 11 minutes to read

This article describes the API migration process of DatePicker 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-picker id="date"  value="DateTime.Now"></ej-date-picker>
Property: value
Copied to clipboard
<ejs-datepicker id="date" value="DateTime.Now"></ejs-datepicker>

Date format

Behavior API in Essential JS 1 API in Essential JS 2
Display date format Property: date-format
Copied to clipboard
<ej-date-picker id="date" value="DateTime.Now" date-format="dd/MM/yyyy"></ej-date-picker>
Property: format
Copied to clipboard
<ejs-datepicker id="date" format="yyyy-MM-dd" value="DateTime.Now"></ejs-datepicker>
Day header format Property: day-header-format
Copied to clipboard
<ej-date-picker id="date" day-header-format="Short"></ej-date-picker>
Not Applicable

Calendar views

Behavior API in Essential JS 1 API in Essential JS 2
Start Property: start-level
Copied to clipboard
<ej-date-picker id="date" start-level="Year"></ej-date-picker>
Property: start
Copied to clipboard
<ejs-datepicker id="date" start="Decade"></ejs-datepicker>
Depth Property: depth-level
Copied to clipboard
<ej-date-picker id="date" depth-level="Year"></ej-date-picker>
Property: depth
Copied to clipboard
<ejs-datepicker id="date" depth="Year"></ejs-datepicker>

Date range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date Property: min-date
Copied to clipboard
<ej-date-picker id="date" min-date="new DateTime(2018,9,3)"></ej-date-picker>
Property: min
Copied to clipboard
<ejs-datepicker id="date" min="new DateTime(2018,9,3)"></ejs-datepicker>
Maximum date Property: max-date
Copied to clipboard
<ej-date-picker id="date" max-date="new DateTime(2019,1,1)"></ej-date-picker>
Property: max
Copied to clipboard
<ejs-datepicker id="date" max="new DateTime(2019,1,1)"></ejs-datepicker>

Disabled dates

Behavior API in Essential JS 1 API in Essential JS 2
Block-out dates Property: blackout-dates
Copied to clipboard
@{
    List<object> blackoutDates = new List<object>();
    blackoutDates.Add(new DateTime(2018, 5, 10));
    blackoutDates.Add(new DateTime(2018, 5, 15));
}

<ej-date-picker id="date" blackout-dates="blackoutDates"></ej-date-picker>
Event: renderDayCell
Copied to clipboard
<ejs-datepicker id="date" renderdaycell="disableDate"></ejs-datepicker>

<script>
    function disableDate(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
css Class Property: css-class
Copied to clipboard
<ej-date-picker id="date"  css-class="gradient-lime"></ej-date-picker>
Property: cssClass
Copied to clipboard
<ejs-datepicker id="date" cssClass="gradient-lime"></ejs-datepicker>
Render day cell Not Applicable Event: renderDayCell
Copied to clipboard
<ejs-datepicker id="date" renderdaycell="onRenderCell"></ejs-datepicker>

<script>
    function onRenderCell() { }
</script>
Show today button Property: show-footer
Copied to clipboard
<ej-date-picker id="date" show-footer="false"></ej-date-picker>
Property: showTodayButton
Copied to clipboard
<ejs-datepicker id="date" showTodayButton="false"></ejs-datepicker>
Show other month dates Property: show-other-months
Copied to clipboard
<ej-date-picker id="date" show-other-months="false"></ej-date-picker>
Copied to clipboard
<ejs-datepicker id="date"></ejs-datepicker>

<style>
    .e-datepicker .e-calendar .e-content tr.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month > .e-day {
        visibility: none;
    }

    .e-datepicker .e-calendar .e-content td.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month {
        pointer-events: none;
        touch-action: none;
    }
</style>
Show disabled range Property: show-disabled-range
Copied to clipboard
<ej-date-picker id="date" show-disabled-range="false"></ej-date-picker>
Not Applicable
Show popup button Property: show-popup-button
Copied to clipboard
<ej-date-picker id="date" show-popup-button="false"></ej-date-picker>
Event: focus
Copied to clipboard
<ejs-datepicker id="date" focus="onFocus"></ejs-datepicker>

<script>
    function onFocus(args) {
        var datepicker = document.getElementById("date").ej2_instances[0];
        datepicker.show();
    }
</script>

<style>
    .e-control-wrapper .e-input-group-icon.e-date-icon {
        display: none;
    }
</style>
Show rounded corner Property: show-rounded-corner
Copied to clipboard
<ej-date-picker id="date" show-rounded-corner="true"></ej-date-picker>
Property: cssClass
Copied to clipboard
<ejs-datepicker id="date" cssclass="e-custom-style"></ejs-datepicker>

<style>
    .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
        border-radius: 4px;
    }
</style>
Skip a month Property: step-months
Copied to clipboard
<ej-date-picker id="date" step-months="2"></ej-date-picker>
Method: navigateTo()
Copied to clipboard
<ejs-datepicker id="date" value="new DateTime(2018,09,04)" open="onOpen"></ejs-datepicker>

<script>
    function onOpen(args) {
        var datepicker = document.getElementById("date").ej2_instances[0];
        datepicker.navigateTo('Year', new Date("03/18/2018"));
    }
</script>
Show tooltip Property: show-tooltip
Copied to clipboard
<ej-date-picker id="date" show-tooltip="false"></ej-date-picker>
Not Applicable
Button text Property: button-text
Copied to clipboard
<ej-date-picker id="date" button-text="Now"></ej-date-picker>
Method: load()
Copied to clipboard
<ejs-datepicker id="datepicker" locale="en"></ejs-datepicker>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        datepicker = document.getElementById('datepicker').ej2_instances[0];
        var L10n = ej.base.L10n;
        L10n.load({
            'en':
                {
                    'datepicker': { today: 'Now' }
                }
        });
    });
</script>
Display inline Property: display-inline
Copied to clipboard
<ej-date-picker id="date" tag-name="div" display-inline="true"></ej-date-picker>
Not Applicable
Enable animation Property: enable-animation
Copied to clipboard
<ej-date-picker id="date" enable-animation="false"></ej-date-picker>
Not Applicable
Highlight section Property: highlight-section
Copied to clipboard
<ej-date-picker id="date" highlight-section="Week"></ej-date-picker>
Event: renderDayCell
Copied to clipboard
<ejs-datepicker id="datepicker" renderdaycell="highlightDate"></ejs-datepicker>

<script>
    function highlightDate(args) {
        if (args.date.getDate() === 10) {
            args.element.classList.add('e-highlightweekend');
        }
    }
</script>

<style>
    body.highcontrast #date_label {
        color: white;
    }

    .e-highlightweekend {
        background-color: #cfe9f3;
    }
</style>
Highlight weekend Property: highlight-weekend
Copied to clipboard
<ej-date-picker id="date" highlight-weekend="true"></ej-date-picker>
Event: renderDayCell
Copied to clipboard
<ejs-datepicker id="datepicker" renderdaycell="highlightDate"></ejs-datepicker>

<script>
    function highlightDate(args) {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            args.element.classList.add('e-highlightweekend');
        }
    }
</script>

<style>
    body.highcontrast #date_label {
        color: white;
    }

    .e-highlightweekend {
        background-color: #cfe9f3;
    }
</style>
Tooltip format Property: tooltip-format
Copied to clipboard
<ej-date-picker id="date" tooltip-format="dd/MM/yyyy"></ej-date-picker>
Not Applicable
Special Dates Property: special-dates
Copied to clipboard
<ej-date-picker id="date">
    <e-special-dates>
        <e-special-date date="1/1/2019" tooltip="In Australia" icon-class="flags sprite-Australia" />
        <e-special-date date="1/2/2019" tooltip="In France" icon-class="flags sprite-France" />
    </e-special-dates>
</ej-date-picker>
Event: renderDayCell
Copied to clipboard
<ejs-datepicker id="datepicker" renderdaycell="customDates" value="new DateTime(2017,05,05)"></ejs-datepicker>

<script>
    function customDates(args) {
        if (args.date.getDate() === 10) {
            var span = document.createElement('span');
            span.setAttribute('class', 'e-icons highlight');
            args.element.firstElementChild.setAttribute('title', 'Birthday !');
            args.element.setAttribute('title', 'Birthday !');
            args.element.setAttribute('data-val', 'Birthday !');
            args.element.appendChild(span);
        }
    }
</script>
Focus In event Event: focus-in
Copied to clipboard
<ej-date-picker id="date" focus-in="onFocus"></ej-date-picker>

<script>
    function onFocus() { }
</script>
Event: focus
Copied to clipboard
<ejs-datepicker id="date" focus="onFocus"></ejs-datepicker>

<script>
    function onFocus() { }
</script>
Focus out event Event: focus-out
Copied to clipboard
<ej-date-picker id="date" focus-out="onFocusout"></ej-date-picker>

<script>
    function onFocusout() { }
</script>
Event: blur
Copied to clipboard
<ejs-datepicker id="date" blur="onBlur"></ejs-datepicker>

<script>
    function onBlur() { }
</script>
Focus in method Not Applicable Method: focusIn()
Copied to clipboard
<ejs-datepicker id="datepicker"></ejs-datepicker>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var dateObject = document.getElementById("datepicker").ej2_instances[0];
        dateObject.focusIn();
    });
</script>
Focus out method Not Applicable Method: focusOut()
Copied to clipboard
<ejs-datepicker id="datepicker"></ejs-datepicker>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var dateObject = document.getElementById("datepicker").ej2_instances[0];
        dateObject.focusOut();
    });
</script>
Prevent close Not Applicable Event: close
Copied to clipboard
<ejs-datepicker id="datepicker" close="onClose"></ejs-datepicker>

<script>
    function onClose(args) {
        args.cancel = true;
    }

    document.addEventListener('DOMContentLoaded', function () {
        var dateObject = document.getElementById("datepicker").ej2_instances[0];
        dateObject.show();
    });
</script>
Prevent open Not Applicable Event: open
Copied to clipboard
<ejs-datepicker id="datepicker" open="onOpen"></ejs-datepicker>

<script>
    function onOpen(args) {
        args.cancel = true;
    }
</script>

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable RTL Property: enable-rtl
Copied to clipboard
<ej-date-picker id="date" enable-rtl="true"></ej-date-picker>
Property: enableRtl
Copied to clipboard
<ejs-datepicker id="datepicker" enableRtl="true"></ejs-datepicker>

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable Persistence Property: enable-persistence
Copied to clipboard
<ej-date-picker id="date" enable-persistence="true"></ej-date-picker>
Property: enablePersistence
Copied to clipboard
<ejs-datepicker id="datepicker" enablePersistence="true"></ejs-datepicker>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validation-rules
Copied to clipboard
<ej-date-picker id="date" validation-rules='new Dictionary<string, object>() {{ "required",true}}'></ej-date-picker>
Property: rules
Copied to clipboard
<form id="form-element" class="form-vertical">
    <ejs-datepicker id="datepicker"></ejs-datepicker>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var options = { rules: { 'datepicker': { required: true } } };
        var formObject = new ej.inputs.FormValidator('#form-element', options);
    });
</script>
Validation message Property: validation-messages
Copied to clipboard
<ej-date-picker id="date" validation-rules='new Dictionary<string, object>() {{ "required",true}}' validation-messages='new Dictionary<string, object>() {{ "required","Required Date value"}}'></ej-date-picker>
Property: rules
Copied to clipboard
<form id="form-element" class="form-vertical">
    <ejs-datepicker id="datepicker"></ejs-datepicker>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var options = { rules: { 'datepicker': { required: true } },
            customPlacement: (inputElement, errorElement) => {
                inputElement.parentElement.parentElement.appendChild(errorElement);
    }};
    var formObject = new ej.inputs.FormValidator('#form-element', options);
    });
</script>  

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width
Copied to clipboard
<ej-date-picker id="date" width="200"></ej-date-picker>
Property: width
Copied to clipboard
<ejs-datepicker id="datepicker" width="200"></ejs-datepicker>
Read only Property: read-only
Copied to clipboard
<ej-date-picker id="date" read-only="true"></ej-date-picker>
Property: readonly
Copied to clipboard
<ejs-datepicker id="datepicker" readonly="true"></ejs-datepicker>
Show Clear Button Not Applicable Property: showClearButton
Copied to clipboard
<ejs-datepicker id="datepicker" showClearButton="true"></ejs-datepicker>
Height Property: height
Copied to clipboard
<ej-date-picker id="date" height="35"></ej-date-picker>
Property: cssClass
Copied to clipboard
<ejs-datepicker id="datepicker" cssclass="e-custom-style"></ejs-datepicker>

<style>
    .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
        height: 35px;
    }
</style>
Html Attributes Property: html-attributes
Copied to clipboard
@{

IDictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add("required", "required");

}
<ej-date-picker id="date" html-attributes="htmlAttr"></ej-date-picker>
Not Applicable
Week Number Property: week-number
Copied to clipboard
<ej-date-picker id="date" week-number="true"></ej-date-picker>
Property: weekNumber
Copied to clipboard
<ejs-datepicker id="datepicker" weekNumber="true"></ejs-datepicker>
Watermark Text Property: watermark-text
Copied to clipboard
<ej-date-picker id="date" watermark-text="Enter date"></ej-date-picker>
Property: placeholder
Copied to clipboard
<ejs-datepicker id="datepicker" placeholder="Enter date"></ejs-datepicker>
Disable and enable Property: enabled
Copied to clipboard
<ej-date-picker id="date" enabled="false"></ej-date-picker>
Property: enabled
Copied to clipboard
<ejs-datepicker id="datepicker" enabled="false"></ejs-datepicker>
Disable date Method: disable()
Copied to clipboard
<ej-date-picker id="date" create="onCreate"></ej-date-picker>

<script>
    function onCreate(args) {
        var dateObject = $("#date").data("ejDatePicker");
        dateObject.disable();
    }
</script>
Not Applicable
Enable date Method: enable()
Copied to clipboard
<ej-date-picker id="date" create="onCreate"></ej-date-picker>

<script>
    function onCreate(args) {
        var dateObject = $("#date").data("ejDatePicker");
        dateObject.enable();
    }
</script>
Not Applicable
Allow Editing Property: allow-edit
Copied to clipboard
<ej-date-picker id="date" allow-edit="true"></ej-date-picker>
Property: allowEdit
Copied to clipboard
<ejs-datepicker id="datepicker" allowEdit="true"></ejs-datepicker>
z Index Not Applicable Property: zIndex
Copied to clipboard
<ejs-datepicker id="date" zIndex="100"></ejs-datepicker>
Float Label Type Not Applicable Property: floatLabelType
Copied to clipboard
<ejs-datepicker id="datepicker" placeholder="Enter date" floatLabelType="Syncfusion.EJ2.Inputs.FloatLabelType.Auto"></ejs-datepicker>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
Copied to clipboard
<ej-date-picker id="date" locale="en-US"></ej-date-picker>
Property: locale
Copied to clipboard
<ejs-datepicker id="datepicker" locale="en"></ejs-datepicker>
First day of week Property: start-day
Copied to clipboard
<ej-date-picker id="date" start-day="2"></ej-date-picker>
Property: firstDayOfWeek
Copied to clipboard
<ejs-datepicker id="datepicker" firstDayOfWeek="2"></ejs-datepicker>

Strict mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enableStrictMode
Copied to clipboard
<ej-date-picker id="date" enable-strict-mode="true"></ej-date-picker>
Property: strictMode
Copied to clipboard
<ejs-datepicker id="datepicker" strictMode="true"></ejs-datepicker>

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close
Copied to clipboard
<ej-date-picker id="date" close="onClose"></ej-date-picker>  

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

<script>
    function onClose() { }
</script>
Hide Method: hide()
Copied to clipboard
<ej-date-picker id="date" create="onCreate"></ej-date-picker>

<script>
    function onCreate(args) {
        var dateObject = $("#date").data("ejDatePicker");
        dateObject.show();
        dateObject.hide();
    }
</script>
Method: hide()
Copied to clipboard
<ejs-datepicker id="datepicker"></ejs-datepicker>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var datepickerObject = document.getElementById("datepicker").ej2_instances[0];
        datepickerObject.show();
        datepickerObject.hide();
    });
</script>
Open Event: open
Copied to clipboard
<ej-date-picker id="date" open="onOpen"></ej-date-picker>

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

<script>
    function onOpen() { }
</script>
Show Method: show()
Copied to clipboard
<ej-date-picker id="date" create="onCreate"></ej-date-picker>

<script>
    function onCreate(args) {
        var dateObject = $("#date").data("ejDatePicker");
        dateObject.show();
    }
</script>
Method: show()
Copied to clipboard
<ejs-datepicker id="datepicker"></ejs-datepicker>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var datepickerObject = document.getElementById("datepicker").ej2_instances[0];
        datepickerObject.show();
    });
</script>

View navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to Not Applicable Method: navigateTo()
Copied to clipboard
<ejs-datepicker id="datepicker" open="onOpen"></ejs-datepicker>

<script>
    function onOpen(args) {
        var dateObject = document.getElementById("datepicker").ej2_instances[0];
        dateObject.navigateTo('Year', new Date("03/18/2018"));
    }
</script>
Navigation Event: navigate
Copied to clipboard
<ej-date-picker id="date" navigate="onNavigate"></ej-date-picker>  

<script>
    function onNavigate() { }
</script>
Event: navigated
Copied to clipboard
<ejs-datepicker id="datepicker" navigated="onNavigated"></ejs-datepicker>

<script>
    function onNavigated() { }
</script>
Drill down Property: allow-drill-down
Copied to clipboard
<ej-date-picker id="date" allow-drill-down="true"></ej-date-picker>
Not Applicable