Migration from Essential^® JS 1

8 Dec 202410 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 ```

Migration from Essential® JS 1