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');
```
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;
}
}
```
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;
}
```
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;
}
```
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();
```
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);
```
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);
```
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');
```
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;
}
```
Property:placeholder
```javascript
var timepicker = new ej.calendars.TimePicker({
placeholder: 'Select a Time'
});
timepicker.appendTo('#element');
```