Migration from Essential JS 1

4 Mar 202224 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
  • HTML
  • <ej-date-picker id="date"  value="DateTime.Now"></ej-date-picker>
    Property: value
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" value="DateTime.Now" date-format="dd/MM/yyyy"></ej-date-picker>
    Property: format
  • HTML
  • <ejs-datepicker id="date" format="yyyy-MM-dd" value="DateTime.Now"></ejs-datepicker>
    Day header format Property: day-header-format
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" start-level="Year"></ej-date-picker>
    Property: start
  • HTML
  • <ejs-datepicker id="date" start="Decade"></ejs-datepicker>
    Depth Property: depth-level
  • HTML
  • <ej-date-picker id="date" depth-level="Year"></ej-date-picker>
    Property: depth
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" min-date="new DateTime(2018,9,3)"></ej-date-picker>
    Property: min
  • HTML
  • <ejs-datepicker id="date" min="new DateTime(2018,9,3)"></ejs-datepicker>
    Maximum date Property: max-date
  • HTML
  • <ej-date-picker id="date" max-date="new DateTime(2019,1,1)"></ej-date-picker>
    Property: max
  • HTML
  • <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
  • HTML
  • @{
            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
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date"  css-class="gradient-lime"></ej-date-picker>
    Property: cssClass
  • HTML
  • <ejs-datepicker id="date" cssClass="gradient-lime"></ejs-datepicker>
    Render day cell Not Applicable Event: renderDayCell
  • HTML
  • <ejs-datepicker id="date" renderdaycell="onRenderCell"></ejs-datepicker>
    
        <script>
            function onRenderCell() { }
        </script>
    Show today button Property: show-footer
  • HTML
  • <ej-date-picker id="date" show-footer="false"></ej-date-picker>
    Property: showTodayButton
  • HTML
  • <ejs-datepicker id="date" showTodayButton="false"></ejs-datepicker>
    Show other month dates Property: show-other-months
  • HTML
  • <ej-date-picker id="date" show-other-months="false"></ej-date-picker>

  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" show-disabled-range="false"></ej-date-picker>
    Not Applicable
    Show popup button Property: show-popup-button
  • HTML
  • <ej-date-picker id="date" show-popup-button="false"></ej-date-picker>
    Event: focus
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" show-rounded-corner="true"></ej-date-picker>
    Property: cssClass
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" step-months="2"></ej-date-picker>
    Method: navigateTo()
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" show-tooltip="false"></ej-date-picker>
    Not Applicable
    Button text Property: button-text
  • HTML
  • <ej-date-picker id="date" button-text="Now"></ej-date-picker>
    Method: load()
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" tag-name="div" display-inline="true"></ej-date-picker>
    Not Applicable
    Enable animation Property: enable-animation
  • HTML
  • <ej-date-picker id="date" enable-animation="false"></ej-date-picker>
    Not Applicable
    Highlight section Property: highlight-section
  • HTML
  • <ej-date-picker id="date" highlight-section="Week"></ej-date-picker>
    Event: renderDayCell
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" highlight-weekend="true"></ej-date-picker>
    Event: renderDayCell
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" tooltip-format="dd/MM/yyyy"></ej-date-picker>
    Not Applicable
    Special Dates Property: special-dates
  • HTML
  • <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
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" focus-in="onFocus"></ej-date-picker>
    
        <script>
            function onFocus() { }
        </script>
    Event: focus
  • HTML
  • <ejs-datepicker id="date" focus="onFocus"></ejs-datepicker>
    
        <script>
            function onFocus() { }
        </script>
    Focus out event Event: focus-out
  • HTML
  • <ej-date-picker id="date" focus-out="onFocusout"></ej-date-picker>
    
        <script>
            function onFocusout() { }
        </script>
    Event: blur
  • HTML
  • <ejs-datepicker id="date" blur="onBlur"></ejs-datepicker>
    
        <script>
            function onBlur() { }
        </script>
    Focus in method Not Applicable Method: focusIn()
  • HTML
  • <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()
  • HTML
  • <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
  • HTML
  • <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
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" enable-rtl="true"></ej-date-picker>
    Property: enableRtl
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" enable-persistence="true"></ej-date-picker>
    Property: enablePersistence
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" validation-rules="new Dictionary<string, object>() required"></ej-date-picker>
    Property: rules
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" validation-rules="new Dictionary<string, object>() required" validation-messages="new Dictionary<string, object>() required"></ej-date-picker>
    Property: rules
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" width="200"></ej-date-picker>
    Property: width
  • HTML
  • <ejs-datepicker id="datepicker" width="200"></ejs-datepicker>
    Read only Property: read-only
  • HTML
  • <ej-date-picker id="date" read-only="true"></ej-date-picker>
    Property: readonly
  • HTML
  • <ejs-datepicker id="datepicker" readonly="true"></ejs-datepicker>
    Show Clear Button Not Applicable Property: showClearButton
  • HTML
  • <ejs-datepicker id="datepicker" showClearButton="true"></ejs-datepicker>
    Height Property: height
  • HTML
  • <ej-date-picker id="date" height="35"></ej-date-picker>
    Property: cssClass
  • HTML
  • <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
  • HTML
  • @{
        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
  • HTML
  • <ej-date-picker id="date" week-number="true"></ej-date-picker>
    Property: weekNumber
  • HTML
  • <ejs-datepicker id="datepicker" weekNumber="true"></ejs-datepicker>
    Watermark Text Property: watermark-text
  • HTML
  • <ej-date-picker id="date" watermark-text="Enter date"></ej-date-picker>
    Property: placeholder
  • HTML
  • <ejs-datepicker id="datepicker" placeholder="Enter date"></ejs-datepicker>
    Disable and enable Property: enabled
  • HTML
  • <ej-date-picker id="date" enabled="false"></ej-date-picker>
    Property: enabled
  • HTML
  • <ejs-datepicker id="datepicker" enabled="false"></ejs-datepicker>
    Disable date Method: disable()
  • HTML
  • <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()
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" allow-edit="true"></ej-date-picker>
    Property: allowEdit
  • HTML
  • <ejs-datepicker id="datepicker" allowEdit="true"></ejs-datepicker>
    z Index Not Applicable Property: zIndex
  • HTML
  • <ejs-datepicker id="date" zIndex="100"></ejs-datepicker>
    Float Label Type Not Applicable Property: floatLabelType
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" locale="en-US"></ej-date-picker>
    Property: locale
  • HTML
  • <ejs-datepicker id="datepicker" locale="en"></ejs-datepicker>
    First day of week Property: start-day
  • HTML
  • <ej-date-picker id="date" start-day="2"></ej-date-picker>
    Property: firstDayOfWeek
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" enable-strict-mode="true"></ej-date-picker>
    Property: strictMode
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" close="onClose"></ej-date-picker>  
    
        <script>
            function onClose() { }
        </script>
    Event: close
  • HTML
  • <ejs-datepicker id="datepicker" close="onClose"></ejs-datepicker>
    
        <script>
            function onClose() { }
        </script>
    Hide Method: hide()
  • HTML
  • <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()
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" open="onOpen"></ej-date-picker>
    
        <script>
            function onOpen() { }
        </script>
    Event: open
  • HTML
  • <ejs-datepicker id="datepicker" open="onOpen"></ejs-datepicker>
    
        <script>
            function onOpen() { }
        </script>
    Show Method: show()
  • HTML
  • <ej-date-picker id="date" create="onCreate"></ej-date-picker>
    
        <script>
            function onCreate(args) {
                var dateObject = $("#date").data("ejDatePicker");
                dateObject.show();
            }
        </script>
    Method: show()
  • HTML
  • <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()
  • HTML
  • <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
  • HTML
  • <ej-date-picker id="date" navigate="onNavigate"></ej-date-picker>  
    
        <script>
            function onNavigate() { }
        </script>
    Event: navigated
  • HTML
  • <ejs-datepicker id="datepicker" navigated="onNavigated"></ejs-datepicker>
    
        <script>
            function onNavigated() { }
        </script>
    Drill down Property: allow-drill-down
  • HTML
  • <ej-date-picker id="date" allow-drill-down="true"></ej-date-picker>
    Not Applicable