Search results

Migration from Essential JS 1 in JavaScript TimePicker control

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
var timeObj = new ej.TimePicker($("#timepicker"), {
    value: new Date("5/5/2014 12:00 PM")
});
Property: value
let timepickerObject: TimePicker = new TimePicker({
    value: new Date("05/11/2017 2:00 PM")
});
timepickerObject.appendTo('#element');

Time Format

Behavior API in Essential JS 1 API in Essential JS 2
Display time format Property: timeFormat
var timeObj = new ej.TimePicker($("#timepicker"), {
    timeFormat: 'hh:mm:ss tt'
});
Property: format
let timepickerObject: TimePicker = new TimePicker({
    format:'hh:mm:ss'
});
timepickerObject.appendTo('#element');

Time Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum time Property: minTime
var timeObj = new ej.TimePicker($("#timepicker"), {
    minTime: '10:00 AM'
});
Property: min
let timepickerObject: TimePicker = new TimePicker({
    min: new Date('5/5/2019 3:00 AM')
});
timepickerObject.appendTo('#element');
Maximum time Property: maxTime
var timeObj = new ej.TimePicker($("#timepicker"), {
    maxTime: '10:00 AM'
});
Property: Max
let timepickerObject: TimePicker = new TimePicker({
    max: new Date('5/5/2019 8:00 AM')
});
timepickerObject.appendTo('#element');
Set current time Method: setCurrentTime()
var timeObj = new ej.TimePicker($("#timepicker"), {
});
console.log(timeObj.setCurrentTime());
Can be achieved by
let timepickerObject: TimePicker = new TimePicker({
    value: new Date()
});
timepickerObject.appendTo('#element');

Disabled Time Ranges

Behavior API in Essential JS 1 API in Essential JS 2
Disable time ranges Property: disableTimeRanges
var timeObj = new ej.TimePicker($("#timepicker"), {
    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
let timepickerObject: TimePicker = new TimePicker({
    itemRender: itemRanderHandler
});
timepickerObject.appendTo('#element');

function itemRenderHandler(args: ItemEventArgs): void {
    if (args.value.getHours() === 4) {
        args.isDisabled = true;
    }
}

Customization

Behavior API in Essential JS 1 API in Essential JS 2
CSS Class Property: CssClass
var timeObj = new ej.TimePicker($("#timepicker"), {
    cssClass :'gradient-lime'
});
Property: CssClass
let timepickerObject: TimePicker = new TimePicker({
    cssClass: 'e-custom-style'
});
timepickerObject.appendTo('#element');
Popup list customization Not Applicable Event: itemRender
let timepickerObject: TimePicker = new TimePicker({
    itemRender: itemRanderHandler
});
timepickerObject.appendTo('#element');

function itemRenderHandler(args: ItemEventArgs): void { /* code block*/}
Show/Hide the popup button Property: showPopupButton
var timeObj = new ej.TimePicker($("#timepicker"), {
    showPopupButton : false
});
Can be achieved by
let timepickerObject: TimePicker = new TimePicker({
    focus: onFocus
});
timepickerObject.appendTo('#element');

function onFocus(args: FocusEventArgs): void {
    timepickerObject.show();
}
.e-control-wrapper .e-input-group-icon.e-time-icon {
    display: none;
}
Enable/Disable the rounded corner Property: showRoundedCorner
var timeObj = new ej.TimePicker($("#timepicker"), {
    showRoundedCorner : true
});
Can be achieved by
let timepickerObject: TimePicker = new TimePicker({
    cssClass: 'e-custom-style'
});
timepickerObject.appendTo('#element');
.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
    border-radius: 4px;
}
Enable/Disable the animation Property: enableAnimation
var timeObj = new ej.TimePicker($("#timepicker"), {
    enableAnimation : true
});
Not Applicable
Interval Property: interval
var timeObj = new ej.TimePicker($("#timepicker"), {
    interval : 120
});
Property: step
let timepickerObject: TimePicker = new TimePicker({
    step: 120
});
timepickerObject.appendTo('#element');
FocusIn event Event: focusIn
var timeObj = new ej.TimePicker($("#timepicker"), {
    focusIn: function (args) {/* code block*/}
});
Event: focus
let timepickerObject: TimePicker = new TimePicker({
    focus: onFocus
});
timepickerObject.appendTo('#element');
function onFocus(args:any){ /* code block*/}
FocusOut event Event: focusOut
var timeObj = new ej.TimePicker($("#timepicker"), {
    focusIn: function (args) {/* code block*/}
});
Event: blur
let timepickerObject: TimePicker = new TimePicker({
    blur: onBlur
});
timepickerObject.appendTo('#element');
function onBlur(args: BlurEventArgs) { /* code block*/}
FocusIn method Not Applicable Method: focusIn()
let timepickerObject: TimePicker = new TimePicker({
    value : new Date()
});
timepickerObject.appendTo('#element');
timepickerObject.focusIn();
FocusOut method Not Applicable Event: focusOut
let timepickerObject: TimePicker = new TimePicker({
    value : new Date()
});
timepickerObject.appendTo('#element');
timepickerObject.focusOut();
Prevent popup close Not Applicable Event: close
let timepickerObject: TimePicker = new TimePicker({
    close: function (args: PreventableEventArgs) {
        args.cancel = true;  
    }
});
timepickerObject.appendTo('#element');
timepickerObject.show();
Prevent popup open Not Applicable Event: open
let timepickerObject: TimePicker = new TimePicker({
    open: function (args: PreventableEventArgs) {
        args.cancel = true;  
    }
});
timepickerObject.appendTo('#element');
timepickerObject.show();

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Property: enableRTL
var timeObj = new ej.TimePicker($("#timepicker"), {
    enableRTL: true
});
Property: enableRtl
let timepickerObject: TimePicker = new TimePicker({
    enableRtl: true
});
timepickerObject.appendTo('#element');

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence
var timeObj = new ej.TimePicker($("#timepicker"), {
    enablePersistence: true
});
Property: enablePersistence
let timepickerObject: TimePicker = new TimePicker({
    enablePersistence: true
});
timepickerObject.appendTo('#element');

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validationRules
var timeObj = new ej.TimePicker($("#timepicker"), {
    validationRules : {required : true},
});
Can be achieved by
let timepickerObject: TimePicker = new TimePicker({
    placeholder: 'Enter Time',
    value: new Date()
});
timepickerObject.appendTo('#element');
let options: FormValidatorModel = {
    rules: {
        'timevalue': { required: true }
    }
}
let formObject: FormValidator = new FormValidator('#form-element', options);
Validation message Property: validationMessages
var timeObj = new ej.TimePicker($("#timepicker"), {
    validationRules : {required : true},
    validationMessages : {required: "Required time value" }
});
Can be achieved by
let timepickerObject: TimePicker = new TimePicker({
    placeholder: 'Enter Time',
    value: new Date()
});
timepickerObject.appendTo('#element');
let options: FormValidatorModel = {
    rules: {
        'timevalue': { required: [true, 'Time value required']  }
    },
    customPlacement: function (inputElement, errorElement) {
        (<HTMLElement>inputElement).parentElement.parentElement.appendChild(errorElement);
    }
}
let formObject: FormValidator = new FormValidator('#form-element', options);

Common

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: width
var timeObj = new ej.TimePicker($("#timepicker"), {
    width: 200
});
Property: width
let timepickerObject: TimePicker = new TimePicker({
    width: '200px'
});
timepickerObject.appendTo('#element');
Readonly Property: readOnly
var timeObj = new ej.TimePicker($("#timepicker"), {
    readOnly: true
});
Property: Readonly
let timepickerObject: TimePicker = new TimePicker({
    readonly: true,
    value: new Date()
});
timepickerObject.appendTo('#element');
Show/Hide the clear button Not Applicable Property: showClearButton
let timepickerObject: TimePicker = new TimePicker({
    showClearButton: true,
});
timepickerObject.appendTo('#element');
Height Property: Height
var timeObj = new ej.TimePicker($("#timepicker"), {
    height: "50px"
});
Can be achieved by
let timepickerObject: TimePicker = new TimePicker({
    cssClass: 'e-custom-style',
});
timepickerObject.appendTo('#element');
.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
    height: 35px;
}
Html Attributes Property: HtmlAttributes
var timeObj = new ej.TimePicker($("#timepicker"), {
    htmlAttributes : {required:"required"}
});
Not Applicable
Watermark text Property: watermarkText
var timeObj = new ej.TimePicker($("#timepicker"), {
    watermarkText : "Enter Time"
});
Property: placeholder
let timepickerObject: TimePicker = new TimePicker({
    placeholder: 'Select a Time'
});
timepickerObject.appendTo('#element');
Enable the TimePicker Property: enabled
var timeObj = new ej.TimePicker($("#timepicker"), {
    enabled : true
});
Property: enabled
let timepickerObject: TimePicker = new TimePicker({
    enabled: true
});
timepickerObject.appendTo('#element');
Disable the TimePicker Method: disable()
var timeObj = new ej.TimePicker($("#timepicker"), {
});
timeObj.disable();
Property: enabled
let timepickerObject: TimePicker = new TimePicker({
    enabled: false
});
timepickerObject.appendTo('#element');
Enable/Disable the textBox editing Not Applicable Property: allowEdit
let timepickerObject: TimePicker = new TimePicker({
    allowEdit: false
});
timepickerObject.appendTo('#element');
zIndex Not Applicable Property: zIndex
let timepickerObject: TimePicker = new TimePicker({
    zIndex: 2000
});
timepickerObject.appendTo('#element');
Specify the placeholder text behavior Not Applicable Property: floatLabelType
let timepickerObject: TimePicker = new TimePicker({
    floatLabelType: 'Always',
    placeholder: 'Select a time'
});
timepickerObject.appendTo('#element');

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
var timeObj = new ej.TimePicker($("#timepicker"), {
    locale:"en-US"
});
Property: locale
let timepickerObject: TimePicker = new TimePicker({
    locale: 'en',
});
timepickerObject.appendTo('#element');

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enableStrictMode
var timeObj = new ej.TimePicker($("#timepicker"), {
    enableStrictMode: true
});
Property: strictMode
let timepickerObject: TimePicker = new TimePicker({
    strictMode: true,
});
timepickerObject.appendTo('#element');

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: close
var timeObj = new ej.TimePicker($("#timepicker"), {
    close: function(args){ /* code block*/}
});
Event: close
let timepickerObject: TimePicker = new TimePicker({
    close: function (args: PreventableEventArgs) { /* code block*/}
});
timepickerObject.appendTo('#element');
Open Event: open
var timeObj = new ej.TimePicker($("#timepicker"), {
    open: function(args){ /* code block*/}
});
Event: open
let timepickerObject: TimePicker = new TimePicker({
    open: function (args: PreventableEventArgs) { /* code block*/}
});
timepickerObject.appendTo('#element');
Hide Method: hide()
var timeObj = new ej.TimePicker($("#timepicker"), {
});
timeObj.show();
timeObj.hide();
Method: hide()
let timepickerObject: TimePicker = new TimePicker({
});
timepickerObject.appendTo('#element');
timepickerObject.show();
timepickerObject.hide();
Show Method: show()
var timeObj = new ej.TimePicker($("#timepicker"), {
});
timeObj.show();
timeObj.hide();
Method: show()
let timepickerObject: TimePicker = new TimePicker({
});
timepickerObject.appendTo('#element');
timepickerObject.show();