Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in Angular DatePicker component

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

Date Selection

Behavior API in Essential JS 1 API in Essential JS 2
Setting the value Property: value 
<input type="text" ej-datepicker id="datepicker" value="5/5/2019"/>
 Property: value 
<ejs-datepicker id="datepicker" value='5/5/2019'></ejs-datepicker>

Date Format

Behavior API in Essential JS 1 API in Essential JS 2
Display date format Property: dateFormat 
<input type="text" ej-datepicker id="datepicker" dateFormat='yyyy/MM/dd'/>
 Property: format 
<ejs-datepicker id="datepicker" format="yyyy-MM-dd"></ejs-datepicker>
Day header format Property: dayHeaderFormat 
<input type="text" ej-datepicker id="datepicker" dayHeaderFormat="long"/>
 Not Applicable

Calendar Views

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

Date Range

Behavior API in Essential JS 1 API in Essential JS 2
Minimum date Property: minDate 
<input type="text" ej-datepicker id="datepicker" minDate="5/5/2019"/>
 Property: min 
<ejs-datepicker id="datepicker" min="6/6/2019"></ejs-datepicker>
Maximum date Property: maxDate 
<input type="text" ej-datepicker id="datepicker" maxDate="5/5/2019"/>
 Property: max 
<ejs-datepicker id="datepicker" max="6/6/2019"></ejs-datepicker>

Disabled Dates

Behavior API in Essential JS 1 API in Essential JS 2
Block-out dates Property: blackoutDates 
<input type="text" ej-datepicker id="datepicker" [blackoutDates]='blackoutDates'/>
blackoutDates : Object = [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)]
 Can be achieved by 
<ejs-datepicker id="datepicker" (renderDayCell)="disableDate($event)"></ejs-datepicker>
public disableDate(args) {
    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 
<input type="text" ej-datepicker id="datepicker" cssClass="gradient-lime"/>
 Property: cssClass 
<ejs-datepicker id="datepicker"  cssClass='gradient-lime'></ejs-datepicker>
Event callback for each cell creation Not Applicable Event: renderDayCell 
<ejs-datepicker id="datepicker" (renderDayCell)="onRenderCell($event)"></ejs-datepicker>
public onRenderCell(args:any) {/** code block */}
Show/Hide the today button Property: showFooter 
<input type="text" ej-datepicker id="datepicker" [showFooter]="false"/>
 Property: showTodayButton 
<ejs-datepicker id="datepicker" [showTodayButton]="false"></ejs-datepicker>
Show/Hide the other month dates Property: showOtherMonths 
<input type="text" ej-datepicker id="datepicker" [showOtherMonths]="false"/>
 Can be achieved by 
<ejs-datepicker id="datepicker"></ejs-datepicker>
.e-datepicker .e-calendar .e-content tr.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month > .e-day {
        visibility: none;
   }

.e-datepicker .e-calendar .e-content td.e-month-hide, .e-datepicker .e-calendar .e-content td.e-other-month {
        pointer-events: none;
        touch-action: none;
}
Show/Hide the disabled date Property: showDisabledRange 
<input type="text" ej-datepicker id="datepicker" [showDisabledRange]="false" [blackoutDates]='blackoutDates'/>
blackoutDates : Object = [new Date(2016, 4, 10), new Date(2016, 4, 15), new Date(2016, 4, 20), new Date(2016, 4, 22), new Date(2016, 5, 12), new Date(2016, 5, 24)]
 Not Applicable
Show/Hide the popup button Property: showPopupButton 
<input type="text" ej-datepicker id="datepicker" [showPopupButton]="false"/>
 Can be achieved by 
<ejs-datepicker id="datepicker" #dateObj (focus)="onFocus($event)"></ejs-datepicker>
@ViewChild("dateObj") dateObj: DatePickerComponent;

public onFocus(args:any) {
    this.dateObj.show();
}
.e-control-wrapper .e-input-group-icon.e-date-icon {
    display: none;
Enable/Disable the rounded corner Property: showRoundedCorner 
<input type="text" ej-datepicker id="datepicker" [showRoundedCorner]="true"/>
 Can be achieved by 
<ejs-datepicker id="datepicker" #dateObj cssClass='e-customStyle'></ejs-datepicker>
.e-control-wrapper.e-customStyle.e-date-wrapper.e-input-group {
    border-radius: 4px;
}
Skip a month Property: stepMonths 
<input type="text" ej-datepicker id="datepicker" [stepMonths]="3"/>
 Can be achieved by 
<ejs-datepicker id="datepicker" #dateObj value='5/5/2019' (open)="onOpen($event)"></ejs-datepicker>
@ViewChild("dateObj") dateObj: DatePickerComponent;
public onOpen(args:any){
    this.dateObj.navigateTo('Year', new Date("03/18/2028"));
}
Show/Hide the tooltip Property: showTooltip 
<input type="text" ej-datepicker id="datepicker" [showTooltip]="false"/>
 Not Applicable
Today button text Property: buttonText 
<input type="text" ej-datepicker id="datepicker" buttonText="Now"/>
 Can be achieved by 
<ejs-datepicker id="datepicker" locale='de'></ejs-datepicker>
L10n.load({
    'de': {
        'datepicker': { placeholder: 'Wählen Sie ein Datum aus',
        `today: 'heute' }
    }
});
Display inline Property: displayInline 
<input type="text" ej-datepicker id="datepicker" [displayInline]='true'/>
 Not Applicable
Enable/Disable the animation Property: enableAnimation 
<input type="text" ej-datepicker id="datepicker" [enableAnimation]='false'/>
 Not Applicable
Highlight dates Property: highlightSection 
<input type="text" ej-datepicker id="datepicker" highlightSection='month'/>
 Can be achieved by 
<ejs-datepicker id="datepicker" (renderDayCell)='highlightDate($event)'></ejs-datepicker>
public highlightDate(args:any) {
    if (args.date.getDate() === 10) {
        args.element.classList.add('e-highlightweekend');
    }
}
.e-highlightweekend {
    background-color: #cfe9f3;
}
Highlight weekend Property: highlightWeekend 
<input type="text" ej-datepicker id="datepicker" [highlightWeekend]='true'/>
 Can be achieved by 
<ejs-datepicker id="datepicker" (renderDayCell)='highlightDate($event)'></ejs-datepicker>
public highlightDate(args:any) {
    if (args.date.getDay() === 0 || args.date.getDay() === 6) {
        args.element.classList.add('e-highlightweekend');
    }
}
.e-highlightweekend {
    background-color: #cfe9f3;
}
Tooltip format Property: tooltipFormat 
<input type="text" ej-datepicker id="datepicker" tooltipFormat='dd/MM/yyyy'/>
 Not Applicable
Special dates Property: specialDates 
<input type="text" ej-datepicker id="datepicker" [specialDates]='specialdate'/>
specialdate: Object = [ { date: new Date(), tooltip: "In Australia" }]
 Can be achieved by 
<ejs-datepicker id="datepicker" (renderDayCell)='customDates($event)' value='5/5/2017'></ejs-datepicker>
public customDates(args:any) {
     let span: HTMLElement;
    if (args.date.getDate() === 10) {
        span = document.createElement('span');
        span.setAttribute('class', 'e-icons highlight');
        args.element.firstElementChild.setAttribute('title', 'Birthday !');
        args.element.setAttribute('title', 'Birthday !');
        args.element.setAttribute('data-val', 'Birthday !');
        args.element.appendChild(span);
    }
}
FocusIn event Event: focusIn 
<input type="text" ej-datepicker id="datepicker" (focusIn)='onFocus($event)'/>
public onFocus(e:any) {
    /** code block */
}
 Event: focus 
<ejs-datepicker id="datepicker" (focus)='onFocus($event)'></ejs-datepicker>
public onFocus(args:any) {
    /** code block */  
}
FocusOut event Event: focusOut 
<input type="text" ej-datepicker id="datepicker" (focusOut)='onFocus($event)'/>
public onFocus(e:any) {
    /** code block */
}
 Event: blur 
<ejs-datepicker id="datepicker" (blur)='onBlur($event)'></ejs-datepicker>
public onBlur(args:any) {
    /** code block */  
}
FocusIn method Not Applicable Method: focusIn() 
<ejs-datepicker id="datepicker" #dateObj (created)='create($event)'></ejs-datepicker>
@ViewChild("dateObj") dateObj : DatePickerComponent;
public create(args:any){
    this.dateObj.focusIn();
}
FocusOut method Not Applicable Method: focusOut() 
<ejs-datepicker id="datepicker" #dateObj (created)='create($event)'></ejs-datepicker>
@ViewChild("dateObj") dateObj : DatePickerComponent;
public create(args:any){
    this.dateObj.focusIn();
    this.dateObj.focusOut();
}
Prevent popup close Not Applicable Event: Close 
<ejs-datepicker id="datepicker"  (close)='onClose($event)'></ejs-datepicker>
public onClose(args) {
    /*Triggers when the popup gets close*/
    args.cancel = true;
}
Prevent popup open Not Applicable Event: Open 
<ejs-datepicker id="datepicker" (open)='onOpen($event)'></ejs-datepicker>
public onOpen(args:any) {
    /*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 
<input type="text" ej-datepicker id="datepicker" [enableRTL]='true'/>
 Property: enableRtl 
<ejs-datepicker id="datepicker" [enableRtl]='true'></ejs-datepicker>

Persistence

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

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Validation rules Property: validationRules 
<input type="text" ej-datepicker id="timePicker"  [validationRules]="validationRules"/>
validationRules:Object;
constructor(){
    this.validationRules = {required:true};
}
 Can be achieved by 
<ejs-datepicker id="datepicker" floatLabelType='Always'></ejs-datepicker>
let options: FormValidatorModel = {
    rules: {
        'datepicker': { required: [true, "Value is required"] } }};
        this.formObject = new FormValidator('#form-element', options);
Validation message Property: validationMessage 
<input type="text" ej-datepicker id="timePicker"  [validationRules]="validationRules" [validationMessage]="validationMessage"/>
validationRules:Object;
validationMessage:Object;
constructor(){
    this.validationMessage = {required: "Required Date value"};
    this.validationRules = {required:true};
}
 Can be achieved by 
<ejs-datepicker #datepicker id="datepicker" floatLabelType='Always'></ejs-datepicker>
let options: FormValidatorModel = {
    rules: {
        'datepicker': {
                    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 
<input type="text" ej-datepicker id="datepicker" width='300px'/>
 Property: width 
<ejs-datepicker id="datepicker" width='300px'></ejs-datepicker>
Readonly Property: readonly 
<input type="text" ej-datepicker id="datepicker" [readOnly]='true'/>
 Property: readonly 
<ejs-datepicker id="datepicker" [readonly]='true'></ejs-datepicker>
Show/Hide the clear button Not Applicable Property: showClearButton 
<ejs-datepicker id="datepicker" [showClearButton]='false'></ejs-datepicker>
Height Property: height 
<input type="text" ej-datepicker id="datepicker" height='50px'/>
 Can be achieved by 
<ejs-datepicker id="datepicker" cssClass='e-custom-style'></ejs-datepicker>
.e-control-wrapper.e-custom-style.e-date-wrapper.e-input-group {
    height: 35px;
}
Html attributes Property: HtmlAttributes 
<input type="text" ej-datepicker id="datepicker" [htmlAttributes] = 'htmlAttributes'/>
htmlAttributes : Object = {required:"required"}
 Not Applicable
Enable/Disable the week number Property: weekNumber 
<input type="text" ej-datepicker id="datepicker" [weekNumber] = 'true'/>
 Property: weekNumber 
<ejs-datepicker id="datepicker" [weekNumber]='true'></ejs-datepicker>
Watermark text Property: watermarkText 
<input type="text" ej-datepicker id="datepicker" watermarkText= 'Enter a date'/>
 Property: placeholder 
<ejs-datepicker id="datepicker" placeholder='Enter Date'></ejs-datepicker>
Disable/Enable Property: enabled 
<input type="text" ej-datepicker id="datepicker" [enabled]= 'false'/>
 Property: enabled 
<ejs-datepicker id="datepicker" [enabled]='false'></ejs-datepicker>
Disable the DatePicker Method: disable() 
<input type="text" ej-datepicker id="datepicker" (create)= 'onCreate($event)'/>
public onCreate(e:any) {
    var dateObject = $("#datepicker").data("ejDatePicker");
    dateObject.disable();
}
 Not Applicable
Enable the DatePicker Method: enable() 
<input type="text" ej-datepicker id="datepicker" (create)= 'onCreate($event)'/>
public onCreate(e:any) {
    var dateObject = $("#datepicker").data("ejDatePicker");
    dateObject.enable();
}
 Not Applicable
Enable/Disable the textBox editing Property: AllowEdit 
<input type="text" ej-datepicker id="datepicker" [allowEdit]= 'true'/>
 Property: AllowEdit 
<ejs-datepicker id="datepicker" [allowEdit]='false'></ejs-datepicker>
zIndex Not Applicable Property: zIndex 
<ejs-datepicker id="datepicker" zIndex="2000"></ejs-datepicker>
Specify the placeholder text behavior Not Applicable Property: floatLabelType 
<ejs-datepicker id="datepicker" placeholder='Enter date' floatLabelType='Auto'></ejs-datepicker>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Locale Property: Locale 
<input type="text" ej-datepicker id="datepicker" locale="en-US"/>
 Property: locale 
<ejs-datepicker id="datepicker" locale='en'></ejs-datepicker>
First day of week Property: startDay 
<input type="text" ej-datepicker id="datepicker" [startDay]="4"/>
 Property: firstDayOfWeek 
<ejs-datepicker id="datepicker" [firstDayOfWeek]='5'></ejs-datepicker>

Strict Mode

Behavior API in Essential JS 1 API in Essential JS 2
Strict mode Property: enableStrictMode 
<input type="text" ej-datepicker id="datepicker" [enableStrictMode]="true"/>
 Property: strictMode 
<ejs-datepicker id="datepicker" min="5/5/2019" max="6/6/2019" value="7/7/2019" [strictMode]='true'></ejs-datepicker>

Open and Close

Behavior API in Essential JS 1 API in Essential JS 2
Close Event: Close 
<input type="text" ej-datepicker id="datepicker" (close)="onClose($event)"/>
public onClose(e:any) { /** code block */ }
 Event: Close 
<ejs-datepicker id="datepicker" (close)="onClose($event")></ejs-datepicker>
public onClose(args:any) { /** code block */ }
Hide Method: hide() 
<input type="text" ej-datepicker id="datepicker" (create)="onCreate($event")/>
public onCreate(e:any) {
    var dateObject = $("#datepicker").data("ejDatePicker");
    dateObject.show();
    dateObject.hide();
}
 Method: hide() 
<ejs-datepicker id="datepicker" #dateObj (created)="onCreate($event")></ejs-datepicker>
@ViewChild("dateObj") dateObj: DatePickerComponent;
public onCreate(args:any){
    this.dateObj.show();
    this.dateObj.hide();
}
Open Event: Open 
<input type="text" ej-datepicker id="datepicker" (open)="onOpen($event)"/>
public onOpen(e:any) { /** code block */ }
 Event: Open 
<ejs-datepicker id="datepicker" (open)="onOpen($event")></ejs-datepicker>
public onOpen(args:any) { /** code block */ }
Show Method: show() 
<input type="text" ej-datepicker id="datepicker" (create)="onCreate($event")/>
public onCreate(e:any) {
    var dateObject = $("#datepicker").data("ejDatePicker");
    dateObject.show();
}
 Method: show() 
<ejs-datepicker id="datepicker" #dateObj (created)="onCreate($event")></ejs-datepicker>
@ViewChild("dateObj") dateObj: DatePickerComponent;
public onCreate(args:any){
    this.dateObj.show();
}

View Navigation

Behavior API in Essential JS 1 API in Essential JS 2
Navigate to specific month Not Applicable Method: navigateTo() 
<ejs-datepicker id="datepicker" #dateObj value='5/5/2019' (open)="onOpen($event)"></ejs-datepicker>
@ViewChild("dateObj") dateObj: DatePickerComponent;
public onOpen(args:any){
    this.dateObj.navigateTo('Year', new Date("03/18/2028"));
}
Navigation callback Event: Navigate 
<input type="text" ej-datepicker id="datepicker" (navigate)="onNavigate($event")/>
public onNavigate(e:any) {/** code block */ }
 Event: Navigated 
<ejs-datepicker id="datepicker" (navigated)="onNavigated($event)"></ejs-datepicker>
public onNavigated(args:any) {/** code block */ }
Enable/Disable the drill down Property: allowDirllDown 
<input type="text" ej-datepicker id="datepicker" [allowDirllDown]="true")/>
 Not Applicable
Previous
Next