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}, }); ``` | 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 } } } let formObject: FormValidator = new FormValidator('#form-element', options); ``` | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 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) {
(
|