Ej1 api migration in EJ2 TypeScript Timepicker control

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

Time Format

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

Time Range

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

Disabled Time Ranges

Behavior	API in Essential JS 1	API in Essential JS 2
Disable time ranges	Property: disableTimeRanges ```ts var timeObj = new ej.TimePicker($("#timepicker"), { 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 ```ts let timepickerObject: TimePicker = new TimePicker({ itemRender: itemRanderHandler }); timepickerObject.appendTo('#element'); function itemRenderHandler(args: ItemEventArgs): void { if (args.value.getHours() === 4) { args.isDisabled = true; } } ```

Customization

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

Accessibility

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

Persistence

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

Validation

Behavior

API in Essential JS 1

API in Essential JS 2

Validation rules

Property: validationRules ```ts var timeObj = new ej.TimePicker($("#timepicker"), { validationRules : {required : true}, }); ```

Validation message

Property: validationMessages ```ts var timeObj = new ej.TimePicker($("#timepicker"), { validationRules : {required : true}, validationMessages : {required: "Required time value" } }); ```

Can be achieved by ```ts let timepickerObject: TimePicker = new TimePicker({ placeholder: 'Enter Time', value: new Date() }); timepickerObject.appendTo('#element'); let options: FormValidatorModel = { rules: { 'timevalue': { required: [true, 'Time value required'] } }, customPlacement: function (inputElement, errorElement) { (inputElement).parentElement.parentElement.appendChild(errorElement); } } let formObject: FormValidator = new FormValidator('#form-element', options); ``` </td> </tr> </thead> </table> ## Common

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

## Globalization

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

## Strict Mode

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

## Open and Close

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