Search results

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

09 Jun 2021 / 8 minutes to read

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
Copied to clipboard
<ej-time-picker id="time" value="DateTime.Now"></ej-time-picker>
Property: value
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" time-format="h:mm:ss tt"></ej-time-picker>
Property: format
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" min-time="2:00 AM"></ej-time-picker>
Property: min
Copied to clipboard
<ejs-timepicker id="time" min="new DateTime(2018,5,5,4,00,00)"></ejs-timepicker>
Maximum time Property: max-time
Copied to clipboard
<ej-time-picker id="time" max-time="2:00 AM"></ej-time-picker>
Property: max
Copied to clipboard
<ejs-timepicker id="time" max="new DateTime(2018,5,5,4,00,00)"></ejs-timepicker>
Set current time Method: setCurrentTime()
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time"  css-class="gradient-lime"></ej-time-picker>
Property: cssClass
Copied to clipboard
<ejs-timepicker id="time" cssClass="gradient-lime"></ejs-timepicker>
Item Render Not Applicable Event: itemRender
Copied to clipboard
<ejs-timepicker id="time" itemrender="onItemrender"></ejs-timepicker>

<script>
    function onItemrender() { }
</script>
Show popup button Property: show-popup-button
Copied to clipboard
<ej-time-picker id="time" show-popup-button="false"></ej-time-picker>
Event: focus
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" show-rounded-corner="true"></ej-time-picker>
Property: cssClass
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" enable-animation="false"></ej-time-picker>
Not Applicable
Interval Property: interval
Copied to clipboard
<ej-time-picker id="time" interval="60"></ej-time-picker>
Property: step
Copied to clipboard
<ejs-timepicker id="time" step="60"></ejs-timepicker>
Focus In event Event: focus-in
Copied to clipboard
<ej-time-picker id="time" focus-in="onFocus"></ej-time-picker>

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

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

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

<script>
    function onBlur() { }
</script>
Focus in method Not Applicable Method: focusIn()
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" enable-rtl="true"></ej-time-picker>
Property: enableRtl
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" enable-persistence="true"></ej-time-picker>
Property: enablePersistence
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" validation-rules='new Dictionary<string, object>() {{ "required",true}}'></ej-time-picker>
Property: rules
Copied to clipboard
<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
Copied to clipboard
<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
Copied to clipboard
 <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
Copied to clipboard
<ej-time-picker id="time" width="200"></ej-time-picker>
Property: width
Copied to clipboard
<ejs-timepicker id="time" width="200"></ejs-timepicker>
Read only Property: read-only
Copied to clipboard
<ej-time-picker id="time" read-only="true"></ej-time-picker>
Property: readonly
Copied to clipboard
   <ejs-timepicker id="time" readonly="true"></ejs-timepicker>
Show Clear Button Not Applicable Property: showClearButton
Copied to clipboard
<ejs-timepicker id="time" showClearButton="true"></ejs-timepicker>
Height Property: height
Copied to clipboard
<ej-time-picker id="time" height="35"></ej-time-picker>
Property: cssClass
Copied to clipboard
<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
Copied to clipboard
@{ 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
Copied to clipboard
<ej-time-picker id="time" watermark-text="Enter time"></ej-time-picker>
Property: placeholder
Copied to clipboard
<ejs-timepicker id="time" placeholder="Enter time"></ejs-timepicker>
Disable and enable Property: enabled
Copied to clipboard
<ej-time-picker id="time" enabled="false"></ej-time-picker>
Property: enabled
Copied to clipboard
<ejs-timepicker id="time" enabled="false"></ejs-timepicker>
Disable date Method: disable()
Copied to clipboard
<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()
Copied to clipboard
<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
Copied to clipboard
<ejs-timepicker id="timepicker" allowEdit="true"></ejs-timepicker>
z Index Not Applicable Property: zIndex
Copied to clipboard
<ejs-timepicker id="time" zIndex="100"></ejs-timepicker>
Float Label Type Not Applicable Property: floatLabelType
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" locale="en-US"></ej-time-picker>
Property: locale
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" enable-strict-mode="true"></ej-time-picker>
Property: strictMode
Copied to clipboard
<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
Copied to clipboard
<ej-time-picker id="time" close="onClose"></ej-time-picker>

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

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

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

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

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

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