Search results

Migration from Essential JS 1

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

Time selection

Behavior API in Essential JS 1 API in Essential JS 2
Setting the value Property: value
    <ej-time-picker id="time" value="DateTime.Now"></ej-time-picker>
Property: value
    <ejs-timepicker id="time" value="DateTime.Now"></ejs-timepicker>

Time format

Behavior API in Essential JS 1 API in Essential JS 2
Display time format Property: time-format
    <ej-time-picker id="time" time-format="h:mm:ss tt"></ej-time-picker>
Property: format
    <ejs-timepicker id="time" value="DateTime.Now" format="h:mm:ss a"></ejs-timepicker>

Time range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum time Property: min-time
    <ej-time-picker id="time" min-time="2:00 AM"></ej-time-picker>
Property: min
    <ejs-timepicker id="time" min="new DateTime(2018,5,5,4,00,00)"></ejs-timepicker>
Maximum time Property: max-time
    <ej-time-picker id="time" max-time="2:00 AM"></ej-time-picker>
Property: max
    <ejs-timepicker id="time" max="new DateTime(2018,5,5,4,00,00)"></ejs-timepicker>
Set current time Method: setCurrentTime()
    <ej-time-picker id="time" create="onCreate"></ej-time-picker>

    <script>
        function onCreate() {
            var timeObj = $("#time").data("ejTimePicker");
            timeObj.setCurrentTime();
    </script>
Not Applicable

Disabled time ranges

Behavior API in Essential JS 1 API in Essential JS 2
Disable Time Ranges Property: disable-time-ranges
    <ej-time-picker id="time">
        <e-disable-time-ranges>
            <e-disable-time-range start-time="3:00 AM" end-time="9:00 AM" />
        </e-disable-time-ranges>
    </ej-time-picker>
Event: renderDayCell
    <ejs-timepicker id="time" itemrender="onItemrender"></ejs-timepicker>

    <script>
        function onItemrender(args) {
            if (args.value.getHours() === 4) {
                args.isDisabled = true;
            }
        }
    </script>

Customization

Behavior API in Essential JS 1 API in Essential JS 2
css Class Property: css-class
    <ej-time-picker id="time"  css-class="gradient-lime"></ej-time-picker>
Property: cssClass
    <ejs-timepicker id="time" cssClass="gradient-lime"></ejs-timepicker>
Item Render Not Applicable Event: itemRender
    <ejs-timepicker id="time" itemrender="onItemrender"></ejs-timepicker>

    <script>
        function onItemrender() { }
    </script>
Show popup button Property: show-popup-button
    <ej-time-picker id="time" show-popup-button="false"></ej-time-picker>
Event: focus
    <ejs-timepicker id="time" focus="onFocus"></ejs-timepicker>

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

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

    <style>
        .e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
            border-radius: 4px;
        }
    </style>
Enable animation Property: enable-animation
    <ej-time-picker id="time" enable-animation="false"></ej-time-picker>
Not Applicable
Interval Property: interval
    <ej-time-picker id="time" interval="60"></ej-time-picker>
Property: step
    <ejs-timepicker id="time" step="60"></ejs-timepicker>
Focus In event Event: focus-in
    <ej-time-picker id="time" focus-in="onFocus"></ej-time-picker>

    <script>
        function onFocus() { }
    </script>
Event: focus
    <ejs-timepicker id="time" focus="onFocus"></ejs-timepicker>

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

    <script>
        function onFocusout() { }
    </script>
Event: blur
    <ejs-timepicker id="time" blur="onBlur"></ejs-timepicker>

    <script>
        function onBlur() { }
    </script>
Focus in method Not Applicable Method: focusIn()
    <ejs-timepicker id="time"></ejs-timepicker>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var timeObject = document.getElementById("time").ej2_instances[0];
            timeObject.focusIn();
        });
    </script>
Focus out method Not Applicable Event: blur
    <ejs-timepicker id="time"></ejs-timepicker>

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

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

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

    <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
    <ej-time-picker id="time" enable-rtl="true"></ej-time-picker>
Property: enableRtl
    <ejs-timeicker id="time" enableRtl="true"></ejs-timepicker>

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable Persistence Property: enable-persistence
    <ej-time-picker id="time" enable-persistence="true"></ej-time-picker>
Property: enablePersistence
    <ejs-timepicker id="time" enablePersistence="true"></ejs-timepicker>

Validation

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

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

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

    <style>
        .e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
            height: 35px;
        }
    </style>
Html Attributes Property: html-attributes
    @{ IDictionary<string, object> htmlAttr = new Dictionary<string, object>();
       htmlAttr.Add("required", "required");
    }

    <ej-time-picker id="time" html-attributes="htmlAttr"></ej-time-picker>
Not Applicable
Watermark Text Property: watermark-text
    <ej-time-picker id="time" watermark-text="Enter time"></ej-time-picker>
Property: placeholder
    <ejs-timepicker id="time" placeholder="Enter time"></ejs-timepicker>
Disable and enable Property: enabled
    <ej-time-picker id="time" enabled="false"></ej-time-picker>
Property: enabled
    <ejs-timepicker id="time" enabled="false"></ejs-timepicker>
Disable date Method: disable()
    <ej-time-picker id="time" create="onCreate"></ej-time-picker>

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

    <script>
        function onCreate(args) {
            var timeObject = $("#time").data("ejTimePicker");
            timeObject.enable();
        }
    </script>
Not Applicable
Allow Editing Not Applicable Property: allowEdit
    <ejs-timepicker id="timepicker" allowEdit="true"></ejs-timepicker>
z Index Not Applicable Property: zIndex
    <ejs-timepicker id="time" zIndex="100"></ejs-timepicker>
Float Label Type Not Applicable Property: floatLabelType
    <ejs-timepicker id="time" placeholder="Enter time" floatLabelType="Syncfusion.EJ2.Inputs.FloatLabelType.Auto"></ejs-timepicker>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
    <ej-time-picker id="time" locale="en-US"></ej-time-picker>
Property: locale
    <ejs-timepicker id="time" locale="en"></ejs-timepicker>

Strict mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enable-strict-mode
    <ej-time-picker id="time" enable-strict-mode="true"></ej-time-picker>
Property: strictMode
    <ejs-timepicker id="time" strictMode="true"></ejs-timepicker>

Open and Close

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

    <script>
        function onClose() { }
    </script>
Event: close
    <ejs-timepicker id="time" close="onClose"></ejs-timepicker>

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

    <script>
        function onCreate(args) {
            var timeObject = $("#time").data("ejTimePicker");
            timeObject.show();
            timeObject.hide();
        }
    </script>
Method: hide()
    <ejs-timepicker id="time"></ejs-timepicker>

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

    <script>
        function onOpen() { }
    </script>
Event: open
    <ejs-timepicker id="time" open="onOpen"></ejs-timepicker>

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

    <script>
        function onCreate(args) {
            var timeObject = $("#time").data("ejTimePicker");
            timeObject.show();
        }
    </script>
Method: show()
    <ejs-timepicker id="time"></ejs-timepicker>

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