Ej1 api migration in React Datetimepicker component

24 Jan 20235 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 ``` ```

Property: value</i ``` ``` </td> </tr> </thead> </table> ## DateTime Format

Behavior API in Essential JS 1 API in Essential JS 2

Display the datetime format Property: dateTimeFormat ``` ``` Property: format ``` ```

Day header format Property: dayHeaderFormat ``` ``` Not Applicable

## Calendar Views

Behavior API in Essential JS 1 API in Essential JS 2

Start view Property: startLevel ``` ``` Property: start ``` ```

Depth view Property: depthLevel ``` ``` Property: depth ``` ```

## Date Range

Behavior API in Essential JS 1 API in Essential JS 2

Minimum datetime Property: minDateTime ``` ``` Property: min ``` ```

Maximum datetime Property: maxDateTime ``` ``` Property: max ``` ```

## Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2

Disabled dates Not Applicable Can be achieved by ``` <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 ``` ``` Property: cssClass ``` ```

Show/Hide the today button Can be achieved by ``` .e-datetime-popup.e-popup.e-custom-class .e-button-container { display: none !important; } ``` Property: showTodayButton ``` <DateTimePickerComponent id="datetimepicker" showTodayButton={false}></DateTimePickerComponent> ```

Show/Hide the other month dates Property: showOtherMonths ``` <EJ.DateTimePicker id="datetimepicker" showOtherMonths={false} ></EJ.DateTimePicker> ``` Can be achieved by ``` .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 ``` <EJ.DateTimePicker id="datetimepicker" showPopupButton={false} ></EJ.DateTimePicker> ``` Event: focus ``` <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 ``` <EJ.DateTimePicker id="datetimepicker" showRoundedCorner={false} ></EJ.DateTimePicker> ``` Can be achieved by ``` .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { border-radius: 4px; } ```

Skip a month Property: stepMonths ``` <EJ.DateTimePicker id="datetimepicker" stepMonths={2} ></EJ.DateTimePicker> ``` Can be achieved by ``` <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 ``` <EJ.DateTimePicker id="datetimepicker" showTooltip={false} ></EJ.DateTimePicker> ``` Not Applicable

Interval Property: interval ``` <EJ.DateTimePicker id="datetimepicker" interval={60} ></EJ.DateTimePicker> ``` Property: step ``` <DateTimePickerComponent id="datetimepicker" step={20}></DateTimePickerComponent> ```

Button text Property: buttonText ``` var buttonText = { done: "Ok" } <EJ.DateTimePicker id="timepicker" buttonText={buttonText}></EJ.DateTimePicker> ``` Can be achieved by ``` L10n.load({ 'en': { 'datetimepicker': { today: 'Now' } } }); ```

Enable/Disable the animation Property: enableAnimation ``` <EJ.DateTimePicker id="datetimepicker" enableAnimation={false} ></EJ.DateTimePicker> ``` Not Applicable

FocusIn method Not Applicable Method: focusIn() ``` <DateTimePickerComponent id="datetimepicker" created={this.create.bind(this)}></DateTimePickerComponent> create(args){ this.focusIn(); } ```

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

Prevent popup close Not Applicable Event: Close ``` <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 ``` <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 ``` <EJ.DateTimePicker id="datetimepicker" enableRTL={true} ></EJ.DateTimePicker> ``` Property: enableRtl ``` <DateTimePickerComponent id="datetimepicker" enableRtl={true}></DateTimePickerComponent> ```

## Persistence

Behavior API in Essential JS 1 API in Essential JS 2

Enable/Disable the persistence Property: enablePersistence ``` <EJ.DateTimePicker id="datetimepicker" enablePersistence={true} ></EJ.DateTimePicker> ``` Property: enablePersistence ``` <DateTimePickerComponent id="datetimepicker" enablePersistence={true}></DateTimePickerComponent> ```

## 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.DateTimePicker id="timepicker" validationRules= {validationRules} ></EJ.DateTimePicker> ``` Can be achieved by ``` var options = { rules: { 'datetimepicker': { required: true } } }; var formObject = new ej.inputs.FormValidator('#form-element', options); ```

Validation message Property: validationMessage ``` 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 ``` 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 ``` ``` Property: Width ``` ```

Readonly Property: readOnly ``` <EJ.DateTimePicker id="datetimepicker" readOnly={true} ></EJ.DateTimePicker> ``` Property: readonly ``` <DateTimePickerComponent id="datetimepicker" value="5/5/2019" readonly={true}></DateTimePickerComponent> ```

Show/Hide the clear button Not Applicable Property: showClearButton ``` <DateTimePickerComponent id="datetimepicker" showClearButton={false} ></DateTimePickerComponent> ```

Height Property: height ``` ``` Can be achieved by ``` .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { height: 35px; } ```

Html Attributes Property: htmlAttributes ``` var htmlAttributes = {required:"required"} <EJ.DateTimePicker id="timepicker" htmlAttributes = {htmlAttributes} ></EJ.DateTimePicker> ``` Not Applicable

Show/Hide the week number Property: weekNumber ``` <EJ.DateTimePicker id="datetimepicker" weekNumber={true} ></EJ.DateTimePicker> ``` Property: weekNumber ``` <DateTimePickerComponent id="datetimepicker" weekNumber={true} ></DateTimePickerComponent> ```

Watermark text Property: watermarkText ``` ``` Property: placeholder ``` ```

Disable/Enable Property: enabled ``` <EJ.DateTimePicker id="datetimepicker" enabled={false} ></EJ.DateTimePicker> ``` Property: enabled ``` <DateTimePickerComponent id="datetimepicker" enabled={false} ></DateTimePickerComponent> ```

Enable/Disable the textbox editing Property: AllowEdit ``` <EJ.DateTimePicker id="datetimepicker" allowEdit={false} ></EJ.DateTimePicker> ``` Property: AllowEdit ``` <DateTimePickerComponent id="datetimepicker" value="5/5/2010" allowEdit={false} ></DateTimePickerComponent> ```

zIndex Can be achieved by ``` .e-datetime-popup.e-popup.e-custom-class { z-index: 100 !important; } ``` Property: zIndex ``` ```

Specify the placeholder text behavior Not Applicable Property: floatLabelType ``` ```

Event callback for each cell creation Not Applicable Event: renderDayCell ``` <DateTimePickerComponent id="datetimepicker" renderDayCell={this.onRenderCell.bind(this)} ></DateTimePickerComponent> onRenderCell() {/** code block */ } ```

FocusIn event Event: FocusIn ``` <EJ.DateTimePicker id="datetimepicker" focusIn={onFocus} ></EJ.DateTimePicker> function onFocus() { /*Triggers when the popup gets focus*/ } ``` Event: focus ``` <DateTimePickerComponent id="datetimepicker" focus={this.onFocus.bind(this)} ></DateTimePickerComponent> onFocus() {/** code block */} ```

FocusOut event Event: focusOut ``` <EJ.DateTimePicker id="datetimepicker" focusOut={onFocusout} ></EJ.DateTimePicker> function onFocusout() { /*Triggers when the popup gets focusout*/ } ``` Event: blur ``` <DateTimePickerComponent id="datetimepicker" blur={this.onBlur.bind(this)} ></DateTimePickerComponent> onBlur() {/** code block */} ```

Change event Event: change ``` <EJ.DateTimePicker id="datetimepicker" change={onChange} ></EJ.DateTimePicker> function onChange() { /*Triggers when the value is changed*/ } ``` Event: change ``` <DateTimePickerComponent id="datetimepicker" change={this.onChange.bind(this)} ></DateTimePickerComponent> onChange() { console.log("changed") } ```

Created event Event: create ``` <EJ.DateTimePicker id="datetimepicker" create={onCreate} ></EJ.DateTimePicker> function onCreate() { /*Triggers when the control is created*/ } ``` Event: created ``` <DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)} ></DateTimePickerComponent> onCreate() { console.log(" Component Created") } ```

Destroy event Event: Destroy ``` <EJ.DateTimePicker id="datetimepicker" destroy={onDestroy} ></EJ.DateTimePicker> function onDestroy() { /*Triggers when the control is destroyed*/ } ``` Event: destroyed ``` <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 ``` ``` Property: locale ``` ```

First day of week Property: startDay ``` <EJ.DateTimePicker id="datetimepicker" startDay={2} ></EJ.DateTimePicker> ``` Property: firstDayOfWeek ``` <DateTimePickerComponent id="datetimepicker" firstDayOfWeek={3} ></DateTimePickerComponent> ```

## Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2

Strict mode Property: enableStrictMode ``` <EJ.DateTimePicker id="datetimepicker" enableStrictMode={false} ></EJ.DateTimePicker> ``` Property: strictMode ``` <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 ``` <EJ.DateTimePicker id="datetimepicker" close={onClose} ></EJ.DateTimePicker> function onClose() { /*Triggers when the poupup gets closed*/ } ``` Event: close ``` <DateTimePickerComponent id="datetimepicker" close={this.onClose.bind(this)}></DateTimePickerComponent> onClose() { /*Triggers when the poupup gets closed*/ } ```

Hide Method: hide() ``` <EJ.DateTimePicker id="datetimepicker" create={onCreate} ></EJ.DateTimePicker> onCreate(args) { var datetimeObject = $("#datetimepicker").data("ejDateTimePicker"); datetimeObject.show(); datetimeObject.hide(); } ``` Method: hide() ``` <DateTimePickerComponent id="datetimepicker" created={this.onCreate.bind(this)}></DateTimePickerComponent> onCreate(args){ this.show(); this.hide(); } ```

Open Event: open ``` <EJ.DateTimePicker id="datetimepicker" open={onOpen} ></EJ.DateTimePicker> function onOpen(args){/** code block */} ``` Event: open ``` <DateTimePickerComponent id="datetimepicker" open={this.onOpen.bind(this)}></DateTimePickerComponent> onOpen(args){/** code block */} ```

Show Method: show() ``` <EJ.DateTimePicker id="datetimepicker" create={onCreate} ></EJ.DateTimePicker> function onCreate(args) { var datetimeObject = $("#datetimepicker").data("ejDateTimePicker"); datetimeObject.show(); } ``` Method: show() ``` <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() ``` <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 ``` <DateTimePickerComponent id="datetimepicker" navigated={this.onNavigated.bind(this)} ></DateTimePickerComponent> onNavigated() {/** code block */ } ```

Enable/Disable the drill down Property: timeDrillDown ``` var timeDrillDown = { showMeridian: true , interval: 10 , enabled: true } <EJ.DateTimePicker id="datetimepicker" timeDrillDown={timeDrillDown}></EJ.DateTimePicker> ``` Not Applicable