Ej1 api migration in React Timepicker component
17 Mar 20254 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
```
```
|
Property: Value
```
```
|
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Display time format
|
Property: timeFormat
```
```
|
Property: format
```
```
|
Time Range
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Minimum time
|
Property: minTime
```
```
|
Property: min
```
```
|
|
Maximum time
|
Property: maxTime
```
```
|
Property: Max
```
```
|
|
Set current time
|
Method: setCurrentTime()
```
<EJ.TimePicker id="timepicker" create={this.onCreate} ></EJ.TimePicker>
function onCreate() {
var timeObj = $("#timepicker").data("ejTimePicker");
timeObj.setCurrentTime();
}
```
|
Can be achieved by
```
private timeValue: Date = new Date();
<TimePickerComponent id="timepicker" value={this.timeValue}></TimePickerComponent>
```
|
Disabled Time Ranges
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Disable time ranges
|
Property: disableTimeRanges
```
var disableTime = [{ startTime: '3:00 AM', endTime: '6:00 AM' }, { startTime: '1:00 PM', endTime: '3:00 PM' }, { startTime: '8:00 PM', endTime: '10:00 PM' }];
<EJ.TimePicker id="timepicker" disableTimeRanges={disableTime} ></EJ.TimePicker>
```
|
Can be achieved by
```
<TimePickerComponent id="timepicker" itemRender={this.itemRanderHandler.bind(this)}></TimePickerComponent>
itemRanderHandler(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
```
```
|
Property: cssClass
```
```
|
|
Popup list customization
|
Not Applicable
|
Event: itemRender
```
<TimePickerComponent id="timepicker" itemRender={this.itemRendeHandler.bind(this)}></TimePickerComponent>
itemRanderHandler() {/** code block */ }
```
|
|
Show/Hide the popup button
|
Property: showPopupButton
```
<EJ.TimePicker id="timepicker" showPopupButton={false} ></EJ.TimePicker>
```
|
Can be achieved by
```
<TimePickerComponent id="timepicker" focus={this.onFocus.bind(this)}></TimePickerComponent>
onFocus(args) {
this.show();
}
.e-control-wrapper .e-input-group-icon.e-time-icon {
display: none;
}
```
|
|
Enable/Disable the rounded corner
|
Property: showRoundedCorner
```
<EJ.TimePicker id="timepicker" showRoundedCorner={true} ></EJ.TimePicker>
```
|
Can be achieved by
```
.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
border-radius: 4px;
}
```
|
|
Enable/Disable the animation
|
Property: enableAnimation
```
<EJ.TimePicker id="timepicker" enableAnimation={false} ></EJ.TimePicker>
```
|
Not Applicable
|
|
Interval
|
Property: interval
```
<EJ.TimePicker id="timepicker" interval={120} ></EJ.TimePicker>
```
|
Property: step
```
<TimePickerComponent id="timepicker" step={120}></TimePickerComponent>
```
|
|
FocusIn event
|
Event: focusIn
```
<EJ.TimePicker id="timepicker" focusIn={onFocus} ></EJ.TimePicker>
function onFocus() { /** code block */}
```
|
Event: focus
```
<TimePickerComponent id="timepicker" focus={this.onFocus.bind(this)}></TimePickerComponent>
onFocus() {/** code block */ }
```
|
|
FocusOut event
|
Event: focusOut
```
<EJ.TimePicker id="timepicker" focusOut={onFocusout} ></EJ.TimePicker>
function onFocusout() { }
```
|
Event: blur
```
<TimePickerComponent id="timepicker" blur={this.onBlur.bind(this)}></TimePickerComponent>
onBlur(args) { /** code block */}
```
|
|
FocusIn method
|
Not Applicable
|
Method: focusIn()
```
<TimePickerComponent id="timepicker" created={this.create.bind(this)}></TimePickerComponent>
create(args) {
this.focusIn();
}
```
|
|
FocusOut method
|
Not Applicable
|
Method: focusOut
```
<TimePickerComponent id="timepicker" created={this.create.bind(this)}></TimePickerComponent>
create(args) {
this.focusOut();
}
```
|
|
Prevent popup close
|
Not Applicable
|
Event: close
```
<TimePickerComponent id="timepicker" close={this.onClose.bind(this)}></TimePickerComponent>
onClose(args) {
args.cancel = true;
}
```
|
|
Prevent popup open
|
Not Applicable
|
Event: open
```
<TimePickerComponent id="timepicker" open={this.onOpen.bind(this)}></TimePickerComponent>
onOpen(args) {
args.cancel = true;
}
```
|
Accessibility
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Enable/Disable the RTL
|
Property: enableRTL
```
<EJ.TimePicker id="timepicker" enableRTL={true} ></EJ.TimePicker>
```
|
Property: enableRtl
```
<TimePickerComponent id="timepicker" enableRtl={true}></TimePickerComponent>
```
|
Persistence
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Enable/Disable the persistence
|
Property: enablePersistence
```
<EJ.TimePicker id="timepicker" enablePersistence={true} ></EJ.TimePicker>
```
|
Property: enablePersistence
```
<TimePickerComponent id="timepicker" enablePersistence={true}></TimePickerComponent>
```
|
Validation
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Validation rules
|
Property: validationRules
```
var validationRules = {required: {true}};
$.validator.setDefaults({
errorClass: 'e-validation-error',
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
<EJ.TimePicker id="timepicker" validationRules= {validationRules} ></EJ.TimePicker>
```
|
Can be achieved by
```
var options = { rules: { 'timepicker': { required: true } } };
var formObject = new ej.inputs.FormValidator('#form-element', options);
```
|
|
Validation message
|
Property: validationMessages
```
var validationRules = {required: {true}};
var validationMessage = {required: "Required value"};
$.validator.setDefaults({
errorClass: 'e-validation-error',
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
<EJ.TimePicker id="timepicker" validationRules= {validationRules} validationMessages= {validationMessage} ></EJ.TimePicker>
```
| A
Can be achieved by
```
var options = { rules: {'timepicker': { required: true } },
customPlacement: (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
```
```
|
Property: width
```
```
|
|
Readonly
|
Property: readOnly
```
<EJ.TimePicker id="timepicker" readOnly={true} ></EJ.TimePicker>
```
|
Property: Readonly
```
<TimePickerComponent id="timepicker" readonly={true}></TimePickerComponent>
```
|
|
Show/Hide the clear button
|
Not Applicable
|
Property: showClearButton
```
<TimePickerComponent id="timepicker" showClearButton={true}></TimePickerComponent>
```
|
|
Height
|
Property: Height
```
```
|
Can be achieved by
```
.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
height: 35px;
}
```
|
|
Html Attributes
|
Property: HtmlAttributes
```
var htmlAttributes = {required:"required"}
<EJ.TimePicker id="timepicker" htmlAttributes = {htmlAttributes} ></EJ.TimePicker>
```
|
Not Applicable
|
|
Watermark text
|
Property: watermarkText
```
```
|
Property: placeholder
```
```
|
|
Disable/Enable
|
Property: enabled
```
<EJ.TimePicker id="timepicker" enabled={false} ></EJ.TimePicker>
```
|
Property: enabled
```
<TimePickerComponent id="timepicker" enabled={true}></TimePickerComponent>
```
|
|
Disable the TimePicker
|
Method: disable()
```
<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>
function onCreate(args) {
var timeObject = $("#time").data("ejTimePicker");
timeObject.disable();
}
```
|
Property: enabled
```
<TimePickerComponent id="timepicker" enabled={false}></TimePickerComponent>
```
|
|
Enable the TimePicker
|
Method: enable()
```
<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>
function onCreate(args) {
var timeObject = $("#time").data("ejTimePicker");
timeObject.enable();
}
```
|
Not Applicable
|
|
Enable/Disable the textBox editing
|
Not Applicable
|
Property: allowEdit
```
<TimePickerComponent id="timepicker" allowEdit={false}></TimePickerComponent>
```
|
|
zIndex
|
Not Applicable
|
Property: zIndex
```
```
|
|
Specify the placeholder text behavior
|
Not Applicable
|
Property: floatLabelType
```
```
|
Globalization
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Locale
|
Property: locale
```
```
|
Property: locale
```
```
|
Strict Mode
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Strict mode
|
Property: enableStrictMode
```
<EJ.TimePicker id="timepicker" enableStrictMode={true} ></EJ.TimePicker>
```
|
Property: strictMode
```
<TimePickerComponent id="timepicker" strictMode={true}></TimePickerComponent>
```
|
Open and Close
| Behavior |
API in Essential® JS 1 |
API in Essential® JS 2 |
|
Close
|
Event: close
```
<EJ.TimePicker id="timepicker" close={onClose} ></EJ.TimePicker>
function onClose() {/** code block */ }
```
|
Event: close
```
<TimePickerComponent id="timepicker" close={this.onClose.bind(this)}></TimePickerComponent>
onClose() {/** code block */ }
```
|
|
Open
|
Event: open
```
<EJ.TimePicker id="timepicker" open={onOpen} ></EJ.TimePicker>
function onOpen(args) {/** code block */ }
```
|
Event: open
```
<TimePickerComponent id="timepicker" open={this.onOpen.bind(this)}></TimePickerComponent>
onOpen(args) {/** code block */ }
```
|
|
Hide
|
Method: hide()
```
<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>
function onCreate(args) {
var timeObject = $("#time").data("ejTimePicker");
timeObject.show();
timeObject.hide();
}
```
|
Method: hide()
```
<TimePickerComponent id="timepicker" created={this.create.bind(this)}></TimePickerComponent>
create() {
this.show();
this.hide();
}
```
|
|
Show
|
Method: show()
```
<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>
function onCreate(args) {
var timeObject = $("#time").data("ejTimePicker");
timeObject.show();
}
```
|
Method: show()
```
<TimePickerComponent id="timepicker" cerated={this.onCreate.bind(this)}></TimePickerComponent>
onCreate() {
this.show();
}
```
|