Search results

Migration from Essential JS 1

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
<EJ.TimePicker id="timepicker" value='2:00 AM' ></EJ.TimePicker>
Property: Value
<TimePickerComponent id="timepicker" value='5/5/2019 2:00 AM'></TimePickerComponent>

Time Format

Behavior API in Essential JS 1 API in Essential JS 2
Display time format Property: timeFormat
<EJ.TimePicker id="timepicker" timeFormat='hh:mm:ss tt' ></EJ.TimePicker>
Property: format
<TimePickerComponent id="timepicker" format='HH:mm'></TimePickerComponent>

Time Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum time Property: minTime
<EJ.TimePicker id="timepicker" minTime='10:00 AM' ></EJ.TimePicker>
Property: min
<TimePickerComponent id="timepicker" min='5/5/2019 2:00 AM'></TimePickerComponent>
Maximum time Property: maxTime
<EJ.TimePicker id="timepicker" maxTime='10:00 PM' ></EJ.TimePicker>
Property: Max
<TimePickerComponent id="timepicker" max='5/5/2019 2:00 AM'></TimePickerComponent>
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
<EJ.TimePicker id="timepicker" cssClass='gradient-lime' ></EJ.TimePicker>
Property: cssClass
<TimePickerComponent id="timepicker" cssClass="e-custom-style"></TimePickerComponent>
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
<TimePickerComponent id="timepicker" cssClass="e-custom-style"></TimePickerComponent>

.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

A
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
<TimePickerComponent id="timepicker" floatLabelType='Always'> </TimePickerComponent>

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>
Can be achieved by
<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);

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width
<EJ.TimePicker id="timepicker" width="300px" ></EJ.TimePicker>
Property: width
<TimePickerComponent id="timepicker" width="200px"></TimePickerComponent>
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
<EJ.TimePicker id="timepicker" height="50px" ></EJ.TimePicker>
Can be achieved by
<TimePickerComponent id="timepicker" cssClass="e-custom-style"></TimePickerComponent>

.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
<EJ.TimePicker id="timepicker" watermarkText="Enter Time" ></EJ.TimePicker>
Property: placeholder
<TimePickerComponent id="timepicker" placeholder="Select a Time"></TimePickerComponent>
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
<TimePickerComponent id="timepicker" zIndex="2000"></TimePickerComponent>
Specify the placeholder text behavior Not Applicable Property: floatLabelType
<TimePickerComponent id="timepicker" floatLabelType="Always"></TimePickerComponent>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
<EJ.TimePicker id="timepicker" locale="en-US" ></EJ.TimePicker>
Property: locale
<TimePickerComponent id="timepicker" locale="en"></TimePickerComponent>

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