Ej1 api migration in Angular Datetimepicker component

17 Nov 20226 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 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 ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj (renderDayCell)="disabledDatetime($event)"></ejs-datetimepicker> ``` ``` public disabledDatetime(args: any): void { /*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 ``` ``` ```css .e-datetime-popup.e-popup.e-custom-class .e-button-container { display: none !important; } ``` Property: showTodayButton ``` <ejs-datetimepicker id="datetimepicker" [showTodayButton]="false"></ejs-datetimepicker> ``` Show/Hide the other month dates Property: showOtherMonths ``` <input type="text" ej-datetimepicker id="datetimepicker" [showOtherMonths]="false"/> ``` Can be achieved by ``` ``` ```css .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 ``` <input type="text" ej-datetimepicker id="datetimepicker" [showPopupButton]="false"/> ``` Event: focus ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj (focus)="onFocus($event)"></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public onFocus(args:any): void { this.datetimeObj.show(); } ``` ```css .e-control-wrapper .e-input-group-icon.e-date-icon { display: none; } ``` Enable/Disable the rounded corner Property: showRoundedCorner ``` <input type="text" ej-datetimepicker id="datetimepicker" [showRoundedCorner]="true"/> ``` Can be achieved by ``` ``` ```css .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { border-radius: 4px; } ``` Skip a month Property: stepMonths ``` <input type="text" ej-datetimepicker id="datetimepicker" [stepMonths]="2"/> ``` Can be achieved by ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj value='5/5/2019' (open)="onOpen($event)"></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public onOpen(args) { this.datetimeObj.navigateTo('Year', new Date("03/8/2018")); } ``` Show/Hide the tooltip Property: showTooltip ``` <input type="text" ej-datetimepicker id="datetimepicker" [showTooltip]="false"/> ``` Not Applicable Interval Property: interval ``` <input type="text" ej-datetimepicker id="datetimepicker" [interval]="60"/> ``` Property: step ``` ``` Button text Property: buttonText ``` <input type="text" ej-datetimepicker id="datetimepicker" [buttonText]="buttonText"/> ``` ``` buttonText: Object = { done: "Ok" } ``` Can be achieved by ``` ``` ``` L10n.load({ 'en': { 'datetimepicker': { today: 'Now' } } }); ``` Enable/Disable the animation Property: enableAnimation ``` <input type="text" ej-datetimepicker id="datetimepicker" [enableAnimation]="false"/> ``` Not Applicable FocusIn method Not Applicable Method: focusIn() ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj (created)="create($event)" ></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public create(args:any): void{ this.datetimeObj.focusIn(); } ``` FocusOut method Not Applicable Method: focusOut() ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj (created)="create($event)" ></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public create(args:any): void{ this.datetimeObj.focusIn(); this.datetimeObj.focusOut(); } ``` Prevent popup close Not Applicable Event: Close ``` <ejs-datetimepicker id="datetimepicker" (close)="onClose($event)" ></ejs-datetimepicker> ``` ``` public onClose(args:any): void{ args.cancel = true; } ``` Prevent popup open Not Applicable Event: Open ``` <ejs-datetimepicker id="datetimepicker" (open)="onOpen($event)" ></ejs-datetimepicker> ``` ``` public onOpen(args:any): void{ args.cancel = true; } ``` ## Accessibility Behavior API in Essential JS 1 API in Essential JS 2 Enable/Disable the RTL Property: enableRTL ``` <input type="text" ej-datetimepicker id="datetimepicker" [enableRTL]="true"/> ``` Property: enableRtl ``` ``` ## Persistence Behavior API in Essential JS 1 API in Essential JS 2 Enable/Disable the persistence Property: enablePersistence ``` <input type="text" ej-datetimepicker id="datetimepicker" [enablePersistence]="true"/> ``` Property: enablePersistence ``` ``` ## Validation Behavior API in Essential JS 1 API in Essential JS 2 Validation rules Property: validationRules ``` <input type="text" ej-datetimepicker id="timePicker" [validationRules]="validationRules" /> ``` ``` validationRules:Object; constructor(){ this.validationRules = {required:true}; } ``` Can be achieved by ``` ``` ``` let options: FormValidatorModel = { rules: { 'datetimepicker': { required: [true, "Value is required"] } }}; this.formObject = new FormValidator('#form-element', options); ``` Validation message Property: validationMessage ``` <input type="text" ej-datetimepicker id="timePicker" [validationRules]="validationRules" [validationMessage]="validationMessage"/> ``` ``` validationRules:Object; validationMessage:Object; constructor(){ this.validationMessage = {required: "Required DateTime value"}; this.validationRules = {required:true}; } ``` Can be achieved by ``` <ejs-datetimepicker #datetimepicker id="datetimepicker" floatLabelType='Always'></ejs-datetimepicker> ``` ``` let options: FormValidatorModel = { rules: { 'datetimepicker': { required: [true, "Value is required"] } }, customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => { inputElement.parentElement.parentElement.appendChild(errorElement); } }; this.formObject = new FormValidator('#form-element', options); ``` ## Common </tr> Behavior API in Essential JS 1 API in Essential JS 2 Width Property: Width ``` ``` Property: Width ``` ``` Readonly Property: ReadOnly ``` <input type="text" ej-datetimepicker id="datetimepicker" [readOnly]="true"/> ``` Property: Readonly ``` ``` Show/Hide the clear button Not Applicable Property: showClearButton ``` <ejs-datetimepicker id="datetimepicker" [showClearButton]="false" ></ejs-datetimepicker> ``` Height Property: Height ``` ``` Can be achieved by ``` ``` ```css .e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group { height: 35px; } ``` Html Attributes Property: HtmlAttributes ``` <input type="text" ej-datetimepicker id="datetimepicker" [htmlAttributes]="htmlAttributes"/> ``` ``` htmlAttributes: Object = {required:"required"} ``` Not Applicable Show/Hide the week number Property: weekNumber ``` <input type="text" ej-datetimepicker id="datetimepicker" [weekNumber]="true"/> ``` Property: weekNumber ``` ``` Watermark text Property: watermarkText ``` ``` Property: Placeholder ``` ``` Disable/Enable Property: enabled ``` <input type="text" ej-datetimepicker id="datetimepicker" [enabled]="false"/> ``` Property: enabled ``` <ejs-datetimepicker id="datetimepicker" [enabled]="false" ></ejs-datetimepicker> ``` Enable/Disable the textbox editing Property: AllowEdit ``` <input type="text" ej-datetimepicker id="datetimepicker" [allowEdit]="false"/> ``` Property: AllowEdit ``` <ejs-datetimepicker id="datetimepicker" value="5/5/2010" [allowEdit]="false" ></ejs-datetimepicker> ``` zIndex Can be achieved by ``` ``` ```css .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 ``` <ejs-datetimepicker id="datetimepicker" (renderDayCell)="onRenderCell($event)" ></ejs-datetimepicker> ``` ``` public onRenderCell(args:any):void {/** code block */} ``` FocusIn event Event: FocusIn ``` <input type="text" ej-datetimepicker id="datetimepicker" (focusIn)="onFocus($event)"/> ``` ``` public onFocus(e:any) { /*Triggers when the popup gets focus*/ } ``` Event: focus ``` <ejs-datetimepicker id="datetimepicker" (focus)="onFocus($event)" ></ejs-datetimepicker> ``` ``` public onFocus(args:any):void{ /** code block */ } ``` FocusOut event Event: focusOut ``` <input type="text" ej-datetimepicker id="datetimepicker" (focusOut)="onFocusout($event)"/> ``` ``` public onFocusout(e:any) { /*Triggers when the popup gets focusout*/ } ``` Event: blur ``` <ejs-datetimepicker id="datetimepicker" (blur)="onBlur($event)" ></ejs-datetimepicker> ``` ``` public onBlur(args:any):void{ /** code block */ } ``` Change event Event: change ``` <input type="text" ej-datetimepicker id="datetimepicker" (ejchange)="onChange($event)"/> ``` ``` public onChange(e:any) { /*Triggers when the value is changed*/ } ``` Event: change ``` <ejs-datetimepicker id="datetimepicker" (change)="onChange($event)" ></ejs-datetimepicker> ``` ``` public onChange(args:any):void{ /** code block */ } ``` Created event Event: create ``` <input type="text" ej-datetimepicker id="datetimepicker" (create)="onCreate($event)"/> ``` ``` public onCreate(e:any) { /*Triggers when the control is created*/ } ``` Event: created ``` <ejs-datetimepicker id="datetimepicker" (created)="onCreate($event)" ></ejs-datetimepicker> ``` ``` public onCreate(args:any):void{ /** code block */ } ``` Destroy event Event: Destroy ``` <input type="text" ej-datetimepicker id="datetimepicker" (destroy)="onDestroy($event)"/> ``` ``` public onDestroy(e:any) { /*Triggers when the control is destroyed*/ } ``` Event: destroyed ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj (destroyed)="onDestroyed($event)" (change)="onChange($event)" ></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public onDestroyed(args:any):void{ console.log("destroyed") } public onChange(args:any):void{ this.datetimeObj.destroy(); } ``` ## Globalization Behavior API in Essential JS 1 API in Essential JS 2 Locale Property: locale ``` ``` Property: locale ``` ``` Specify the start day of week Property: startDay ``` <input type="text" ej-datetimepicker id="datetimepicker" [startDay]="2"/> ``` Property: firstDayOfWeek ``` <ejs-datetimepicker id="datetimepicker" [firstDayOfWeek]="3" ></ejs-datetimepicker> ``` ## Strict Mode Behavior API in Essential JS 1 API in Essential JS 2 Strict mode Property: enableStrictMode ``` <input type="text" ej-datetimepicker id="datetimepicker" [enableStrictMode]="true"/> ``` Property: strictMode ``` <ejs-datetimepicker id="datetimepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" [strictMode]="true" ></ejs-datetimepicker> ``` ## Open and Close Behavior API in Essential JS 1 API in Essential JS 2 Close Event: Close ``` <input type="text" ej-datetimepicker id="datetimepicker" (close)="onClose($event)"/> ``` ``` public onClose(e:any) { /*Triggers when the poupup gets closed*/ } ``` Event: close ``` <ejs-datetimepicker id="datetimepicker" (close)="onClose($event)"></ejs-datetimepicker> ``` ``` public onClose(args:any): void { /*Triggers when the poupup gets closed*/ } ``` Hide Method: hide() ``` <input type="text" ej-datetimepicker id="datetimepicker" (create)="onCreate($event)"/> ``` ``` public onCreate(e:any) { var datetimeObject = $("#datetimepicker").data("ejDateTimePicker"); datetimeObject.show(); datetimeObject.hide(); } ``` Method: hide() ``` <ejs-datetimepicker id="datetimepicker" (created)="onCreate($event)"></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public onCreate(args:any): void { this.datetimeObj.show(); this.datetimeObj.hide(); } ``` Open Event: open ``` <input type="text" ej-datetimepicker id="datetimepicker" (open)="onOpen($event)"/> ``` ``` public onOpen(e:any) { /*Triggers when the poupup gets closed*/ } ``` Event: open ``` <ejs-datetimepicker id="datetimepicker" (open)="onOpen($event)"></ejs-datetimepicker> ``` ``` public onOpen(args:any): void { /*Triggers when the poupup gets closed*/ } ``` Show Method: show() ``` <input type="text" ej-datetimepicker id="datetimepicker" (create)="onCreate($event)"/> ``` ``` public onCreate(e:any) { var datetimeObject = $("#datetimepicker").data("ejDateTimePicker"); datetimeObject.show(); } ``` Method: show() ``` <ejs-datetimepicker id="datetimepicker" (created)="onCreate($event)"></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public onCreate(args:any): void { this.datetimeObj.show(); this.datetimeObj.hide(); } ``` ## View Navigation Behavior API in Essential JS 1 API in Essential JS 2 Navigate to specific month Not Applicable Method: navigateTo() ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj value='5/5/2019' (open)="onOpen($event)"></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public onOpen(args) { this.datetimeObj.navigateTo('Year', new Date("03/8/2018")); } ``` Navigation callback Not Applicable Event: navigated ``` <ejs-datetimepicker id="datetimepicker" #datetimeObj (navigated)="onNavigated($event)"></ejs-datetimepicker> ``` ``` @ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent; public onNavigated(args) { /** code block */ } ``` Enable/Disable the drill down Property: timeDrillDown ``` <input type="text" ej-datetimepicker id="datetimepicker" [timeDrillDown]="timeDrillDown"/> ``` ``` timeDrillDown: Object = { showMeridian: true , interval: 10 , enabled: true } ``` Not Applicable