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');
```
|
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();
```
|