Ej1 api migration in EJ2 JavaScript Timepicker control

26 Apr 20235 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 ```javascript $("#timepicker").ejTimePicker({value: new Date("5/5/2014 12:00 PM")}); ``` Property: value ```javascript var timepicker = new ej.calendars.TimePicker({ value: new Date("05/11/2017 2:00 PM") }); timepicker.appendTo('#element'); ```

Time Format

Behavior API in Essential JS 1 API in Essential JS 2
Display time format Property: timeFormat ```javascript $("#timepicker").ejTimePicker({timeFormat: 'hh:mm:ss tt'}); ``` Property: format ```javascript var timepicker = new ej.calendars.TimePicker({ format:'hh:mm:ss' }); timepicker.appendTo('#element'); ```

Time Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum time Property: minTime ```javascript $("#timepicker").ejTimePicker({ minTime: '10:00 AM' }); ``` Property: min ```javascript var timepicker = new ej.calendars.TimePicker({ min: new Date('5/5/2019 3:00 AM') }); timepicker.appendTo('#element'); ```
Maximum time Property: maxTime ```javascript $("#timepicker").ejTimePicker({ maxTime: '10:00 AM' }); ``` Property: Max ```javascript var timepicker = new ej.calendars.TimePicker({ max: new Date('5/5/2019 8:00 AM') }); timepicker.appendTo('#element'); ```
Set current time Method: setCurrentTime() ```javascript $("#timepicker").ejTimePicker(); var timeObj = $("#timepicker").data("ejTimePicker"); console.log(timeObj.setCurrentTime()); ``` Can be achieved by ```javascript var timepicker = new ej.calendars.TimePicker({ value: new Date() }); timepicker.appendTo('#element'); ```

Disabled Time Ranges

Behavior API in Essential JS 1 API in Essential JS 2
Disable time ranges Property: disableTimeRanges ```javascript $("#timepicker").ejTimePicker({ disableTimeRanges :[{ startTime: '3:00 AM', endTime: '6:00 AM' }, { startTime: '1:00 PM', endTime: '3:00 PM' }, { startTime: '8:00 PM', endTime: '10:00 PM' }] }); ``` Can be achieved by ```javascript var timepicker = new ej.calendars.TimePicker({ itemRender: itemRanderHandler }); timepicker.appendTo('#element'); function itemRenderHandler(args){ if (args.value.getHours() === 4) { args.isDisabled = true; } } ```

Customization

Behavior API in Essential JS 1 API in Essential JS 2
CSS Class Property: CssClass ```javascript $("#timepicker").ejTimePicker({ cssClass :'gradient-lime' }); ``` Property: CssClass ```javascript var timepicker = new ej.calendars.TimePicker({ cssClass: 'e-custom-style' }); timepicker.appendTo('#element'); ```
Popup list customization Not Applicable Event: itemRender ```javascript var timepicker = new ej.calendars.TimePicker({ itemRender: itemRanderHandler }); timepicker.appendTo('#element'); function itemRenderHandler(args) { /* code block*/} ```
Show/Hide the popup button Property: showPopupButton ```javascript $("#timepicker").ejTimePicker({ showPopupButton : false }); ``` Can be achieved by ```javascript var timepicker = new ej.calendars.TimePicker({ focus: onFocus }); timepicker.appendTo('#element'); function onFocus(args){ timepicker.show(); } ``` ``` .e-control-wrapper .e-input-group-icon.e-time-icon { display: none; } ```
Enable/Disable the rounded corner Property: showRoundedCorner ```javascript $("#timepicker").ejTimePicker({ showRoundedCorner : true }); ``` Can be achieved by ```javascript var timepicker = new ej.calendars.TimePicker({ cssClass: 'e-custom-style' }); timepicker.appendTo('#element'); ``` ``` .e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group { border-radius: 4px; } ```
Enable/Disable the animation Property: enableAnimation ```javascript $("#timepicker").ejTimePicker({ enableAnimation : true }); ``` Not Applicable
Interval Property: interval ```javascript $("#timepicker").ejTimePicker({ interval : 120 }); ``` Property: step ```javascript var timepicker = new ej.calendars.TimePicker({ step: 120 }); timepicker.appendTo('#element'); ```
FocusIn event Event: focusIn ```javascript $("#timepicker").ejTimePicker({ focusIn: function (args) {/* code block*/} }); ``` Event: focus ```javascript var timepicker = new ej.calendars.TimePicker({ focus: onFocus }); timepicker.appendTo('#element'); function onFocus(args){ /* code block*/} ```
FocusOut event Event: focusOut ```javascript $("#timepicker").ejTimePicker({ focusIn: function (args) {/* code block*/} }); ``` Event: blur ```javascript var timepicker = new ej.calendars.TimePicker({ blur: onBlur }); timepicker.appendTo('#element'); function onBlur(args) { /* code block*/} ```
FocusIn method Not Applicable Method: focusIn() ```javascript var timepicker = new ej.calendars.TimePicker({ value : new Date() }); timepicker.appendTo('#element'); timepicker.focusIn(); ```
FocusOut method Not Applicable Event: focusOut ```javascript var timepicker = new ej.calendars.TimePicker({ value : new Date() }); timepicker.appendTo('#element'); timepicker.focusOut(); ```
Prevent popup close Not Applicable Event: close ```javascript var timepicker = new ej.calendars.TimePicker({ close: function (args: PreventableEventArgs) { args.cancel = true; } }); timepicker.appendTo('#element'); timepicker.show(); ```
Prevent popup open Not Applicable Event: open ```javascript var timepicker = new ej.calendars.TimePicker({ open: function (args) { args.cancel = true; } }); timepicker.appendTo('#element'); timepicker.show(); ```

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Property: enableRTL ```javascript $("#timepicker").ejTimePicker({ enableRTL: true }); ``` Property: enableRtl ```javascript var timepicker = new ej.calendars.TimePicker({ enableRtl: true }); timepicker.appendTo('#element'); ```

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence ```javascript $("#timepicker").ejTimePicker({ enablePersistence: true }); ``` Property: enablePersistence ```javascript var timepicker = new ej.calendars.TimePicker({ enablePersistence: true }); timepicker.appendTo('#element'); ```

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validationRules ```javascript $("#timepicker").ejTimePicker({ validationRules : {required : true}, }); ``` Can be achieved by ```javascript var timepicker = new ej.calendars.TimePicker({ placeholder: 'Enter time'}); timepicker.appendTo('#element'); var options = { rules: { 'timevalue': { required: true }} } var formObject: FormValidator = new FormValidator('#form-element', options); ```
Validation messages Property: validationMessages ```javascript $("#timepicker").ejTimePicker({ validationRules : {required : true}, validationMessages : {required: "Required time value" } }); ``` Can be achieved by ```javascript var timepicker = new ej.calendars.TimePicker({ placeholder: 'Enter date' }); timepicker.appendTo('#element'); var options = { rules: { 'timevalue': { required: [true, 'Time value required'] } }, customPlacement: function (inputElement, errorElement) { inputElement.parentElement.parentElement.appendChild(errorElement); } }; var formObject = new ej.inputs.FormValidator('#form-element', options); ```

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width ```javascript $("#timepicker").ejTimePicker({ width: 200 }); ``` Property: width ```javascript var timepicker = new ej.calendars.TimePicker({ width: '200px' }); timepicker.appendTo('#element'); ```
Readonly Property: readOnly ```javascript $("#timepicker").ejTimePicker({ readOnly: true }); ``` Property: Readonly ```javascript var timepicker = new ej.calendars.TimePicker({ readonly: true, value: new Date() }); timepicker.appendTo('#element'); ```
Show/Hide the clear button Not Applicable Property: showClearButton ```javascript var timepicker = new ej.calendars.TimePicker({ showClearButton: true, }); timepicker.appendTo('#element'); ```
Height Property: Height ```javascript $("#timepicker").ejTimePicker({ height: "50px" }); ``` Can be achieved by ```javascript var timepicker = new ej.calendars.TimePicker({ cssClass: 'e-custom-style', }); timepicker.appendTo('#element'); ``` ``` .e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group { height: 35px; } ```
Html Attributes Property: HtmlAttributes ```javascript $("#timepicker").ejTimePicker({ htmlAttributes : {required:"required"} }); ``` Not Applicable
Watermark text Property: watermarkText ```javascript $("#timepicker").ejTimePicker({ watermarkText : "Enter Time" }); ``` Property: placeholder ```javascript var timepicker = new ej.calendars.TimePicker({ placeholder: 'Select a Time' }); timepicker.appendTo('#element'); ```
Enable the TimePicker Property: enabled ```javascript $("#timepicker").ejTimePicker({ enabled : true }); ``` Property: enabled ```javascript var timepicker = new ej.calendars.TimePicker({ enabled: true }); timepicker.appendTo('#element'); ```
Disable the TimePicker Method: disable() ```javascript $("#timepicker").ejTimePicker(); var timeObj = $("#timepicker").data("ejTimePicker"); timeObj.disable(); ``` Property: enabled ```javascript var timepicker = new ej.calendars.TimePicker({ enabled: false }); timepicker.appendTo('#element'); ```
Enable/Disable the textBox editing Not Applicable Property: allowEdit ```javascript var timepicker = new ej.calendars.TimePicker({ allowEdit: false }); timepicker.appendTo('#element'); ```
zIndex Not Applicable Property: zIndex ```javascript var timepicker = new ej.calendars.TimePicker({ zIndex: 2000 }); timepicker.appendTo('#element'); ```
Specify the placeholder text behavior Not Applicable Property: floatLabelType ```javascript var timepicker = new ej.calendars.TimePicker({ floatLabelType: 'Always', placeholder: 'Select a time' }); timepicker.appendTo('#element'); ```

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale ```javascript $("#timepicker").ejTimePicker({ locale:"en-US" }); ``` Property: locale ```javascript var timepicker = new ej.calendars.TimePicker({ locale: 'en', }); timepicker.appendTo('#element'); ```

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enableStrictMode ```javascript $("#timepicker").ejTimePicker({ enableStrictMode: true }); ``` Property: strictMode ```javascript var timepicker = new ej.calendars.TimePicker({ strictMode: true, }); timepicker.appendTo('#element'); ```

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close ```javascript $("#timepicker").ejTimePicker({ close: function(args){ /* code block*/} }); ``` Event: close ```javascript var timepicker = new ej.calendars.TimePicker({ close: function (args) { /* code block*/} }); timepicker.appendTo('#element'); ```
Open Event: open ```javascript $("#timepicker").ejTimePicker({ open: function(args){ /* code block*/} }); ``` Event: open ```javascript var timepicker = new ej.calendars.TimePicker({ open: function (args) { /* code block*/} }); timepicker.appendTo('#element'); ```
Hide Method: hide() ```javascript $("#timepicker").ejTimePicker(); var timeObj = $("#timepicker").data("ejTimePicker"); timeObj.show(); timeObj.hide(); ``` Method: hide() ```javascript var timepicker = new ej.calendars.TimePicker({ }); timepicker.appendTo('#element'); timepicker.show(); timepicker.hide(); ```
Show Method: show() ```javascript $("#timepicker").ejTimePicker(); var timeObj = $("#timepicker").data("ejTimePicker"); timeObj.show(); timeObj.hide(); ``` Method: show() ```javascript var timepicker = new ej.calendars.TimePicker({ }); timepicker.appendTo('#element'); timepicker.show(); ```