Migration from Essential JS 1 in React TimePicker component

<EJ.TimePicker id="timepicker" value='2:00 AM' ></EJ.TimePicker>

<TimePickerComponent id="timepicker" value='5/5/2019 2:00 AM'></TimePickerComponent>

<EJ.TimePicker id="timepicker" timeFormat='hh:mm:ss tt' ></EJ.TimePicker>

<TimePickerComponent id="timepicker" format='HH:mm'></TimePickerComponent>

<EJ.TimePicker id="timepicker" minTime='10:00 AM' ></EJ.TimePicker>

<TimePickerComponent id="timepicker" min='5/5/2019 2:00 AM'></TimePickerComponent>

<EJ.TimePicker id="timepicker" maxTime='10:00 PM' ></EJ.TimePicker>

<TimePickerComponent id="timepicker" max='5/5/2019 2:00 AM'></TimePickerComponent>

<EJ.TimePicker id="timepicker" create={this.onCreate} ></EJ.TimePicker>

function onCreate() {
    var timeObj = $("#timepicker").data("ejTimePicker");
    timeObj.setCurrentTime();
}

private timeValue: Date = new Date();

<TimePickerComponent id="timepicker" value={this.timeValue}></TimePickerComponent>

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>

<TimePickerComponent id="timepicker" itemRender={this.itemRanderHandler.bind(this)}></TimePickerComponent>

itemRanderHandler(args) {
    if (args.value.getHours() === 4) {
        args.isDisabled = true;
    }
}

<EJ.TimePicker id="timepicker" cssClass='gradient-lime' ></EJ.TimePicker>

<TimePickerComponent id="timepicker" cssClass="e-custom-style"></TimePickerComponent>

<TimePickerComponent id="timepicker" itemRender={this.itemRendeHandler.bind(this)}></TimePickerComponent>

itemRanderHandler() {/** code block */ }

<EJ.TimePicker id="timepicker" showPopupButton={false} ></EJ.TimePicker>

<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;
}

<EJ.TimePicker id="timepicker" showRoundedCorner={true} ></EJ.TimePicker>

<TimePickerComponent id="timepicker" cssClass="e-custom-style"></TimePickerComponent>

.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
    border-radius: 4px;
}

<EJ.TimePicker id="timepicker" enableAnimation={false} ></EJ.TimePicker>

<EJ.TimePicker id="timepicker" interval={120} ></EJ.TimePicker>

<TimePickerComponent id="timepicker" step={120}></TimePickerComponent>

<EJ.TimePicker id="timepicker" focusIn={onFocus} ></EJ.TimePicker>

function onFocus() { /** code block */}

<TimePickerComponent id="timepicker" focus={this.onFocus.bind(this)}></TimePickerComponent>

onFocus() {/** code block */ }

<EJ.TimePicker id="timepicker" focusOut={onFocusout} ></EJ.TimePicker>

function onFocusout() { }

<TimePickerComponent id="timepicker" blur={this.onBlur.bind(this)}></TimePickerComponent>

onBlur(args) { /** code block */}

<TimePickerComponent id="timepicker" created={this.create.bind(this)}></TimePickerComponent>

create(args) {
    this.focusIn();
}

<TimePickerComponent id="timepicker" created={this.create.bind(this)}></TimePickerComponent>

create(args) {
    this.focusOut();
}

<TimePickerComponent id="timepicker" close={this.onClose.bind(this)}></TimePickerComponent>

onClose(args) {
    args.cancel = true;
}

<TimePickerComponent id="timepicker" open={this.onOpen.bind(this)}></TimePickerComponent>

onOpen(args) {
    args.cancel = true;
}

<EJ.TimePicker id="timepicker" enableRTL={true} ></EJ.TimePicker>

<TimePickerComponent id="timepicker" enableRtl={true}></TimePickerComponent>

<EJ.TimePicker id="timepicker" enablePersistence={true} ></EJ.TimePicker>

<TimePickerComponent id="timepicker" enablePersistence={true}></TimePickerComponent>

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>

<TimePickerComponent id="timepicker" floatLabelType='Always'> </TimePickerComponent>

var options = { rules: { 'timepicker': { required: true } } };
var formObject = new ej.inputs.FormValidator('#form-element', options);

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>

<TimePickerComponent id="timepicker" floatLabelType='Always'> </TimePickerComponent>

var options = { rules: {'timepicker': { required: true } },
    customPlacement: (inputElement, errorElement) => { inputElement.parentElement.parentElement.appendChild(errorElement);
}};
var formObject = new ej.inputs.FormValidator('#form-element', options);

<EJ.TimePicker id="timepicker" width="300px" ></EJ.TimePicker>

<TimePickerComponent id="timepicker" width="200px"></TimePickerComponent>

<EJ.TimePicker id="timepicker" readOnly={true} ></EJ.TimePicker>

<TimePickerComponent id="timepicker" readonly={true}></TimePickerComponent>

<TimePickerComponent id="timepicker" showClearButton={true}></TimePickerComponent>

<EJ.TimePicker id="timepicker" height="50px" ></EJ.TimePicker>

<TimePickerComponent id="timepicker" cssClass="e-custom-style"></TimePickerComponent>

.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
    height: 35px;
}

var htmlAttributes = {required:"required"}
  
<EJ.TimePicker id="timepicker"  htmlAttributes = {htmlAttributes} ></EJ.TimePicker>

<EJ.TimePicker id="timepicker" watermarkText="Enter Time" ></EJ.TimePicker>

<TimePickerComponent id="timepicker" placeholder="Select a Time"></TimePickerComponent>

<EJ.TimePicker id="timepicker" enabled={false} ></EJ.TimePicker>

<TimePickerComponent id="timepicker" enabled={true}></TimePickerComponent>

<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>

function onCreate(args) {
    var timeObject = $("#time").data("ejTimePicker");
    timeObject.disable();
}

<TimePickerComponent id="timepicker" enabled={false}></TimePickerComponent>

<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>

function onCreate(args) {
    var timeObject = $("#time").data("ejTimePicker");
    timeObject.enable();
}

<TimePickerComponent id="timepicker" allowEdit={false}></TimePickerComponent>

<TimePickerComponent id="timepicker" zIndex="2000"></TimePickerComponent>

<TimePickerComponent id="timepicker" floatLabelType="Always"></TimePickerComponent>

<EJ.TimePicker id="timepicker" locale="en-US" ></EJ.TimePicker>

<TimePickerComponent id="timepicker" locale="en"></TimePickerComponent>

<EJ.TimePicker id="timepicker" enableStrictMode={true} ></EJ.TimePicker>

<TimePickerComponent id="timepicker" strictMode={true}></TimePickerComponent>

<EJ.TimePicker id="timepicker" close={onClose} ></EJ.TimePicker>

function onClose() {/** code block */ }

<TimePickerComponent id="timepicker" close={this.onClose.bind(this)}></TimePickerComponent>

onClose() {/** code block */ }

<EJ.TimePicker id="timepicker" open={onOpen} ></EJ.TimePicker>

function onOpen(args) {/** code block */ }

<TimePickerComponent id="timepicker" open={this.onOpen.bind(this)}></TimePickerComponent>

onOpen(args) {/** code block */ }

<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>

function onCreate(args) {
    var timeObject = $("#time").data("ejTimePicker");
    timeObject.show();
    timeObject.hide();
}

<TimePickerComponent id="timepicker" created={this.create.bind(this)}></TimePickerComponent>

create() {
    this.show();
    this.hide();
}

<EJ.TimePicker id="timepicker" create={onCreate} ></EJ.TimePicker>

function onCreate(args) {
    var timeObject = $("#time").data("ejTimePicker");
    timeObject.show();
}

<TimePickerComponent id="timepicker" cerated={this.onCreate.bind(this)}></TimePickerComponent>

onCreate() {
    this.show();
}