Migration from Essential® JS 1

8 Dec 202424 minutes to read

This article describes the API migration process of DateTimePicker component from Essential® JS 1 to Essential® JS 2.

DateTime selection

Behavior API in Essential® JS 1 API in Essential® JS 2
Setting the value Property: value
  • HTML
    • <ej-date-time-picker id="datetime"  value="DateTime.Now"></ej-date-time-picker>
    		 Property: value
  • HTML
    • <ejs-datetimepicker id="datetime" value="DateTime.Now"></ejs-datetimepicker>

    DateTime format

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Display datetime format Property: date-time-format
  • HTML
    • <ej-date-time-picker id="datetime" value="DateTime.Now" date-time-format="dd/MM/yyyy hh:mm tt"></ej-date-time-picker>
    		 Property: format
  • HTML
    • <ejs-datetimepicker id="datetime" format="dd/MM/yyyy hh:mm a" value="DateTime.Now"></ejs-datetimepicker>
    Day header format Property: day-header-format
  • HTML
    • <ej-date-time-picker id="datetime" day-header-format="Short"></ej-date-time-picker>
    		 Not Applicable

    Calendar views

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Start Property: start-level
  • HTML
    • <ej-date-time-picker id="datetime" start-level="Year"></ej-date-time-picker>
    		 Property: start
  • HTML
    • <ejs-datetimepicker id="datetime" start="Decade"></ejs-datetimepicker>
    Depth Property: depth-level
  • HTML
    • <ej-date-time-picker id="datetime" depth-level="Year"></ej-date-time-picker>
    		 Property: depth
  • HTML
    • <ejs-datetimepicker id="datetime" depth="Year"></ejs-datetimepicker>

    Date range

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Minimum datetime Property: min-date-time
  • HTML
    • <ej-date-time-picker id="datetime" min-date-time="new DateTime(2018,9,3,4,00,00)"></ej-date-time-picker>
    		 Property: min
  • HTML
    • <ejs-datetimepicker id="datetime" min="new DateTime(2018,9,3,4,00,00)"></ejs-datetimepicker>
    Maximum datetime Property: max-date-time
  • HTML
    • <ej-date-time-picker id="datetime" max-date-time="new DateTime(2019,1,1,6,00,00)"></ej-date-time-picker>
    		 Property: max
  • HTML
    • <ejs-datetimepicker id="datetime" max="new DateTime(2019,1,1,6,00,00)"></ejs-datetimepicker>

    Disabled dates

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Disabled dates Not Applicable Event: renderDayCell
  • HTML
    • <ejs-datetimepicker id="datetime" renderdaycell="disableDatetime"></ejs-datetimepicker>

    <script>
    function disableDatetime(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-time-picker id="datetime"  css-class="gradient-lime"></ej-date-time-picker>
    		 Property: cssClass
  • HTML
    • <ejs-datetimepicker id="datetime" cssClass="gradient-lime"></ejs-datetimepicker>
    Show button Property: css-class
  • HTML
    • <ej-date-time-picker id="datetime" css-class="e-custom-class"></ej-date-time-picker>

    <style>
        .e-datetime-popup.e-popup.e-custom-class .e-button-container {
            display: none !important;
        }
    </style>
    		 Property: showTodayButton
  • HTML
    • <ejs-datetimepicker id="datetime" showTodayButton="false"></ejs-datetimepicker>
    Show other month dates Property: show-other-months
  • HTML
    • <ej-date-time-picker id="datetime" show-other-months="false"></ej-date-time-picker>
  • HTML
    • <ejs-datetimepicker id="datetime"></ejs-datetimepicker><br /><br />

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

        .e-DateTimePicker .e-calendar .e-content td.e-month-hide, .e-DateTimePicker .e-calendar .e-content td.e-other-month {
            pointer-events: none;
            touch-action: none;
        }
    </style>
    Show popup button Property: show-popup-button
  • HTML
    • <ej-date-time-picker id="datetime" show-popup-button="false"></ej-date-time-picker>
    		 Event: focus
  • HTML
    • <ejs-datetimepicker id="datetime" focus="onFocus"></ejs-datetimepicker>

    <script>
        function onFocus(args) {
            var datetimepicker = document.getElementById("datetime").ej2_instances[0];
            datetimepicker.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-time-picker id="datetime" show-rounded-corner="true"></ej-date-time-picker>
    		 Property: css-class
  • HTML
    • <ejs-datetimepicker id="datetime" cssclass="e-custom-style"></ejs-datetimepicker>

    <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-time-picker id="datetime" step-months="2"></ej-date-time-picker>
    		 Method: navigateTo()
  • HTML
    • <ejs-datetimepicker id="datetime" value="new DateTime(2018,09,04,5,00,00)" open="onOpen"></ejs-datetimepicker>

    <script>
        function onOpen(args) {
            var datetimepicker = document.getElementById("datetime").ej2_instances[0];
            datetimepicker.navigateTo('Year', new Date("03/18/2018"));
        }
    </script>
    Show tooltip Property: show-tooltip
  • HTML
    • <ej-date-time-picker id="datetime" show-tooltip="false"></ej-date-time-picker>
    		 Not Applicable
    Interval Property: interval
  • HTML
    • <ej-date-time-picker id="datetime" interval="60"></ej-date-time-picker>
    		 Property: step
  • HTML
    • <ejs-datetimepicker id="datetime" step="60"></ejs-datetimepicker>
    Button text Property: button-text
  • HTML
    • <ej-date-time-picker id="datetime"><br/><e-date-time-button-text done="Done" time-now="Time Now" today="Today" time-title="Time"/><br/></ej-date-time-picker>
    		 Method: load()
  • HTML
    • <ejs-datetimepicker id="datetime" locale="en"></ejs-datetimepicker>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            datetimepicker = document.getElementById('datetime').ej2_instances[0];
            var L10n = ej.base.L10n;
            L10n.load({
                'en': {
                    'datetimepicker': { today: 'Now' }
                }
            });
        });
    </script>
    Enable animation Property: enable-animation
  • HTML
    • <ej-date-time-picker id="datetime" enable-animation="false"></ej-date-time-picker>
    		 Not Applicable
    Focus in method Not Applicable Method: focusIn()
  • HTML
    • <ejs-datetimepicker id="datetime"></ejs-datetimepicker>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var datetimeObject = document.getElementById("datetime").ej2_instances[0];
            datetimeObject.focusIn();
        });
    </script>
    Focus out method Not Applicable Method: focusOut()
  • HTML
    • <ejs-datetimepicker id="datetime"></ejs-datetimepicker>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var datetimeObject = document.getElementById("datetime").ej2_instances[0];
            datetimeObject.focusOut();
        });
    </script>
    Prevent close Not Applicable Event: close
  • HTML
    • <ejs-datetimepicker id="datetime" close="onClose"></ejs-datetimepicker>

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

        document.addEventListener('DOMContentLoaded', function () {
            var datetimeObject = document.getElementById("datetime").ej2_instances[0];
            datetimeObject.show();
        });
    </script>
    Prevent open Not Applicable Event: open
  • HTML
    • <ejs-datetimepicker id="datetimepicker" open="onOpen"></ejs-datetimepicker>

    <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-time-picker id="datetime" enable-rtl="true"></ej-date-time-picker>
    		 Property: enableRtl
  • HTML
    • <ejs-datetimepicker id="datetime" enableRtl="true"></ejs-datetimepicker>

    Persistence

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Enable Persistence Property: enable-persistence
  • HTML
    • <ej-date-time-picker id="datetime" enable-persistence="true"></ej-date-time-picker>
    		 Property: enablePersistence
  • HTML
    • <ejs-datetimepicker id="datetime" enablePersistence="true"></ejs-datetimepicker>

    Validation

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Validation rules Property: validation-rules
  • HTML
    • <ej-date-time-picker id="datetime" validation-rules="new Dictionary<string, object>() { { 'required', true } }"></ej-date-time-picker>
    		 Property: rules
  • HTML
    • <form id="form-element" class="form-vertical">
        <ejs-datetimepicker id="datetime"></ejs-datetimepicker>
    </form>

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

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        var options = {
            rules: {
                'datetime': {
                    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-time-picker id="datetime" width="200"></ej-date-time-picker>
    		 Property: width
  • HTML
    • <ejs-datetimepicker id="datetime" width="200"></ejs-datetimepicker>
    Read only Property: read-only
  • HTML
    • <ej-date-time-picker id="datetime" read-only="true"></ej-date-time-picker>
    		 Property: readonly
  • HTML
    • <ejs-datetimepicker id="datetime" readonly="true"></ejs-datetimepicker>
    Show Clear Button Not Applicable Property: showClearButton
  • HTML
    • <ejs-datetimepicker id="datetime" showClearButton="true"></ejs-datetimepicker>
    Height Property: height
  • HTML
    • <ej-date-time-picker id="datetime" height="35"></ej-date-time-picker>
    		 Property: cssClass
  • HTML
    • <ejs-datetimepicker id="datetime" cssclass="e-custom-style"></ejs-datetimepicker>

    <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-time-picker id="datetime" html-attributes="htmlAttr"></ej-date-time-picker>
    		 Not Applicable
    Week Number Property: week-number
  • HTML
    • <ej-date-time-picker id="datetime" week-number="true"></ej-date-time-picker>
    		 Property: weekNumber
  • HTML
    • <ejs-datetimepicker id="datetime" weekNumber="true"></ejs-datetimepicker>
    Watermark Text Property: watermark-text
  • HTML
    • <ej-date-time-picker id="datetime" watermark-text="Enter date and time"></ej-date-time-picker>
    		 Property: placeholder
  • HTML
    • <ejs-datetimepicker id="datetime" placeholder="Enter date and time"></ejs-datetimepicker>
    Disable and enable Property: enabled
  • HTML
    • <ej-date-time-picker id="datetime" enabled="false"></ej-date-time-picker>
    		 Property: enabled
  • HTML
    • <ejs-datetimepicker id="datetime" enabled="false"></ejs-datetimepicker>
    Allow Editing Property: allow-edit
  • HTML
    • <ej-date-time-picker id="datetime" allow-edit="false"></ej-date-time-picker>
    		 Property: allowEdit
  • HTML
    • <ejs-datetimepicker id="datetime" allowEdit="false"></ejs-datetimepicker>
    z Index Property: css-class
  • HTML
    • <ej-date-time-picker id="datetime" css-class="e-custom-class"></ej-date-time-picker>

    <style>
        .e-datetime-popup.e-popup.e-custom-class {
            z-index: 100 !important;
        }
    </style>
    		 Property: zIndex
  • HTML
    • <ej-date-time-picker id="datetime" zIndex="100"></ej-date-time-picker>
    Float Label Type Not Applicable Property: floatLabelType
  • HTML
    • <ejs-datetimepicker id="datetime" placeholder="Enter date and time" floatLabelType="Syncfusion.EJ2.Inputs.FloatLabelType.Auto"></ejs-datetimepicker>
    Render day cell Not Applicable Event: renderDayCell
  • HTML
    • <ejs-datetimepicker id="datetime" renderdaycell="onRenderCell"></ejs-datetimepicker>

    <script>
        function onRenderCell() { }
    </script>
    Focus In event Event: focus-in
  • HTML
    • <ej-date-time-picker id="datetime" focus-in="onFocus"></ej-date-time-picker>
    <script>
        function onFocus() { }
    </script>
    		 Event: focus
  • HTML
    • <ejs-datetimepicker id="datetime" focus="onFocus"></ejs-datetimepicker>

    <script>
        function onFocus() { }
    </script>
    Focus out event Event: focus-out
  • HTML
    • <ej-date-time-picker id="datetime" focus-out="onFocusout"></ej-date-time-picker>

    <script>
        function onFocusout() { }
    </script>
    		 Event: blur
  • HTML
    • <ejs-datetimepicker id="datetime" blur="onBlur"></ejs-datetimepicker>

    <script>
        function onBlur() { }
    </script>
    Change event Event: change
  • HTML
    • <ej-date-time-picker id="datetime" change="onChange"></ej-date-time-picker>

    <script>
        function onChange() { }
    </script>
    		 Event: change
  • HTML
    • <ejs-datetimepicker id="datetime" blur="onChange"></ejs-datetimepicker>

    <script>
        function onChange() { }
    </script>
    Created event Event: create
  • HTML
    • <ej-date-time-picker id="datetime" create="onCreate"></ej-date-time-picker>

    <script>
        function onCreate() { }
    </script>
    		 Event: created
  • HTML
    • <ejs-datetimepicker id="datetime" created="onCreated"></ejs-datetimepicker>

    <script>
        function onCreated() { }
    </script>
    Destroy event Event: destroy
  • HTML
    • <ej-date-time-picker id="datetime" destroy="onDestroy"></ej-date-time-picker>

    <script>
        function onDestroy() { }
    </script>
    		 Event: destroyed
  • HTML
    • <ejs-datetimepicker id="datetime" destroyed="onDestroyed"></ejs-datetimepicker>

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

    Globalization

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Locale Property: locale
  • HTML
    • <ej-date-time-picker id="datetime" locale="en-US"></ej-date-time-picker>
    		 Property: locale
  • HTML
    • <ejs-datetimepicker id="datetime" locale="en"></ejs-datetimepicker>
    First day of week Property: start-day
  • HTML
    • <ej-date-time-picker id="datetime" start-day="2"></ej-date-time-picker>
    		 Property: firstDayOfWeek
  • HTML
    • <ejs-datetimepicker id="datetime" firstDayOfWeek="2"></ejs-datetimepicker>

    Strict mode

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Strict mode Property: enable-strict-mode
  • HTML
    • <ej-date-time-picker id="datetime" enable-strict-mode="true"></ej-date-time-picker>
    		 Property: strictMode
  • HTML
    • <ejs-datetimepicker id="datetime" strictMode="true" min="new DateTime(2017,5,5,12,00,00)" max="new DateTime(2017,05,25,12,00,00)" value="new DateTime(2017,05,28,12,00,00)"></ejs-datetimepicker>

    Open and Close

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Close Event: close
  • HTML
    • <ej-date-time-picker id="datetime" close="onClose"></ej-date-time-picker>

    <script>
        function onClose() { }
    </script>
    		 Event: close
  • HTML
    • <ejs-datetimepicker id="datetime" close="onClose"></ejs-datetimepicker>

    <script>
        function onClose() { }
    </script>
    Hide Method: hide()
  • HTML
    • <ej-date-time-picker id="datetime" create="onCreate"></ej-date-time-picker>

    <script>
        function onCreate(args) {
            var datetimeObject = $("#datetime").data("ejDateTimePicker");
            datetimeObject.show();
            datetimeObject.hide();
        }
    </script>
    		 Method: hide()
  • HTML
    • <ejs-datetimepicker id="datetime"></ejs-datetimepicker>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var datetimepickerObject = document.getElementById("datetime").ej2_instances[0];
            datetimepickerObject.show();
            datetimepickerObject.hide();
        });
    </script>
    Open Event: open
  • HTML
    • <ej-date-time-picker id="datetime" open="onOpen"></ej-date-time-picker>

    <script>
        function onOpen()
    </script>
    		 Event: open
  • HTML
    • <ejs-datetimepicker id="datetime" open="onOpen"></ejs-datetimepicker>

    <script>
        function onOpen()
    </script>
    Show Method: show()
  • HTML
    • <ej-date-time-picker id="datetime" create="onCreate"></ej-date-time-picker>

    <script>
        function onCreate(args) {
            var datetimeObject = $("#datetime").data("ejDateTimePicker");
            datetimeObject.show();
        }
    </script>
    		 Method: show()
  • HTML
    • <ejs-datetimepicker id="datetime"></ejs-datetimepicker>

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

    View navigation

    Behavior API in Essential® JS 1 API in Essential® JS 2
    Navigate to Not Applicable Method: navigateTo()
  • HTML
    • <ejs-datetimepicker id="datetime" open="onOpen"></ejs-datetimepicker>

    <script>
        function onOpen(args) {
            var datetimeObject = document.getElementById("datetime").ej2_instances[0];
            datetimeObject.navigateTo('Year', new Date("03/18/2018"));
        }
    </script>
    Navigation Not Applicable Event: navigated
  • HTML
    • <ejs-datetimepicker id="datetime" navigated="onNavigated"></ejs-datetimepicker>

    <script>
        function onNavigated() { }
    </script>
    Drill down Property: timeDrillDown
  • HTML
    • <ej-date-time-picker id="datetime"><br/><e-time-drill-down auto-close="true" enabled="true" interval="10" show-meridian="true"></ej-date-time-picker>
    		 Not Applicable