Search results

Migration from Essential JS 1 in React DateTimePicker component

29 Jul 2021 / 11 minutes to read

This article describes the API migration process of DateTimePicker component from Essential JS 1 to Essential JS 2.

DateTime Selection

Behavior API in Essential JS 1 API in Essential JS 2
Setting the value Property: value
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" value='5/5/2019 12:00 AM' ></EJ.DateTimePicker>
Property: value
Copied to clipboard
<DateTimePickerComponent value='5/5/2019 2:00 AM'></DateTimePickerComponent>

DateTime Format

Behavior API in Essential JS 1 API in Essential JS 2
Display the datetime format Property: dateTimeFormat
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" dateTimeFormat= "d/MMM/yy tt h:mm" ></EJ.DateTimePicker>
Property: format
Copied to clipboard
<DateTimePickerComponent format="dd/MM/yyyy hh:mm a"></DateTimePickerComponent>
Day header format Property: dayHeaderFormat
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" dayHeaderFormat="long" ></EJ.DateTimePicker>
Not Applicable

Calendar Views

Behavior API in Essential JS 1 API in Essential JS 2
Start view Property: startLevel
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" startLevel="year" ></EJ.DateTimePicker>
Property: start
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" start="Decade"></DateTimePickerComponent>
Depth view Property: depthLevel
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" depthLevel="year" ></EJ.DateTimePicker>
Property: depth
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" depth="Year"></DateTimePickerComponent>

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum datetime Property: minDateTime
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" minDateTime="5/5/2019 4:00 AM" ></EJ.DateTimePicker>
Property: min
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" min="5/5/2019 3:00 AM"></DateTimePickerComponent>
Maximum datetime Property: maxDateTime
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" maxDateTime="5/5/2019 4:00 AM" ></EJ.DateTimePicker>
Property: max
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" max="5/5/2019 3:00 AM"></DateTimePickerComponent>

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Disabled dates Not Applicable Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" renderDayCell={this.disabledDatetime.bind(this)}></DateTimePickerComponent>

disabledDatetime(args) {
/*Date need to be disabled*/
if (args.date.getDay() === 0 || args.date.getDay() === 6) {
    args.isDisabled = true;
}
}

Customization

Behavior API in Essential JS 1 API in Essential JS 2
CSS Class Property: cssClass
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" cssClass="gradient-lime" ></EJ.DateTimePicker>
Property: cssClass
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" cssClass='gradient-lime'></DateTimePickerComponent>
Show/Hide the today button Can be achieved by
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" cssClass="e-custom-class" ></EJ.DateTimePicker>

.e-datetime-popup.e-popup.e-custom-class .e-button-container {
display: none !important;
}
Property: showTodayButton
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" showTodayButton={false}></DateTimePickerComponent>
Show/Hide the other month dates Property: showOtherMonths
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" showOtherMonths={false} ></EJ.DateTimePicker>
Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker"></DateTimePickerComponent>

.e-DateTimePicker .e-calendar .e-content tr.e-month-hide, .e-DateTimePicker .e-calendar .e-content td.e-other-month > .e-day {
visibility: none;
}

.e-DateTimePicker .e-calendar .e-content td.e-month-hide, .e-DateTimePicker .e-calendar .e-content td.e-other-month {
pointer-events: none;
touch-action: none;
}
Show/Hide the popup button Property: showPopupButton
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" showPopupButton={false} ></EJ.DateTimePicker>
Event: focus
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" focus={this.onFocus.bind(this)}></DateTimePickerComponent>

onFocus(args) {
this.show();
}

.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;
}
Enable/Disable the rounded corner Property: showRoundedCorner
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" showRoundedCorner={false} ></EJ.DateTimePicker>
Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" cssClass='e-custom-style'></DateTimePickerComponent>

.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
border-radius: 4px;
}
Skip a month Property: stepMonths
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" stepMonths={2} ></EJ.DateTimePicker>
Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" value='5/5/2019 12:00 AM' open={this.onOpen.bind(this)}></DateTimePickerComponent>

onOpen(args) {
this.navigateTo('Year', new Date("03/18/2018"));
}
Show/Hide the tooltip Property: showTooltip
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" showTooltip={false} ></EJ.DateTimePicker>
Not Applicable
Interval Property: interval
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" interval={60} ></EJ.DateTimePicker>
Property: step
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" step={20}></DateTimePickerComponent>
Button text Property: buttonText
Copied to clipboard
var buttonText = { done: "Ok" }

<EJ.DateTimePicker id="timepicker"  buttonText={buttonText}></EJ.DateTimePicker>
Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" locale='en'></DateTimePickerComponent>

L10n.load({
'en': {
        'datetimepicker': { today: 'Now' }
    }
});
Enable/Disable the animation Property: enableAnimation
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" enableAnimation={false} ></EJ.DateTimePicker>
Not Applicable
FocusIn method Not Applicable Method: focusIn()
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" created={this.create.bind(this)}></DateTimePickerComponent>

create(args){
this.focusIn();
}
FocusOut method Not Applicable Method: focusOut()
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" created={this.create.bind(this)}></DateTimePickerComponent>

create(args){
this.focusIn();
this.focusOut();
}
Prevent popup close Not Applicable Event: Close
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" close={this.onClose.bind(this)}></DateTimePickerComponent>

onClose(args) {
/*Triggers when the popup gets close*/
args.cancel = true;
}
Prevent popup open Not Applicable Event: Open
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" open={this.onOpen.bind(this)}></DateTimePickerComponent>

onOpen(args) {
/*Triggers when the popup gets close*/
args.cancel = true;
}

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the RTL Property: enableRTL
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" enableRTL={true} ></EJ.DateTimePicker>
Property: enableRtl
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" enableRtl={true}></DateTimePickerComponent>

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" enablePersistence={true} ></EJ.DateTimePicker>
Property: enablePersistence
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" enablePersistence={true}></DateTimePickerComponent>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validationRules
Copied to clipboard
var validationRules = {required: {true}};

$.validator.setDefaults({
    errorClass: 'e-validation-error',
    errorPlacement: function (error, element) {
           $(error).insertAfter(element.closest(".e-widget"));
       }
});

<EJ.DateTimePicker id="timepicker" validationRules= {validationRules} ></EJ.DateTimePicker>
Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" floatLabelType='Always'> </DateTimePickerComponent>

var options = { rules: { 'datetimepicker': { required: true } } };
var formObject = new ej.inputs.FormValidator('#form-element', options);
Validation message Property: validationMessage
Copied to clipboard
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.DatePicker id="timepicker" validationRules= {validationRules} validationMessage= {validationMessage} ></EJ.DatePicker>
Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" floatLabelType='Always'> </DateTimePickerComponent>

var options = { rules: { 'datetimepicker': { 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
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" width="200px" ></EJ.DateTimePicker>
Property: Width
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" width="300px"></DateTimePickerComponent>
Readonly Property: readOnly
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" readOnly={true} ></EJ.DateTimePicker>
Property: readonly
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" value="5/5/2019" readonly={true}></DateTimePickerComponent>
Show/Hide the clear button Not Applicable Property: showClearButton
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" showClearButton={false} ></DateTimePickerComponent>
Height Property: height
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" height="35px" ></EJ.DateTimePicker>
Can be achieved by
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" cssClass='e-custom-style' ></DateTimePickerComponent>

.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
height: 35px;
}
Html Attributes Property: htmlAttributes
Copied to clipboard
var htmlAttributes = {required:"required"}
  
<EJ.DateTimePicker id="timepicker"  htmlAttributes = {htmlAttributes} ></EJ.DateTimePicker>
Not Applicable
Show/Hide the week number Property: weekNumber
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" weekNumber={true} ></EJ.DateTimePicker>
Property: weekNumber
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" weekNumber={true} ></DateTimePickerComponent>
Watermark text Property: watermarkText
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" watermarkText="Enter date and time" ></EJ.DateTimePicker>
Property: placeholder
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" placeholder="Enter DateTime" ></DateTimePickerComponent>
Disable/Enable Property: enabled
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" enabled={false} ></EJ.DateTimePicker>
Property: enabled
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" enabled={false} ></DateTimePickerComponent>
Enable/Disable the textbox editing Property: AllowEdit
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" allowEdit={false} ></EJ.DateTimePicker>
Property: AllowEdit
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" value="5/5/2010" allowEdit={false} ></DateTimePickerComponent>
zIndex Can be achieved by
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" cssClas="e-custom-class" ></EJ.DateTimePicker>

.e-datetime-popup.e-popup.e-custom-class {
z-index: 100 !important;
}
Property: zIndex
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" zIndex="2000" ></DateTimePickerComponent>
Specify the placeholder text behavior Not Applicable Property: floatLabelType
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" floatLabelType="Always" placeholder="Enter DateTime" ></DateTimePickerComponent>
Event callback for each cell creation Not Applicable Event: renderDayCell
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" renderDayCell={this.onRenderCell.bind(this)} ></DateTimePickerComponent>

onRenderCell() {/** code block */ }
FocusIn event Event: FocusIn
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" focusIn={onFocus} ></EJ.DateTimePicker>

function onFocus() {  /*Triggers when the popup gets focus*/ }
Event: focus
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" focus={this.onFocus.bind(this)} ></DateTimePickerComponent>

onFocus() {/** code block */}
FocusOut event Event: focusOut
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" focusOut={onFocusout} ></EJ.DateTimePicker>

function onFocusout() { /*Triggers when the popup gets focusout*/ }
Event: blur
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" blur={this.onBlur.bind(this)} ></DateTimePickerComponent>

onBlur() {/** code block */}
Change event Event: change
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" change={onChange} ></EJ.DateTimePicker>

function onChange() { /*Triggers when the value is changed*/ }
Event: change
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" change={this.onChange.bind(this)} ></DateTimePickerComponent>

onChange() { console.log("changed") }
Created event Event: create
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" create={onCreate} ></EJ.DateTimePicker>

function onCreate() { /*Triggers when the control is created*/ }
Event: created
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)} ></DateTimePickerComponent>

onCreate() { console.log(" Component Created") }
Destroy event Event: Destroy
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" destroy={onDestroy} ></EJ.DateTimePicker>

function onDestroy() { /*Triggers when the control is destroyed*/ }
Event: destroyed
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" destroyed={this.onDestroyed.bind(this)} change={this.onChange} ></DateTimePickerComponent>

onDestroyed(args) { console.log("destroyed")}

onChange(args){
this.destroy();
}

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: locale
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" locale="en-US" ></EJ.DateTimePicker>
Property: locale
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" locale='en'></DateTimePickerComponent>
First day of week Property: startDay
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" startDay={2} ></EJ.DateTimePicker>
Property: firstDayOfWeek
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" firstDayOfWeek={3} ></DateTimePickerComponent>

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enableStrictMode
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" enableStrictMode={false} ></EJ.DateTimePicker>
Property: strictMode
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" strictMode={true}></DateTimePickerComponent>

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: Close
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" close={onClose} ></EJ.DateTimePicker>

function onClose() { /*Triggers when the poupup gets closed*/ }
Event: close
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" close={this.onClose.bind(this)}></DateTimePickerComponent>

onClose() { /*Triggers when the poupup gets closed*/ }
Hide Method: hide()
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" create={onCreate} ></EJ.DateTimePicker>

onCreate(args) {
var datetimeObject = $("#datetimepicker").data("ejDateTimePicker");
datetimeObject.show();
datetimeObject.hide();
}
Method: hide()
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)}></DateTimePickerComponent>

onCreate(args){
this.show();
this.hide();
}
Open Event: open
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" open={onOpen} ></EJ.DateTimePicker>

function onOpen(args){/** code block */}
Event: open
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" open={this.onOpen.bind(this)}></DateTimePickerComponent>

onOpen(args){/** code block */}
Show Method: show()
Copied to clipboard
<EJ.DateTimePicker id="datetimepicker" create={onCreate} ></EJ.DateTimePicker>

function onCreate(args) {
var datetimeObject = $("#datetimepicker").data("ejDateTimePicker");
datetimeObject.show();
}
Method: show()
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)}></DateTimePickerComponent>

onCreate(args){
this.show();
}

View Navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to specific month Not Applicable Method: navigateTo()
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" value='5/5/2019 12:00 AM' open={this.onOpen}></DateTimePickerComponent>

onOpen(args) {
this.navigateTo('Year', new Date("03/18/2018"));
}
Navigation callback Not Applicable Event: navigated
Copied to clipboard
<DateTimePickerComponent id="datetimepicker" navigated={this.onNavigated.bind(this)} ></DateTimePickerComponent>

onNavigated() {/** code block */ }
Enable/Disable the drill down Property: timeDrillDown
Copied to clipboard
var timeDrillDown = { showMeridian: true , interval: 10 , enabled: true }

<EJ.DateTimePicker id="datetimepicker"  timeDrillDown={timeDrillDown}></EJ.DateTimePicker>
Not Applicable