How can I help you?
Ej1 api migration in JavaScript Timepicker control
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(); ``` |