Search results

Migration from Essential JS 1 in Angular DateTimePicker component

14 Apr 2021 / 12 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
<input type="text" ej-datetimepicker id="datetimepicker" value='5/5/2019 2:00 AM'/>
Property: value
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" value='5/5/2019 3:00 AM'></ejs-datetimepicker>

DateTime Format

Behavior API in Essential JS 1 API in Essential JS 2
Display datetime format Property: dateTimeFormat
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" dateTimeFormat= 'd/MMM/yy tt h:mm'/>
Property: format
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" format="dd/MM/yyyy hh:mm a"></ejs-datetimepicker>
Day header format Property: dayHeaderFormat
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" dayHeaderFormat='long'/>
Not Applicable

Calendar Views

Behavior API in Essential JS 1 API in Essential JS 2
Start view Property: startLevel
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" startLevel="year"/>
Property: start
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" start="Decade"></ejs-datetimepicker>
Depth view Property: depthLevel
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" depthLevel="year"/>
Property: depth
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" depth="Year"></ejs-datetimepicker>

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum datetime Property: minDateTime
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" minDateTime="5/5/2019 4:00 AM"/>
Property: min
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" min="5/5/2019 3:00 AM"></ejs-datetimepicker>
Maximum datetime Property: maxDateTime
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" maxDateTime="5/5/2019 4:00 AM"/>
Property: max
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" max="5/5/2019 3:00 AM"></ejs-datetimepicker>

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Disabled dates Not Applicable Can be achieved by
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" #datetimeObj (renderDayCell)="disabledDatetime($event)"></ejs-datetimepicker>
Copied to clipboard
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
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" cssClass="gradient-lime"/>
Property: cssClass
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" cssClass="gradient-lime"></ejs-datetimepicker>
Show/Hide the today button Can be achieved by
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" cssClass="e-custom-class"/>
Copied to clipboard
.e-datetime-popup.e-popup.e-custom-class .e-button-container {
display: none !important;
}
Property: showTodayButton
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" [showTodayButton]="false"></ejs-datetimepicker>
Show/Hide the other month dates Property: showOtherMonths
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [showOtherMonths]="false"/>
Can be achieved by
Copied to clipboard
<ejs-datetimepicker id="datetimepicker"></ejs-datetimepicker>
Copied to clipboard
.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
<input type="text" ej-datetimepicker id="datetimepicker" [showPopupButton]="false"/>
Event: focus
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" #datetimeObj (focus)="onFocus($event)"></ejs-datetimepicker>
Copied to clipboard
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;

public onFocus(args:any): void {
this.datetimeObj.show();
}
Copied to clipboard
.e-control-wrapper .e-input-group-icon.e-date-icon {
display: none;
}
Enable/Disable the rounded corner Property: showRoundedCorner
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [showRoundedCorner]="true"/>
Can be achieved by
Copied to clipboard
<ejs-datetimepicker id="datetimepicker"  cssClass="e-custom-style"></ejs-datetimepicker>
Copied to clipboard
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
border-radius: 4px;
}
Skip a month Property: stepMonths
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [stepMonths]="2"/>
Can be achieved by
Copied to clipboard
<ejs-datetimepicker id="datetimepicker"  #datetimeObj value='5/5/2019' (open)="onOpen($event)"></ejs-datetimepicker>
Copied to clipboard
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;

public onOpen(args) {
this.datetimeObj.navigateTo('Year', new Date("03/8/2018"));
}
Show/Hide the tooltip Property: showTooltip
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [showTooltip]="false"/>
Not Applicable
Interval Property: interval
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [interval]="60"/>
Property: step
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" step='120'></ejs-datetimepicker>
Button text Property: buttonText
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [buttonText]="buttonText"/>
Copied to clipboard
buttonText: Object = { done: "Ok" }
Can be achieved by
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" locale='en'></ejs-datetimepicker>
Copied to clipboard
L10n.load({
'en': {
        'datetimepicker': { today: 'Now' }
    }
});
Enable/Disable the animation Property: enableAnimation
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [enableAnimation]="false"/>
Not Applicable
FocusIn method Not Applicable Method: focusIn()
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" #datetimeObj  (created)="create($event)" ></ejs-datetimepicker>
Copied to clipboard
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;

public create(args:any): void{
this.datetimeObj.focusIn();
}
FocusOut method Not Applicable Method: focusOut()
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" #datetimeObj  (created)="create($event)" ></ejs-datetimepicker>
Copied to clipboard
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;

public create(args:any): void{
this.datetimeObj.focusIn();
this.datetimeObj.focusOut();
}
Prevent popup close Not Applicable Event: Close
Copied to clipboard
<ejs-datetimepicker id="datetimepicker"  (close)="onClose($event)" ></ejs-datetimepicker>
Copied to clipboard
public onClose(args:any): void{
 args.cancel = true;
}
Prevent popup open Not Applicable Event: Open
Copied to clipboard
<ejs-datetimepicker id="datetimepicker"  (open)="onOpen($event)" ></ejs-datetimepicker>
Copied to clipboard
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
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [enableRTL]="true"/>
Property: enableRtl
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" enableRtl="true" ></ejs-datetimepicker>

Persistence

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the persistence Property: enablePersistence
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [enablePersistence]="true"/>
Property: enablePersistence
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" enablePersistence="true" ></ejs-datetimepicker>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validationRules
Copied to clipboard
<input type="text" ej-datetimepicker id="timePicker"  [validationRules]="validationRules" />
Copied to clipboard
validationRules:Object;
constructor(){
this.validationRules = {required:true};
}
Can be achieved by
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" floatLabelType='Always'></ejs-datetimepicker>
Copied to clipboard
let options: FormValidatorModel = {
rules: {
    'datetimepicker': { required: [true, "Value is required"] } }};
    this.formObject = new FormValidator('#form-element', options);
Validation message Property: validationMessage
Copied to clipboard
<input type="text" ej-datetimepicker id="timePicker"  [validationRules]="validationRules" [validationMessage]="validationMessage"/>
Copied to clipboard
validationRules:Object;
validationMessage:Object;
constructor(){
this.validationMessage = {required: "Required DateTime value"};
this.validationRules = {required:true};
}
Can be achieved by
Copied to clipboard
<ejs-datetimepicker #datetimepicker id="datetimepicker" floatLabelType='Always'></ejs-datetimepicker>
Copied to clipboard
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

Behavior API in Essential JS 1 API in Essential JS 2
Width Property: Width
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" width="200px"/>
Property: Width
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" width="300px" ></ejs-datetimepicker>
Readonly Property: ReadOnly
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [readOnly]="true"/>
Property: Readonly
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" value="5/5/2019" readonly="true" ></ejs-datetimepicker>
Show/Hide the clear button Not Applicable Property: showClearButton
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" [showClearButton]="false" ></ejs-datetimepicker>
Height Property: Height
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" height="35px"/>
Can be achieved by
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" cssClass='e-custom-style' ></ejs-datetimepicker>
Copied to clipboard
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
height: 35px;
}
Html Attributes Property: HtmlAttributes
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [htmlAttributes]="htmlAttributes"/>
Copied to clipboard
htmlAttributes: Object = {required:"required"}
Not Applicable
Show/Hide the week number Property: weekNumber
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [weekNumber]="true"/>
Property: weekNumber
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" weekNumber="true" ></ejs-datetimepicker>
Watermark text Property: watermarkText
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" watermarkText="Enter date and time"/>
Property: Placeholder
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" placeholder="Enter DateTime" ></ejs-datetimepicker>
Disable/Enable Property: enabled
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [enabled]="false"/>
Property: enabled
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" [enabled]="false" ></ejs-datetimepicker>
Enable/Disable the textbox editing Property: AllowEdit
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [allowEdit]="false"/>
Property: AllowEdit
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" value="5/5/2010" [allowEdit]="false" ></ejs-datetimepicker>
zIndex Can be achieved by
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" cssClas="e-custom-class"/>
Copied to clipboard
.e-datetime-popup.e-popup.e-custom-class {
z-index: 100 !important;
}
Property: zIndex
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" zIndex="2000" ></ejs-datetimepicker>
Specify the placeholder text behavior Not Applicable Property: floatLabelType
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" floatLabelType="Always" placeholder="Enter DateTime"  ></ejs-datetimepicker>
Event callback for each cell creation Not Applicable Event: renderDayCell
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (renderDayCell)="onRenderCell($event)" ></ejs-datetimepicker>
Copied to clipboard
public onRenderCell(args:any):void
{/** code block */}
FocusIn event Event: FocusIn
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (focusIn)="onFocus($event)"/>
Copied to clipboard
public onFocus(e:any) {  /*Triggers when the popup gets focus*/ }
Event: focus
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (focus)="onFocus($event)" ></ejs-datetimepicker>
Copied to clipboard
public onFocus(args:any):void{
/** code block */
}
FocusOut event Event: focusOut
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (focusOut)="onFocusout($event)"/>
Copied to clipboard
public onFocusout(e:any) { /*Triggers when the popup gets focusout*/ }
Event: blur
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (blur)="onBlur($event)" ></ejs-datetimepicker>
Copied to clipboard
public onBlur(args:any):void{
/** code block */
}
Change event Event: change
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (ejchange)="onChange($event)"/>
Copied to clipboard
public onChange(e:any) { /*Triggers when the value is changed*/ }
Event: change
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (change)="onChange($event)" ></ejs-datetimepicker>
Copied to clipboard
public onChange(args:any):void{
/** code block */
}
Created event Event: create
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (create)="onCreate($event)"/>
Copied to clipboard
public onCreate(e:any) { /*Triggers when the control is created*/ }
Event: created
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (created)="onCreate($event)" ></ejs-datetimepicker>
Copied to clipboard
public onCreate(args:any):void{
/** code block */
}
Destroy event Event: Destroy
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (destroy)="onDestroy($event)"/>
Copied to clipboard
public onDestroy(e:any) { /*Triggers when the control is destroyed*/ }
Event: destroyed
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" #datetimeObj (destroyed)="onDestroyed($event)" (change)="onChange($event)" ></ejs-datetimepicker>
Copied to clipboard
@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
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" locale="en-US"/>
Property: locale
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" locale="en" ></ejs-datetimepicker>
Specify the start day of week Property: startDay
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [startDay]="2"/>
Property: firstDayOfWeek
Copied to clipboard
<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
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [enableStrictMode]="true"/>
Property: strictMode
Copied to clipboard
<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
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (close)="onClose($event)"/>
Copied to clipboard
public onClose(e:any) { /*Triggers when the poupup gets closed*/ }
Event: close
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (close)="onClose($event)"></ejs-datetimepicker>
Copied to clipboard
public onClose(args:any): void { /*Triggers when the poupup gets closed*/ }
Hide Method: hide()
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (create)="onCreate($event)"/>
Copied to clipboard
public onCreate(e:any) {
var datetimeObject = $("#datetimepicker").data("ejDateTimePicker");
datetimeObject.show();
datetimeObject.hide();
}
Method: hide()
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (created)="onCreate($event)"></ejs-datetimepicker>
Copied to clipboard
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;

public onCreate(args:any): void {
this.datetimeObj.show();
 this.datetimeObj.hide();
 }
Open Event: open
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (open)="onOpen($event)"/>
Copied to clipboard
public onOpen(e:any) { /*Triggers when the poupup gets closed*/ }
Event: open
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (open)="onOpen($event)"></ejs-datetimepicker>
Copied to clipboard
public onOpen(args:any): void { /*Triggers when the poupup gets closed*/ }
Show Method: show()
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" (create)="onCreate($event)"/>
Copied to clipboard
public onCreate(e:any) {
var datetimeObject = $("#datetimepicker").data("ejDateTimePicker");
datetimeObject.show();
}
Method: show()
Copied to clipboard
<ejs-datetimepicker id="datetimepicker" (created)="onCreate($event)"></ejs-datetimepicker>
Copied to clipboard
@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()
Copied to clipboard
<ejs-datetimepicker id="datetimepicker"  #datetimeObj value='5/5/2019' (open)="onOpen($event)"></ejs-datetimepicker>
Copied to clipboard
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;

public onOpen(args) {
this.datetimeObj.navigateTo('Year', new Date("03/8/2018"));
}
Navigation callback Not Applicable Event: navigated
Copied to clipboard
<ejs-datetimepicker id="datetimepicker"  #datetimeObj  (navigated)="onNavigated($event)"></ejs-datetimepicker>
Copied to clipboard
@ViewChild("datetimeObj") datetimeObj: DateTimePickerComponent;

public onNavigated(args) {
/** code block */
}
Enable/Disable the drill down Property: timeDrillDown
Copied to clipboard
<input type="text" ej-datetimepicker id="datetimepicker" [timeDrillDown]="timeDrillDown"/>
Copied to clipboard
timeDrillDown: Object = { showMeridian: true , interval: 10 , enabled: true }
Not Applicable