Migration from Essential JS 1

9 Nov 202310 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 ```html ``` Property: value ```html ```

Time format

Behavior API in Essential JS 1 API in Essential JS 2
Display time format Property: time-format ```html ``` Property: format ```html ```

Time range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum time Property: min-time ```html ``` Property: min ```html ```
Maximum time Property: max-time ```html ``` Property: max ```html ```
Set current time Method: setCurrentTime() ```html ``` Not Applicable

Disabled time ranges

Behavior API in Essential JS 1 API in Essential JS 2
Disable Time Ranges Property: disable-time-ranges ```html ``` Event: renderDayCell ```html ```

Customization

Behavior API in Essential JS 1 API in Essential JS 2
css Class Property: css-class ```html ``` Property: cssClass ```html ```
Item Render Not Applicable Event: itemRender ```html ```
Show popup button Property: show-popup-button ```html ``` Event: focus ```html ```
Show rounded corner Property: show-rounded-corner ```html ``` Property: cssClass ```html ```
Enable animation Property: enable-animation ```html ``` Not Applicable
Interval Property: interval ```html ``` Property: step ```html ```
Focus In event Event: focus-in ```html ``` Event: focus ```html ```
Focus out event Event: focus-out ```html ``` Event: blur ```html ```
Focus in method Not Applicable Method: focusIn() ```html ```
Focus out method Not Applicable Event: blur ```html ```
Prevent close Not Applicable Event: close ```html ```
Prevent open Not Applicable Event: open ```html ```

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable RTL Property: enable-rtl ```html ``` Property: enableRtl ```html </ejs-timepicker> ``` </td> </tr> </thead> </table> ## Persistence
Behavior API in Essential JS 1 API in Essential JS 2
Enable Persistence Property: enable-persistence ```html ``` Property: enablePersistence ```html ```
## Validation
Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validation-rules
  • HTML
    • <ej-time-picker id="time" validation-rules="new Dictionary<string, object>() { { 'required' , true} }"></ej-time-picker>
    		 Property: rules
  • HTML
    • <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 ```html ``` Property: rules ```html
    ```
    ## Common
    Behavior API in Essential JS 1 API in Essential JS 2
    Width Property: width ```html ``` Property: width ```html ```
    Read only Property: read-only ```html ``` Property: readonly ```html ```
    Show Clear Button Not Applicable Property: showClearButton ```html ```
    Height Property: height ```html ``` Property: cssClass ```html ```
    Html Attributes Property: html-attributes ```html @{ IDictionary<string, object> htmlAttr = new Dictionary<string, object>(); htmlAttr.Add("required", "required"); } ``` Not Applicable
    Watermark Text Property: watermark-text ```html ``` Property: placeholder ```html ```
    Disable and enable Property: enabled ```html ``` Property: enabled ```html ```
    Disable date Method: disable() ```html ``` Not Applicable
    Enable date Method: enable() ```html ``` Not Applicable
    Allow Editing Not Applicable Property: allowEdit ```html ```
    z Index Not Applicable Property: zIndex ```html ```
    Float Label Type Not Applicable Property: floatLabelType ```html ```
    ## Globalization
    Behavior API in Essential JS 1 API in Essential JS 2
    Locale Property: locale ```html ``` Property: locale ```html ```
    ## Strict mode
    Behavior API in Essential JS 1 API in Essential JS 2
    Strict mode Property: enable-strict-mode ```html ``` Property: strictMode ```html ```
    ## Open and Close
    Behavior API in Essential JS 1 API in Essential JS 2
    Close Event: close ```html ``` Event: close ```html ```
    Hide Method: hide() ```html ``` Method: hide() ```html ```
    Open Event: open ```html ``` Event: open ```html ```
    Show Method: show() ```html ``` Method: show() ```html ```